JavaScript Popup Windows for Images

Home

Readers of my Howto Technical Articles and my support pages for Small Firms will know that I try to avoid Java and Javascript as much as possible on web pages as the various browsers tend to be incompatible in their interpretation and some older browsers do not support it at all. Some users deliberately turn Java and Javascript off for security or to reduce intrusive adverts. Furthermore it reduces the chances of some Search Engines indexing the pages correctly, if at all. I do however use it on many 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.

I consider this is a valid use as it is difficult to do neatly and professionally without JavaScript. Without Java 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. I want to be able to have a number of thumbnails 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 Kis (Keep It Simple). I have however covered some useful enhancements on a supplimentary page 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 in use on many of my new pages but even so the old simple routines here are perhaps the best place to start - they still retain an elegance difficult to beat and have been in use for many years on dozens, possibly hundreds, of my pages.

Now for an example, 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 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). Tidy 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 language="JavaScript" type="text/javascript">
<!-- ;
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>
</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().

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 Netscape Navigator, Internet Explorer, Firefox 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 Version 2 and 3 Browsers or other platforms, in particular Apples, it would be appreciated if you could send an email by clicking on tour 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 the Browser version and 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 7 which should show up for everyone! Click for more details of your Browser If you can turn off JavaScript your should see another message.

The HTML and JavaScript which produces this follows:

You are welcome to cut and paste 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.