• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

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.
• Non JavaScript support: Users with JavaScript disabled in their 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, search engine friendly, and non-JavaScript support friendly.
• 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 <a> tag.

Demo:

Directions:

Simply download FrogJS1.1.zip, and refer to example.html for the code to add to your page.

Installation instructions

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:

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/frog.js"></script>

<style type="text/css">
#FrogJS{
width: 760px;
height: 600px;
margin: 0 auto;
}
#FrogJSCredit{
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}
</style>

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:

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 "rel" attribute if defined hyperlinks the enlarged image, while the "alt" attribute defines the description associated with the image. Finally, the "title" attribute creates a textual footnote beneath the image, used to indicate image credits, for example.

Enjoy!

Notes

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