Image Popup

Click a thumbnail or other image and a larger image pops up. It works on desktop, laptop, tablet, and mobile phone.

An example is on the left.

The Features

An image is published when the page first loads. We'll call that a "thumbnail" although it optionally may be an image larger than is generally thought of as a thumbnail.

When the thumbnail image is clicked or tapped, either a larger version of the same image or a different image pops up, centered on the page. If the screen or browser window is smaller than the width or height of the image, the image is shrunk to fit.

Clicking or tapping anywhere on the page makes the popup image disappear.

There may be multiple thumbnails on the page that spawn popup images.

How it is Implemented

The JavaScript provided with this article needs to be in the page or imported from an external JavaScript file. When that's done, the popup image can be placed.

Two things are coded on the page, the popup and the thumbnail.

The popup is a div containing other divs and the large image. All have specific CSS properties. Optionally, an "X" icon can be published over the larger image to indicate the popup can be closed. (With or without the "X", clicking or tapping anywhere on the page closes the popup.)

The thumbnail is an img tag in a div. The img and div tags have specific CSS properties. The div tag has an onclick attribute. Optionally, an image of a magnifying glass or other icon indicating that a larger image is available can be published over the thumbnail.

Doing the Implementation

The JavaScript needs to be available on the page and the HTML and CSS for both the popup and thumbnail need to be coded.

~ The JavaScript

Here is the JavaScript. No customization required.

<script type="text/javascript">
/*
   Image Popup Handler
   Version 1.0
   May 23, 2016

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2016 Will Bontrager Software LLC

   This software is provided "AS IS," without any warranty of any kind, without even 
   any implied warranty such as merchantability or fitness for a particular purpose. 
   Use of this software is subject to the Website's Secret Software License Agreement.
   https://www.willmaster.com/software/WebSitesSecret/WS_LicenseAgreement.html
*/
function CloseImagePopup(divid) { document.getElementById(divid).style.display = "none"; }
function ShowImagePopup(dividname,imgdividname,imgidname,imgurl)
{
   var imgid = document.getElementById(imgidname);
   var divid = document.getElementById(dividname);
   var imgdivid = document.getElementById(imgdividname);
   imgid.src = imgurl;
   var vpheight = 0;
   if(document.documentElement && document.documentElement.clientHeight) { vpheight = document.documentElement.clientHeight; }
   else if(document.body) { vpheight = document.body.clientHeight; }
   else if(self.innerWidth) { vpheight = self.innerHeight; }
   if( ! vpheight ) { return; }
   var imgwidth = parseInt(imgid.naturalWidth);
   if( ! imgwidth ) { return; }
   var imgheight = parseInt(imgid.naturalHeight);
   imgdivid.style.maxWidth = imgwidth + "px";
   imgdivid.style.maxHeight = imgheight + "px";
   imgdivid.style.marginTop = parseInt((vpheight/2)-(imgheight/2)) + "px";
   divid.style.display = "block";
   var scrollHeight = imgdivid.scrollHeight;
   if( scrollHeight > vpheight )
   {
      scrollHeight = vpheight; 
      imgid.style.height = vpheight + "px";
      imgdivid.style.width = parseInt(vpheight*(imgwidth/imgheight)) + "px";
   }
   imgdivid.style.marginTop = parseInt((vpheight/2)-(scrollHeight/2)) + "px";
} // function ShowImagePopup()
</script>

Put the JavaScript either into the page with the popup or import it from an external file.

~ Coding the Popup

Instructions for the popup are provided first because its id values and image URL are referred to in the thumbnail instructions. Those id values and image URL are colored blue in the source code (comments follow):

<!-- Begin popup image code. -->
<div id="pop-up-div" style="display:none; z-index:96; position:fixed; top:0px; right:0px; bottom:0px; left:0px; background-color:transparent;" onclick="CloseImagePopup('pop-up-div')">

<!-- The div with the image. -->
<div id="pop-up-image-div" style="position:relative; display:block; z-index:97; max-width:100%; max-height:100%; margin:0px auto 0px auto; box-shadow:0px 0px 20px 1px #ccc; background-color:transparent;">

<!-- The image in the popup. -->
<img id="pop-up-image" src="https://www.willmaster.com/library/images/blackeyedsusan.png" style="z-index:98; border:none; outline:none; margin-top:0; max-width:100%; max-height:100%; width:auto; height:auto;">

<!-- Optional "close popup" icon -->
<img src="//www.willmaster.com/images/closeboxXbold25.png" style="position:absolute; top:0; right:0; z-index:99; cursor:pointer;" onclick="CloseImagePopup('pop-up-div')">

