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
- 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.
browsers will still be able to view the thumbnail gallery. They just don’t get
all the fancy animations.
- 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).
- Everything is defined as plain HTML on the page, making it easy to set up,
- Support for optional description and hyperlink: Each image can have
a description shown with it, which is defined by using the "
attribute of the image. To hyperlink the image, just use the "
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:
margin: 0 auto;
FrogJS image gallery uses the Prototype Framework and Scriptaculous
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
<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