2007 WebStudioHelp.net & SunsetFX.com All Rights Reserved Worldwide
Thumbnails Above and Below Center Image * Special Thanks to DdrumDdude and Mary for their work on this script *
How to prepare:
The Main Code ...
On the page where the thumbnails are to be placed, Open the Page Properties / Page HTML / Inside Page Header and paste this code:
Insert the Page Code
Note the Size of Your Images
- This script works best when all of the images are the same size. In this case, thumbnails at 125 wide x 100 tall. The full-sized images should all be based on the size set in the script - 500 x 400 as displayed here. Using images that are not sized properly will appear distorted.
Now, insert an HTML Object on the page, and paste in this code:
What You Need to Change in the Code
- The first thing you'll need to change will be the total width of the table. I used 875 to accomodate 7 images across at 125 pixels each.
- The next thing you'll need to do is indicate where the images are stored. In the code below, you'll see that I have a folder called Sample_Pics loaded into the directory for this site. Inside that are all of the images (thumbnails and full-sized). They are named Sample_5.jpg (full-size) and Sample_5_thumb.jpg
- The size of the full-sized image needs to be adjusted based on your images. Keep in mind that the ratio used for the best results (both thumbnails and full-sized images) is 1.25 wide x 1 tall. You can see in the code below that I have the size at 500 wide x 400 high. I also added a 3 pixel wide border to add a space around the center image (the border=3 part).
- You can change the number of thumbnails across by modifying the colspan=7 part. Make sure to adjust the table width as needed to compensate.