FF1+ IE6+ Opr9+

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.
  • 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:

<div id="FrogJS">

<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>

<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>

<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." />
</a>

</div>

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

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post