Example Thumbnail images

A common approach to the displaying of full sized images as a result of clicking on a thumbnail image is to attempt to open a new browser window, possibly with restricted chrome and often sized to suit the dimensions of the image in question.

Unfortunately, scripts that attempt these actions suffer from having to cope with several significant factors that will impact of their reliability. Above all else, the biggest drawback in attempting to open a new window with javascript is the existence of pop-up blocking software (along with pop-up blocking abilities built in to some browsers). To date no viable strategy has been proposed/invented that will allow a script to detect pop-up blocking software or determine whether a call to the window.open function was successful.

So, given a desire to reliably show an enlarged image as the result of clicking on a thumbnail (or any other link) but preferably without navigation away form the current page, another approach is needed if reliability (combined with controlled clean degradation) is to be achieved. One possibility would be displaying the enlarged images within an "in window pop-up". Essentially an initially hidden positioned DIV element containing an IMG element, which is sized, set to show the desired image and then made visible within the current web page. The above thumbnail images interact with a script that represents a simple demonstration of the principle (The images used vary in size in order to display the level of flexibility that can be achieved by this script).

This version uses a positioning algorithm that attempts to leave the original page accessible while the larger image is being displayed by allowing it to scroll behind the in-window pop-up if that is necessary. Re-positioning the larger image at either the top or bottom of the viewport depending on whether the page was last scrolled to the top or bottom of the page.