Main Menu

© 2007 &          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of
'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.


Adding a Customizable Thumbnail Script (with same color backgrounds)               * Special Thanks to Surfa for Help with the Modifications! *

This script allows you to:
-  Set the size of the window to open per thumbnail / picture.
-  A
ssign a background color to the new window (or to have different colors for different new windows - see Second Script, here).
-  Bring the new window to the front when a thumbnail is clicked - even if a previous window has been left open.
-  Disable the IE image toolbar.
-  Close any new window when the main page is closed.

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.
-  From the full-sized images, make your thumbnails.
-  When saving the graphic files, try naming them in a way that they can be easily connected. If the full-sized image is called Red_House.jpg, for instance, think about naming the thumbnail Red_House_Thumb.jpg. This will facilitate adding code to the thumbnails later.
-  Lay out the page for the thumbnails.
-  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, we'll call the folder Before_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.

Script with all background colors the same ...

On the page where the thumbnails are to be placed, Open the Page Properties / Page HTML / Inside Page Header and paste this code:

<script language="JavaScript" type="text/javascript">
<!-- ;
var newwindow;
var wheight = 0, wwidth = 0;
function popitup5(url, title, iwidth, iheight) {
var pwidth, pheight;

if ( !newwindow ||newwindow.closed ) {
pheight=iheight+30;'','htmlname','width=' + pwidth +',height=' +pheight + ',resizable=1,top=5,left=10');

if (wheight!=iheight ||wwidth!=iwidth ) {
newwindow.resizeTo(pwidth, pheight);

newwindow.document.writeln('<html> <head> <title>' + title + '<\/title> <META HTTP-EQUIV="imagetoolbar" CONTENT="no"><\/head> <body bgcolor="#ffffff"> <center>');
newwindow.document.writeln('<img src=' + url + '>');
newwindow.document.writeln('<\/center> <\/body> <\/html>');

// Routines to tidy up popup windows when page is left
// Call with an onUnload="tidy5()" in body tag

function tidy5() {
if (newwindow && !newwindow.closed) { newwindow.close(); }

// Based on JavaScript provided by Peter Curtis at -->
EQUIV="imagetoolbar" CONTENT="no"><\/head> <body bgcolor="#ffffff"> <center>');

Note: the background color for the new windows would be adjusted in this line (the #ffffff portion). For a 216-color chart, check this link.

-  Insert a thumbnail onto the page. Using the Insert / Protected Graphic from File feature will save all of the thumbnails into a single folder (_RefFiles). The files will also be loaded without any type of compression (which can cause some loss of quality).
-  You may find it easier to keep the quantity of thumbnails being worked on at one time to a minimum.

Insert the Page Code

Insert the Thumbnails

Add Code to the Thumbnails

-  Right-click on a thumbnail - select Add / Edit Link
-  In the URL Section, paste in this code:

javascript:popitup5('Before_Pics/Before_002_med.jpg','Before Pics', 620, 470)

What the Code Means

-  The javascript:popitup5 portion shouldn't be changed.
-  The 'Before_Pics portion indicates the name of the folder on the server containing all of the full-sized images. This name should be changed to exactly match the name of the folder you created.
-  The Before_002_med.jpg portion should exactly match the name of the full-sized picture to be opened by the thumbnail.
-  The Before Pics portion can be a brief description of the picture.
-  The 620, 470 portion indicates the size of the new window to be opened (width x height). You can add extra space as desired since the background will be colored based on the page code. If the full-sized pictures are different sizes, you can use width and height as needed.

Make sure that the format stays the same as listed - if not, the script might not work properly.


Insert the Code to Clean Up the Open Windows

On the page where the thumbnails are to be placed, Open the Page Properties / Page HTML / Inside Body Tag and paste this code: