FrogJS Javascript Gallery

FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed, as is the case with photo stories. Below is a small example of a FrogJS gallery. Just click the parrot thumbnail to scroll through the gallery.




Image Preloading

Fullsize images are preloaded as the user goes through your gallery, one at a time. The user is shown a loading images while the next image in the series is preloaded.

No javascript?

No problem. A user without javascript enabled will still be able to view your page as a thumbnail gallery. They just won’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).

How to install

FrogJS was designed to be as simple to use as possible. All you’ll need is a basic understanding of HTML and you should have your FrogJS gallery up in no time.

1. Download the FrogJS v1.1, unzip it and upload the files to your web server.

2. On your HTML page, create a thumbnail gallery with the following format. You may use as many or as few images as you would like.

<div id="FrogJS">
	<a href="images/1.jpg" title="Credit" rel="">
		<img src="images/1_thumb.jpg" alt="Caption" />
	<a href="images/2.jpg" title="Credit">
		<img src="images/2_thumb.jpg" alt="Caption" />

All of your links must be inside a DIV with its ID set to “FrogJS”. Also note that any elements within the FrogJS DIV will be removed once the FrogJS gallery loads. The `rel` attribute is optional and defines what URL will open if the main image is clicked.

3. Put the includes for frog.js, prototype.js, and scriptaculous.js in the section of your webpage. Below is an example of the code.

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

The locations of each file may vary depending on where you uploaded them to your server.

4. That’s it! Your gallery is done.

Customizing FrogJS

Within the frog.js file, there are a few options you can customize for your gallery. These options are located near the top of the frog.js file under the heading “// CONFIGURATION VARIABLES”.

Have images open in a new window

To make the link open in a new window you’ll have to edit your copy of frog.js. Find line 174 and replace it with the following code:[imageNum]['link'],'_blank');


FrogJS has been tested and works in the following browsers:

  • Internet Explorer 6
  • Internet Explorer 7
  • Firefox 2.0
  • Safari 2.0
  • Opera 9.1

There are known issues in the following browsers:

  • Opera 9.02

Leave a comment