FrogJS Image Gallery
Version details: 1.1
Description: FrogJS is sequential image gallery that supports an optional description and link for each image. You view the images in sequence, by clicking on the previous and next images' thumbnail. Each image slide is defined as regular HTML contained within a special DIV tag on the page, making it extremely easy to set up, including its corresponding description and link.
- Image Preloading: Fullsize images are preloaded one at a time, as the user goes through your gallery. The user is shown a loading images while the next image in the series is preloaded.
- Supports any image size: FrogJS was created to work with any image size. Thumbnails are placed at the left and right edges of the FrogJS DIV and the main image is centered within that DIV. All you have to do is leave enough room for everything (ex. if your thumbnails are 100px wide and your main image is 400px wide, you’ll need to set your FrogJS DIV’s width to at least 600px).
- Support for optional description and hyperlink: Each image can have
a description shown with it, which is defined by using the "
alt" attribute of the image. To hyperlink the image, just use the "
rel" attribute added inside the image's
Simply download FrogJS1.1.zip, and refer to example.html for the code to add to your page.
Just for your reference, here's a step by step guide to installing the script.
Step 1: Insert the below code in the HEAD section of your page:
FrogJS image gallery uses the Prototype Framework and Scriptaculous Effects Library.
Step 2: You're now ready to define your image gallery. Inside the BODY section, insert the following code template:
<a href="images/1.jpg" title="Jolie Myers / The State News" rel="http://portfolio.statenews.com/users/Jolie_Myers/">
<img src="images/1_thumb.jpg" alt="An attendee of Rabbi Hendel Weingarten's Purim service at Chabad House on Elizabeth Street in East Lansing uses a noisemaker after the name of Haman is read." />
<a href="images/2.jpg" title="Jolie Myers / The State News">
<img src="images/2_thumb.jpg" alt="Junior wide receiver Terry Love is taken down by Illinois safety Kyle Knezetic September 30 at Spartan Stadium. The Fighting Illini beat the Spartans, 23-20, with a fourth-quarter field goal scored in the last 20 seconds of the game." />
<a href="images/4.jpg" title="Jolie Myers / The State News">
<img src="images/4_thumb.jpg" alt="Kevin Bozeman performs his comedy routine at Connxtions Comedy Club in Lansing shortly after the death of Richard Pryor. Bozeman said Pryor influenced all comedians, not just black performers." />
All your images must go inside the DIV tag in red. Here I've defined 3
images, with the parts in green being optional. As mentioned, the "
attribute if defined hyperlinks the enlarged image, while the "
attribute defines the description associated with the image. Finally, the "
attribute creates a textual footnote beneath the image, used to indicate image
credits, for example.
For your information, inside frog.js, there are a few configurable variables:
// CONFIGURATION VARIABLES var thumbTop = '60px'; // distance you want you thumbnails to be from the top of their container var loadingAni = 'images/loading.gif'; // image displayed when preloading images var scalePercent = '300'; // percent thumbnails expand when fading into main image