Main Menu

© 2007  WebStudioHelp.net & SunsetFX.com          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'Back to the Beach',  'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.

Graphics

Thumbnails Above and Below Center Image            * Special Thanks to DdrumDdude and Mary for their work on this script *

This script:
-  Places the thumbnails above and below the main image.
-  Unlike the Web Studio Forum thread where the $thisfolder$ object was used, I've modified the code to be used with a stand-alone FTP program. This allows easy access to change the images individually without the need to reload the entire page or site.
-  I've also changed the basic table layout to accomodate a standard 1.25 to 1 ratio (w x h) for both the main image and the thumbnails - this comes in handy when you're resizing the images.

How to prepare:
-  You will need to have a way to modify your graphics - use your favorite graphics program (except Paint!) If you don't have a program yet, select the Graphics Link, then check the items listed under Graphics Programs for some ideas.
-  Modify your full-sized images so that they are the final size to be displayed when opened. In the case of the code below, that is 500 pixels wide x 400 pixels tall.
-  From the full-sized images, make your thumbnails. To use the code as shown, they should be 125 pixels wide x 100 pixels high.
-  When saving the graphic files, try naming them in a way that they can be easily connected. If the full-sized image is called Sample_1.jpg, for instance, think about naming the thumbnail Sample_1_thumb.jpg. This will facilitate adding code for the thumbnails later.
-  Using a stand-alone FTP program, upload the full-sized images to a new folder on the server. Make sure to name the folder for something related to the images it contains. In this case, I call the folder Sample_Pics. If you don't already use a stand-alone FTP program, consider getting one - once you've learned the basics on how they work, you'll always use it.

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:

Code:
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site: http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!http://javascript.internet.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up ||ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>

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.

Example:

Now, insert an HTML Object on the page, and paste in this code:

Code:
<center>
<table width=875 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('Sample_Pics/Sample_5.jpg');"><img src="Sample_Pics/Sample_5_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_6.jpg');"><img src="Sample_Pics/Sample_6_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_7.jpg');"><img src="Sample_Pics/Sample_7_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_8.jpg');"><img src="Sample_Pics/Sample_8_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_9.jpg');"><img src="Sample_Pics/Sample_9_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_10.jpg');"><img src="Sample_Pics/Sample_10_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_11.jpg');"><img src="Sample_Pics/Sample_11_thumb.jpg" width=125 height=100 border=0></a></td>
</tr>
<tr>
<td colspan=7 align=center><img name="mainpic" src="Sample_Pics/Sample_5.jpg" width=500 height=400 border=3></td>
</tr>
<tr>
<td><a href="javascript:doPic('Sample_Pics/Sample_12.jpg');"><img src="Sample_Pics/Sample_12_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_19.jpg');"><img src="Sample_Pics/Sample_19_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_20.jpg');"><img src="Sample_Pics/Sample_20_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_21.jpg');"><img src="Sample_Pics/Sample_21_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_22.jpg');"><img src="Sample_Pics/Sample_22_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_23.jpg');"><img src="Sample_Pics/Sample_23_thumb.jpg" width=125 height=100 border=0></a></td>
<td><a href="javascript:doPic('Sample_Pics/Sample_24.jpg');"><img src="Sample_Pics/Sample_24_thumb.jpg" width=125 height=100 border=0></a></td>
</tr>
</table>
</center>

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.

Code:
<table width=875 border=0 cellspacing=0 cellpadding=0>

-  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
-  Change the folder and image names to match those you've used.

Code:
<td><a href="javascript:doPic('Sample_Pics/Sample_5.jpg');"><img src="Sample_Pics/Sample_5_thumb.jpg" width=125 height=100 border=0></a></td>

-  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).

Code:
<td colspan=7 align=center><img name="mainpic" src="Sample_Pics/Sample_5.jpg" width=500 height=400 border=3></td>

-  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.

Code:
<td colspan=7 align=center><img name="mainpic" src="Sample_Pics/Sample_5.jpg" width=500 height=400 border=3></td>
aaaaaaaaaaaaiii