Advanced Thumbnails Using New Windows

Do you want advanced thumbnail imagery?
Click on the picture below!

The procedure for installing this feature is fairly simple. Once the code is placed on your page and your images are set, then it's just a matter of clicking on the thumbnails. Really - it's almost that simple! I'll show you how ... one thing at a time. I strongly suggest trying this on a test site until you get it working. That way nothing is lost or otherwise messed up on your actual site.

The first thing you will need to do is place your full-size pictures on "new" pages - one image for each page. You don't need to worry about centering, or any other usual page-design decisions. They are not important here - this page is only used to place your pictures and acquire the sizes you'll be using in the next part of the tutorial. While it's true this could also be accomplished using the HTML Object, I have determined this to be better for beginners as it gives a better representation of what is going on - or at least that's what I hope. You may use an HTML Object to apply the image to each page if you wish - that will bypass Web Studio's conversion of the image - but it may not be necessary.

NOTE: I have found this method will work correctly by ONLY using the "HTML 4.0 Only" option found in Site Properties. Using 3.2 (or both) plays tricks on the placement of the image in preview (and in the browsers). Since using "4.0 Only" is advised anyway, this shouldn't be a problem for most users. There is a workaround, but it's a lengthy explanation for beginners and I will not go into that here.

Placing the images (one image example given) -
  1. Add a new page for the image.
  2. Rename the page using a name you'll recognize for the image (make it a one-word name and as short as possible).
  3. Insert the image on the page.
  4. Add a background to the page (using solid colors is best here - a background image will slow the loading of the full-size image).
  5. Move then place the image at the uppermost corner on the left-hand side (it should "snap back").
  6. Right-click on the image and click "Properties".
  7. Note the highest value of the vertical and/or horizontal positions and make both equal to the highest value.

    Example: If your horizontal position is "20" and your vertical position is "18", make both your horizontal and vertical positions as "20". This helps make the appearance of the image uniform when viewed.

  8. Note the width/height of the image and the value of the position (from step 7). You'll need this information later.
  9. Click "OK" then save your site.

OPTIONAL

There is something you can do to make the large image's window to close automatically when the image is either left or right-clicked. This will also close the window if the visitor clicks anywhere other than the small background border around the image. This would eliminate many windows opening and/or somebody clicking on another image and having it load in the same window, which would then be "behind" the main window and wouldn't be seen. An example of this is used on the sample thumbnail on this page. To test it, click on the thumb image to open the larger image. When open, click on the image. The window will close. Try it again but click on this page (off the new window) - the window will close again. To apply this option, follow these short procedures. These are in addition to both the above procedures and the following page in this tutorial.

  1. On the page with the big image, right-click the background, then click Properties.
  2. Click the "Inside body tag" button.
  3. Enter the following code in that window -

    onBlur="window.close()"

  4. Click "OK".

Apply all your images in this fashion - one image for each page, noting each image's size values. Once you're done with that, you're done with that!

Let's now go on to part two, Getting The Script!