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 7
Description:
This is based on Pop Up Window 1 & Pop Up Window 6, except that we will use a thumbnail as the image to click on, and then the full picture to appear in the pop up window!
How to use:
You will need both a thumbnail image and a full size image.  

1. Cutand paste the code provided below into a BYOWG

2. Edit the script to reflect the name of the thumbnail and full size images

3. Click on 'Files for this gem' and insert the thumbnail image you wish to use to be clicked on.  For this example, my thumb is named 'londonsmall.jpg', and the matching full size image is called 'londonbig.jpg' -- clever, huh?


Publish and enjoy!
Example:
  <-- click on the thumbnail in order to see the larger picture!
Download the code
right click on link, then click on 'Save target (or frame) as'
see bottom of the page for the source code!
Other information:
When you look at the script, it actually is very simple.

You have an "open" statement with several parameters including: the name of the page with information to display, several switches, then parameters that control how big or small the pop up window should be.

After that you have the <img> tag used to associate and display the image to be clicked on in order to have the window pop up.

Notice that I've added ^GEMDIR/ in front of the name of the image. That's to let Trellix/CSB know that the image was loaded into the BYOWG using the 'Files for this Gem' option.

Source code:

<A HREF="javascript:void(0)"
ONCLICK="open('^GEMDIR/londonbig.jpg', 'miniwin', 'toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=1, resizable=1, width=400, height=400')"><img src="^GEMDIR/londonsmall.jpg"></A>