Thumbnail Images

Sliding Duration: Specifies how long the sliding/scrolling effect lasts when user clicks arrow button to scroll the thumbnail images columns. That is, how soon to complete the scrolling.

Sliding Steps: Specifies how many steps are used to complete the sliding/scrolling effect.

Thumb Area Width and Height: The size of the thumb area where thumbnail image columns locate. If the size is not enough to display all thumbnail image columns, some of them will be hidden automatically and user may use left/right arrow buttons to scroll them in and out.

Thumbnail Image Width and Height: The size of the thumbnail images in pixels.

Columns: Specifies how many columns will be used to display all thumbnail images.

Padding: The space between the border of each thumbnail images and the border of thumb area.

NOTE: Columns, Padding and Thumbnail Image Size (Width and Height) will not be adjusted automatically according to the size (width and height) of the thumb area. So make sure to adjust each of these properties to suit the size of thumb area manually.

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.