Feedback

HTML Tools & Tips

·

Creating Thumbnail Popups


Here's how to make a Thumbnail Pop-Up like the one below:

What is your web site address?

For example, www.MyCoolSite.com or www.MyCoolSite.homestead.com

Choose a script name:

Note: You can use any alphanumeric characters to name your script, but the name must begin with a letter and can only be one word (no spaces or special characters). If you have more than one script on your page, each one must have it's own, unique name.

Thumbnail image's name:

Examples: SmallFlower.gif, mypic_thumb.jpg, etc.

The smaller of the two images is called the 'thumbnail' image. It's a smaller version of the large image and is the one you want to have appearing on your page, like the one below.

When it's clicked, a Pop-Up window will appear with a different image in it.

Pop-Up image's name:

Examples: BigFlower.gif, mypic_full.jpg etc.

This is the name of the image file you'd like to appear in your Pop-Up window. Typically, it's the larger image of the two, like the one below.

Pop-up image's Width:

Pop-up image's Height:

How to determine the dimensions of your image:

  1. Import your Pop-Up image into your site using the "Imported Image" Element;
  2. Edit the "Imported Image" Element by clicking the "Edit" button (or by double-clicking the Element itself);
  3. Look at the Elements properites. You'll see at the bottom of the Element Editor two fields. One says "Height" and one says "Width". These are the Height and Width of your image.

To Get The Code:

Once you've entered all of the information in the fields above, click the 'Generate Code' button below, and you should see your code appear in the box at the bottom of this page.

To get the code, first highlight all of it by clicking the button below:

Now that it's highlighted, CUT (keyboard shortcut: "CTRL+X") and PASTE (keyboard shortcut: "CTRL+V") the code into an "Insert HTML" Element on your page.

One IMPORTANT NOTE: Make sure that the dimensions of your "Insert HTML" Element match the dimensions of your Thumbnail image. This will ensure that your thumbnail won't be distorted on your page.

Your Code: