Home Uniquely NZ Travel Howto Pauline Small Firms Search
Web Site Design
JavaScript Popup Windows for Images

This Howto Article on Popup Windows for Images has been one of the most popular and I get a lot of feedback and has been the start of a series. This page has itself has now been updated to HTML5 to be consistent with the rest of the series but the code described is generally for HTML 4.01 Transient so uses HTML attributes for presentation rather than CSS (Cascading Style Sheets). I have added a few comments where changes would be required and the last article in the series which introduces an alternative to popups, namely lightbox overlays has the updates to the code.

Readers of my Howto Technical Articles will know that I try to restrict the use of Javascript as much as possible on web pages as early browsers (and even some modern ones) tend to be incompatible in their interpretation - when these pages were started some older browsers did not even support JjavaScript. Even now some users deliberately turn Java and Javascript off for security or to reduce intrusive adverts. Furthermore the use of JavaScript reduces the chances of some Search Engines indexing the pages correctly, if at all. I do however use it on all of my travel pages where I want to have lots of thumbnail images which can be clicked to give a larger image in a new window and also use popups for feedback - clicking our name at the bottom of the page opens a popup form for feedback - try it!

I consider these are valid uses as it is difficult to do either neatly and professionally without JavaScript. Without JavaScript one can only open the image in the same or a standard sized Window with no way of automatically closing, reloading or bringing it to the foreground. Returning to Images - I want to be able to have a number of thumbnails (icons) on a page which open in a single correctly sized Window when they were clicked and then remain in the background when one continued to browse down the page. If clicked again the window should return to the same place in the foreground or if another image is clicked it should replace the previous image and again return to the same place in the foreground.

Surprisingly I could not find any proper examples of this to copy. My searches provided plenty of examples of opening Windows once for images but none which worked correctly when reusing the Window for the same or a new image and brought it back to be in view so I was forced to write my own or to be more correct a series of such popup handlers of increasing complexity as my requirements increased and other people asked me for various enhancements.

The more extra bells and whistles you add the more you increase the risk of present and future incompatibility - remember Kiss (Keep It Simple Stupid). I have however covered some useful enhancements in Part 2 - Advanced JavaScript Popup Windows for Images which features more advanced techniques for Popup windows which will resize for different images, allow titles to be displayed and the background colour specified. These enhanced routines are what I use on my own pages but even so the old simple routines here are a good place to start - they still retain an elegance difficult to beat and were in use for many years on dozens, possibly hundreds, of my pages. There is a further option these days which is to use 'Lightbox Overlays. Popup windows do not work so well on the modern Smart Phones and Tablets with small screens and are based round a tabbed approach rather than implementing separate windows. This makes the approach very clumsy as every popup is opened in a new tab and the reloading and automatic closing does not work. The alternative is an approach with has tended to be called Lightbox which is a JavaScript technique used to display images and other web content using modal windows where the image is overlayed over the screen with the surround dimmed out. The overlayed window can be closed by clicking outside of it or by a close button usually a standard crosscross. Ideally the image should display full size when there is space available and shrink to fit the space available. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and such effects in general. The technique is now used very widely because of its simple yet elegant style and easy implementation and, most importantly it works well on small screens. The disadvantage is that it blocks use of the main window whilst a popup can just be moved aside but still be visible. I am currently using the original Lightbox but other implementations allow one to show video, web content etc in addition to just pictures and even run slide shows. I will cover the Using Lightbox to Display Web Images in a third part to this series

Now for an example, Decoration on the Sri Mariamman Temple Offerings in the Temple of Heavenly Bliss if you click on the images to left and right they will open in sequence in a correctly sized Window. Note how they come back to the foreground (in focus in the the jargon) when the thumbnails are clicked. If you drag or resize the image window it will return to view in the same place. If you close the image Window it causes no problems, however when it reopens it will revert to the original place and size. You will also find that the image window is closed when the page is left (unloaded in the jargon), few sites tidy up extra windows. The examples are from one of our early travel pages covering a visit to Singapore which has many such popup images. It should also be ideal on business sites to show additional details. If you hover over the image you will see text about the image.

The JavaScript code to do all this is deceptively simple. There are two functions which live in the Head, one called popitup to provide the "popup" Window and another called tidy to close the Window when leaving the page. The popitup function is called as often as required within the Body of the page and the tidy function by an onunload function in the Body Tag. Each time the popitup function is called it checks if the window exists and is open. If it exists the new image is loaded into the window and then the window is focused (brought to the front). If the Window does not exist it is opened with the image (automatically in the foreground). The Tidy() function also checks the window exists and is open before closing it.

The very simple example page below has all the JavaScript required for a single popup image window which will close when the page is left or closed which should work in almost every browser in use on PCs and iMacs where Java is in use. The ALT and TITLE attributes are both present as the latest browsers such as Firefox interpret the ALT attribute strictly and also need the TITLE attribute to display the text when you hover over an image whilst earlier browsers would show the ALT text if the TITLE attribute was not present.

<html>
<head>
<title>Java Popup Window Example</TITLE>
<script>

var newwindow = ''
function popitup(url) {
if (newwindow.location && !newwindow.closed) {
    newwindow.location.href = url;
    newwindow.focus(); }
else {
    newwindow=window.open(url,'htmlname','width=404,height=316,resizable=1');}
}

function tidy() {
if (newwindow.location && !newwindow.closed) {
   newwindow.close(); }
}

// Based on JavaScript provided by Peter Curtis at www.pcurtis.com

</script>

</head>
<body onUnload="tidy()" >
<a href="javascript:popitup('gallery/templew.jpg')"><img src="gallery/templei.jpg" alt="Decoration on the Sri Mariamman Temple" title="Decoration on the Sri Mariamman Temple" style="height:120;width:160;float:left;padding:10px;"></a>
</body>
</html>

It should not be too difficult to adapt to your requirements. The only compromise between browsers is the extra margin allowed round the image. The Window size I have used is about 20 pixels bigger in width and 28 pixels in height which gives a uniform margin when used with Internet Explorer which most people use, a slight asymmetry in Netscape Navigator and a convenient place for the download status bar in Opera 5. Many of my images come from a Digital Video Camera (768x576) and are reduced to half size 384x288 and are displayed in a 404x316 window. If different aspect ratios or landscape and portrait are required my favoured solution is to declare extra popitup() functions such as vpopitup() and hpopitup() as the Windows can then be dragged to different positions - remember to also close them both in tidy(). Note - the above meets the HTML 4.01 Transitional standard and needs some modification if used with HTML5 although it will work with all current browsers.

You will note that earlier I said the code would work in almost every Browser. Javascript is notorious for lack of transportability and many pages resort to determining the Browser and Version in use and branching to different code. The code above is deliberately very basic and should work on even early versions. It has been tested on many Version 4 and above Browsers including Internet Explorer, Firefox, Chrome, Safari and Opera on PCs running Windows and some iMacs. This probably covers 98% of users (who have not chosen to turn JavaScript off) and the remaining few will be used to worse problems than what this presents on most sites! Even so If anyone can report positive or negative results on early or other Browsers or other platforms, in particular Apples, it would be appreciated if you could send an email by clicking on our name at the bottom of the page.

On a commercial site you do not want to alienate even the few percent with early browsers or those that have turned off JavaScript so it is sensible to add some code which checks that JavaScript is turned on and the Browser version so one can warn and apologise if all the facilities will not be available. The following text in red is an example produced by some JavaScript which checks if the Browser version is less than 9 which should show up for everyone! Click for more details of your Browser If you can turn off JavaScript your should see another message. This check is much less useful now that some new browsers are appearing with low version numbers but good JavaScript support and I now use a function which contains some different tests - see Part 2, the Advanced JavaScript Popup Windows for Images page.

The HTML and JavaScript which did the tests above is:

<noscript>
<span style="color:ff0000;font-weight:bold;">It seems you either have an early version Browser or have JavaScript disabled. We regret that some features such as the ability to click on thumbnail images will not be available</span>.
</noscript>

<script>
browser = navigator.appName;
version = navigator.appVersion;
if (version.substring(0,1)<9) {
document.write('<span style="color:ff0000;font-weight:bold;"> You are running ' + browser + ' version ' + version.substring(0,3) + '. We are sorry that browsers lower than Version 9 may not support the JavaScript which provides the Popup images when you click on the thumbnails or give script errors.</span>') }
// Based on JavaScript provided by Peter Curtis at www.pcurtis.com
</script>

You are welcome to cut and paste any of the JavaScript above into your pages but please leave an acknowledgement so others can find the original source. You will obviously have to use your own images but otherwise I have checked that the visible text works when cut and pasted.

Now continue to Part 2 - Advanced JavaScript Popup Windows for Images where I will cover more advanced JavaScripts funtions and how to have the JavaScript in a file common to all pages which use it.

Link to W3C HTML5 Validator Copyright © Peter & Pauline Curtis
Navigation revised: 10th April, 2021