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.
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="http://www.puidokas.com"> <img src="images/1_thumb.jpg" alt="Caption" /> </a> <a href="images/2.jpg" title="Credit"> <img src="images/2_thumb.jpg" alt="Caption" /> </a> </div>
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.
The locations of each file may vary depending on where you uploaded them to your server.
4. That’s it! Your gallery is done.
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:
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
You may contact the creator of FrogJS directly by email at firstname.lastname@example.org.
A web developer living in Marina del Rey, California who specializes in client-side web technologies.
If you can open it in Firefox, you can put a grid on top of it. It's easy to customize, allowing you to create the exact grid you designed your layout around.