Search this site!

Return to the CSB Support home page
Pop Up 1   |   Pop Up 2   |   Pop Up 3   |   Pop Up 4   |   Pop Up 5   |   Pop Up 6   |   Pop Up 7   |   Pop Up 8
Pop Up 8
Description:
This is not actually a pop up window solution, but rather a thumbnail / full image solution.  It is based on a Javascript that I found at the Javascript Internet web site, and allows you to switch between the thumbnail and full version simply by clicking / double clicking on the photo.
How to use:
You will need just your full size image.  

1. Identify the height & width of your image, and determine how bug you want your thumbnail to appear.

2. Cutand paste the code provided below into a BYOWG (Trellix Web) or Insert > HTML Code (CuteSITE Builder)

3. Edit the script to reflect the name of the image, and the respective size for displaying the thumb and the full picture.

4. Click on 'Files for this gem' and insert the image you wish to use to be clicked on.  For this example, my image photo is called 'londonbig.jpg' .

5. Publish and enjoy!
Example:

Click thumbnail to enlarge
Double click to shrink

  

Download the code
right click on link, then click on 'Save target (or frame) as'
Other information:

Source code was originally posted at:
http://javascript.internet.com/miscellaneous/thumbnail.html


<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Robert Simpson (bob@maryjanebrown.net) -->
<!-- Web Site:  http://www.maryjanebrown.net/webmaster/ -->

<div align="center"><h3>Click thumbnail to enlarge<br>Double click to shrink</h3></div>
<div align="center">
<img src="^GEMDIR/londonbig.jpg" width="120" height="46" name="myImage"
onclick="javascript:myImage.height=228;myImage.width=338"
ondblclick="javascript:myImage.width=120;myImage.height=46">