</div><!-- id="pop-up-image-div" -->

</div><!-- id="pop-up-div" -->
<!-- End of popup image code. -->

The above code contains two divs, an image, and an optional image. Each is addressed individually.

A note about the id values: If you'll be implementing more than one thumbnail/popup set per page, then each additional set's id values need to be different. Otherwise, the JavaScript wouldn't know which popup to display or remove.

1. The div tag id="pop-up-div" —

   This div contains everything about the popup. The div extends over the top of the entire page, so clicking anywhere on the page will close the popup.

   The background color is transparent. It may be given a colored background, perhaps with reduced opacity for a somewhat transparent appearance.

   The div contains an onclick attribute that calls the JavaScript CloseImagePopup function. The function's parameter is the id value of this container div, onclick="CloseImagePopup('pop-up-div')"

2. The div tag id="pop-up-image-div" —

   This div contains the img tag for the large image to be popped up. It's height and width, and it's centering on the page, are controlled by the JavaScript when the thumbnail is clicked.

   The CSS specifies a shadow, which may be changed or removed. Other CSS declarations may be added.

3. The img tag id="pop-up-image" —

   This img tag specifies the src URL of the large image to be popped up. The image may be the same one the thumbnail is from or it may be a different image.

   The src URL of the image to be popped up is specified here so it will preload. If preloading is undesired, this particular src value may be left blank — although that may prevent the popup image from displaying with the first click or tap.

4. The optional "close popup" icon —

   If a "close popup" icon is implemented, it will need the same onclick attribute as the container div, onclick="CloseImagePopup('pop-up-div')"

Although the popup code may be placed anywhere in the body area of the web page source code, keeping it with the thumbnail code may make future maintenance easier.

~ Coding the Thumbnail

Here's the code for publishing the clickable thumbnail.

<!-- Div for the image visible on page load. -->
<div style="position:relative; width:150px; cursor:pointer;" onclick="ShowImagePopup('pop-up-div','pop-up-image-div','pop-up-image','https://www.willmaster.com/library/images/blackeyedsusan.png')">

<!-- The image visible on page load. -->
<img src="//www.willmaster.com/library/images/blackeyedsusan.png" style="width:100%; height:auto;" alt="Image for example">

<!-- Optional magnifying glass div and image. -->
<div style="display:table; z-index:2; position:absolute; top:-0px; right:-0px; cursor:pointer;" onclick="ShowImagePopup('pop-up-div','pop-up-image-div','pop-up-image','https://www.willmaster.com/library/images/blackeyedsusan.png')">
<img src="//www.willmaster.com/library/images/magnifying_glass.png" style="height:50px; width:auto; border:none; outline:none;">
</div>

</div>
<!-- End of div for the image visible on page load. -->

The code for the thumbnail contains a div, an img tag, and an optional div for a magnifying-glass icon. Place it where the thumbnail shall be published.

1. Div for the image visible on page load —

   The div may be of whatever dimensions and have whatever CSS declarations that displays the image the way you want.

   It has one required onclick attribute to call the JavaScript ShowImagePopup function when the image is clicked. The function's parameters are the id values of the div and img tags in the popup container div and also the URL of the popup image — 4 values in all.

   1. pop-up-div — The id of the popup div containing everything about the popup.

   2. pop-up-image-div — The id of the div containing the image to be popped up.

   3. pop-up-image — The img tag id.

   4. https://www.willmaster.com/library/images/blackeyedsusan.png — The URL of the image for the src attribute of the popup img tag.

   The entire example onclick attribute and its values look like this.

   onclick="ShowImagePopup('pop-up-div','pop-up-image-div','pop-up-image','https://www.willmaster.com/library/images/blackeyedsusan.png')"
   

   If you're popping up an image from multiple thumbnails, the id values and image URL would change according to how its associated popup container div is coded.

2. The image visible on page load — The img tag of the image itself. This image URL may be the same or different than the image URL for the popup.

3. Optional magnifying glass div and image —

   If a magnifying glass or other icon indicating an available larger image is published, the id containing the img tag needs to have an onclick attribute identical to the "div for the image visible on page load" (specified in step 1 of this series of steps for coding the thumbnail).

You're Done Except for the Testing

Testing is simply (1) clicking on the thumbnail and verifying the popup image pops up as it's supposed to do and (2) clicking anywhere on the page to verify the popup disappears.

If you have more than one thumbnail with associated popups, try each one to verify the correct popup pops up. (If it doesn't work as expected, verify you have unique id values for each thumbnail/popup set.)

You now have a page with one or more thumbnails to click on and get a larger image in a popup.

(This article first appeared in Possibilities ezine.)

Will Bontrager