JavaScript Gallery Builder
JavaScript Gallery Builder is a JavaScript-producing design tool for creating gallery with sliding thumbnail image columns on web pages.
Let's start with the sample iincluded in this script package.
In the sample ship with this script, we have a 670x320 gallery, which includes 240x280 thumb area and 400x300 full-size image box. The thumb area includes total 3 columns and 2 are visible. There are 8 images so each column should display 3 images, the last column displays only 2. We would like to make 2 columns visible, to approach this, we need to set the width of the thumb area larger than the total width of 2 columns plus the padding spaces between each thumbnail images. You don't need to calculate the exact width, just preview the script by choosing Script/Preview or CTRL+P, then tweak the number. For the height of the thumb area, in order to display all 3 thumbnail images in each column, we need to set the height of the thumb area to be larger than total height of 3 thumbnail images plus the padding spaces plus the height of the arrow images. Don't forget arrow images because they will be displayed under the thumbnail columns and provide the way to users to scroll those hidden thumbnail image columns. Then we can start to consider the size of the full-size image box. Just give it the reasonable numbers, in this sample, we set it to 400x300. The last thing we should consider is the size of the whole gallery box, the width of gallery should be larger than the width of thumb area plus the full-size image box. If there are extra spaces between the thumb area and the full-size image box, just use Full Size Image Padding to position the full-size image box to anywhere you want, let's say, center it, maybe. And the last thing, the height of the gallery box, just set it a little larger than the height of the thumb area. All is done. Preview the gallery and save it if the final result is what you want. Copy and paste the codes from .html file to your own web pages, and then upload all related script files and image files to web server.
This script was tested with following Web browsers on Windows:
IE 6+
FireFox 1.x
Opera 9+
Mozilla 1.x
Safari 3.0.2
|
