JavaScript Popup Windows for Images

Home

Advanced JavaScript Popup Windows for Images

Background

The Howto Article on Popup Windows for Images has been one of the most popular and I get a lot of feedback. I often get requests for information on how to add various "bells and whistles" such as titles and background colours. I have however always resisted making the original article too complex and put people off who know little JavaScript I have instead added this "Advanced Popup Windows for Images" supplement which gives a number of ideas for the more experienced JavaScript user and also "cut and paste" code for the less experienced. It should be read in conjuction with the earlier article.

Approaches to adding titles, background colours etc to a popup window

There are many possible ways to make the additions including using the various Parameters associated with the Document Object. In practice this method gives problems with various Browsers as they implement the Document Object in different ways. This is especial true if the popup window has been opened with just the address of a graphic.

Another promising looking way is to open the popup with a HTML page providing the framework and using the Document Object to change the graphic to the one required and similarly set a new title by statements, which I do not intend to explain, such as:

popup_window.document.images[0].scr = "new_graphic.jpg" ;
popup_window.document.bgColor = "Black"
popup_window.document.title = "Title of Page"

Even this does not work well with earlier versions of Opera and one is forced to create a separate little page for each popup. This technique with separate pages is very flexible and used on one of my commercial sites where information surrounds each picture. It is however time consuming and involves many extra pages.

Chosen Solution - writing popup pages on-the-fly

Example 1 Adding a Title

It is however possible to reliably write a HTML page on-the-fly using JavaScript writeln() statements with parameters passed via the function call. The following code demonstrates the technique, adds a title parameter and sets the background colour to black. It also centers the graphic giving identical displays with all browsers. If the window is open it is brought into the foreground and cleared, if not a new window is opened. The HTML is then written on-the-fly by a series of writeln() statements. The technique has been tested in Microsoft Internet Explorer 4+, Netscape 4+ and Opera 7+. Note - Earlier versions of Opera do not fail but do not display windows opened by JavaScript the same as other windows (one example being is they are without a title) regardless of how the code is created. 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 me a quick Email.

Code to cut and paste for Advanced Popup with Title

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

// Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->
</script>

The code can be copied and pasted to replace the code on the current popup page but remember to add the additional title parameter to the call. If you copy by hand beware as it is impossible to tell 2x single quotes '' from a double quotes " in many proportion spaced character sets (fonts).

Example 2 - Specifying the popup size, title and background colour

If you only have a couple of different sizes such as vertical and horizontal pictures from a camera it is best to duplicate the simpler popup as the user can move them to different places and they will stay. This is impractical when some of the images are different sizes. This is the situation when, for example, one is adding a series of screen dumps to an article on configuring Windows.

The following code allows one to specify the size of the image with each call and also the title and background colour. We still reuse the popup window but if the size has changed we resize the window to match the graphic. It is only supported in JavaScript 1.2 onwards but being realistic all browsers of generation 4 onwards support JavaScript 1.2 or higher ie 99% or more these days. Note: the height and width parameters should be those of the image as they have the required padding added - note the difference in padding for a window which is resized or opened the first time. As there may not be sufficient space to display all the title the full title now appears if you hover over the popup picture.

I am steadily moving all my pages to use versions of the new code and I am also including a check on browser version and write a Caution into the page if it is version 3 or earlier. In my case I am using an include file (.js file) containing the popup code so I can make future changes which effect all pages in one place.

Code to cut and paste for a Demonstration page with Advanced Popup with Title, Image Size and Background Colour parameters

<HTML>
<HEAD>
<TITLE>Java Popup Window Example with size, title and background colour parameters</TITLE>
<script language="JavaScript1.2" type="text/javascript">
<!-- ;
var newwindow;
var wheight = 0, wwidth = 0;

function popitup5(url, title, iwidth, iheight, colour) {
var pwidth, pheight;

if ( !newwindow || newwindow.closed ) {
pwidth=iwidth+30;
pheight=iheight+30;
newwindow=window.open('','htmlname','width=' + pwidth +',height=' +pheight + ',resizable=1,top=50,left=10');
wheight=iheight;
wwidth=iwidth;
}

if (wheight!=iheight || wwidth!=iwidth ) {
pwidth=iwidth+30;
pheight=iheight+90;
newwindow.resizeTo(pwidth, pheight);
wheight=iheight;
wwidth=iwidth;
}

newwindow.document.clear();
newwindow.focus();
newwindow.document.writeln('<html> <head> <title>' + title + '<\/title> <\/head> <body bgcolor= \"' + colour + '\"> <center>');
newwindow.document.writeln('<img src=' + url + ' title=\"' + title + '\" alt=\"' + title + '\" >');
newwindow.document.writeln('<\/center> <\/body> <\/html>');
newwindow.document.close();
newwindow.focus();
}

// Routines to tidy up popup windows when page is left
// Call with an onUnload="tidy5()" in body tag

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

// Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->
</script>

</HEAD>

</BODY>
</HTML>

The code can be copied and pasted. If you copy by hand beware as it is impossible to tell 2x single quotes '' from a double quotes " in many proportion spaced character sets (fonts).

I am providing the same examples, from one of our travel pages, as on the main page, to try in all browsers. 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 the image window to a favoured place 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. Note now there is a coloured background, window title and the picture is centred in all browsers. 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.

Further developments

The basic code above for the five parameter popup popitup5() has formed the basis of all the popups on my web sites for a couple of years. The only significant developments have been in the way I use it. I now have the code in an include file (.js) at the top of every page which has images. The HTML has the following line in the head statement

The file has a script to write a standard browser check into the web page and a script to make it easier to create the calling routines by writing them using only three parameters if I am using my standard size images.

I have recently developed code which allows the user to specify from two possible sizes of popup depending on bandwidth of his internet connection and screen size. The size can be toggles by a function call either from a link or by double clicking on any of the images and uses a cookie to maintain the choice throughout the browser session . The write up of our Australian trip was the first example. Having all the code and 'scripts' to write the calling routines into the HTML pages makes it very easy to make changes if required - for example the new Firefox browser needes a title parameter as well as an alt parameter to allow text to be displayed when one hovers over an image and that change could be made for most of my pages by only a minor modification in the .js file. The downside of using 'java scripts' to write the complex calling routines into the HTML pages is that visitors who turn JavaScript off will not even see the small pictures (icons) on the pages.

Contents of my current include file epopup.js as of 20th May 2007

// Browser check function to write warnings into the web page when placed within a <script> tag

browser = navigator.appName;
version = navigator.appVersion;
function browser_caution() {

if (version.substring(0,1)<4) {
document.write('<font size="+1" color="#FF0000"><b>Caution:<\/b> You are running ' + browser + ' version ' + version.substring(0,3) +
' and many browsers lower than Version 4 do not support the JavaScript which provides the Popup images when you click on the thumbnails on this page.</font><p>')
}
if ( (navigator.userAgent.indexOf("MSIE") != -1) && (navigator.userAgent.indexOf("Mac") != -1) ) {document.write('<font size="+1" color="#FF0000"><b>Caution: Apple Users<\/b> - Please do not close Popup Windows containing the larger images you get by clicking on icons, they will be closed automatically when you leave this page. If you close them you may need to refresh the page.<\/font><p>')
}
}

// Routine for popup windows with title, size and background colour parameter (5 parameters)

var newwindow;
var wheight = 0, wwidth = 0;

function popitup5(url, title, iwidth, iheight, colour) {
var pwidth, pheight;
if ( navigator.userAgent.indexOf("Firefox") != -1) {tidy()}; // Close window if not IE

if ( !newwindow || newwindow.closed ) {
    pwidth=iwidth+30;
    pheight=iheight+30;
    newwindow=window.open('','htmlname','width=' + pwidth +',height=' +pheight + ',resizable=1,top=50,left=10,status=1 ');
    wheight=iheight;
    wwidth=iwidth;
}

if (wheight!=iheight || wwidth!=iwidth ) {
    pwidth=iwidth+30;
    pheight=iheight+90;
    if (version.substring(0,1)>3) {     // check browser v4+ supporting JavaScript 1.2
        newwindow.resizeTo(pwidth, pheight);
    }
    wheight=iheight;
    wwidth=iwidth;
}

newwindow.document.clear();
newwindow.focus();
newwindow.document.writeln('<html> <head> <title>' + title + ' <\/title> <\/head> <body bgcolor= \"' + colour + '\"> <center>');
newwindow.document.writeln('<img src=' + url + ' title=\"' + title + '\"   alt=\"' + title + '\" >');
newwindow.document.writeln('<\/center> <\/body> <\/html>');
newwindow.focus()
newwindow.document.close();
newwindow.focus();
}

//Routines used specifically for popup feedback form windows

var fbwindow
function fbpopitup(url) {
if ( navigator.userAgent.indexOf("Firefox") != -1) {tidy()}; // Close window if not IE
if (fbwindow && !fbwindow.closed)
    { fbwindow.location.href = url; fbwindow.focus(); }
else
    { fbwindow=window.open(url,'fhtmlname','width=520,height=420,resizable=1,scrollbars=1,top=50,left=10'); }
}

//Routines to tidy up popup windows when page is left

function tidy() {tidy5() }
function tidy5() {
tidyh();
fbtidy();
}

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

function fbtidy(){
if (fbwindow && !fbwindow.closed) {fbwindow.close(); } }

//routines to simulate functions used on older pages.

function popitup(url) { popitup5(url , 'Digital Image 384x288', 384, 288, 'white') }
function ppopitup(url) { popitup5(url , 'Photographic Image 400x267',400, 267, 'white') }

function vpopitup(url) { popitup5(url , 'Digital Image 288x384', 288,384, 'white') }
function pvpopitup(url) { popitup5(url , 'Photographic Image 267x400', 267, 400, 'white') }

//Routines for cookies used to remember if user has broadband

/* Call function as setCookie("cookiename" , cookievalue, lifetime, cookiepath)
with the lifetime required in days, -1 to delete a cookie or zero
for a temporary cookie. The Cookie Path is optional.*/

function setCookie(cookie_name, cookie_value, cookie_life, cookie_path) {
var today = new Date()
var expiry = new Date(today.getTime() + cookie_life * 24*60*60*1000)
if (cookie_value != null && cookie_value != ""){
    var cookie_string =cookie_name + "=" + escape(cookie_value)
    if(cookie_life){ cookie_string += "; expires=" + expiry.toGMTString()}
    if(cookie_path){ cookie_string += "; path=" + cookie_path}
    document.cookie = cookie_string
}
} // Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->

/* Call function as getCookie("cookiename") It returns the value of a cookie
if set or null. Beware of potential ambiguities in names of cookies -
getCookie is simple and will match the end of a string so xyname
will also be matched by yname and ame. */

function getCookie(name) {
var index = document.cookie.indexOf(name + "=")
if (index == -1) { return null}
index = document.cookie.indexOf("=", index) + 1
var end_string = document.cookie.indexOf(";", index)
if (end_string == -1) { end_string = document.cookie.length }
return unescape(document.cookie.substring(index, end_string))
}
// Based on JavaScript provided by Peter Curtis at www.pcurtis.com

// Function to toggle flag for broadband users

function toggle(){
        if (getCookie('broadband') != "true") {
            setCookie('broadband',"true",0,"/");
            }
        else {
            setCookie('broadband',"false",0,"/");
            }
        }

// Functions called for vertical and horizontal popups of two different sizes (image files end in i.jpg for icon, w.jpg for small image (400*300) and b.jpg for large images (600x450)

    function popitup2v(url,title) {
        if ( getCookie('broadband') == "true") {url=url+'b.jpg';popitup5(url , title, 450, 600, 'white') }
        else {url=url+'w.jpg'; popitup5( url , title, 300, 400, 'white') }    }

    function popitup2h(url,title) {
        if ( getCookie('broadband') == "true") {url=url+'b.jpg';popitup5(url , title, 600, 450, 'white') }
        else { url=url+'w.jpg'; popitup5( url, title, 400, 300, 'white')
         }}

/*
Functions to put in the HTML to provide simplified calls for vertical and horizontal popups with a doubleClick event handler calling toggle() so that large popups can be displayed if user has broadband that produce code as below when called

<IMG src= "imagei.jpg" alt="title" title="title" width = "160" height = "120" border = "0" align="left" hspace = 10 vspace = 10 onDblClick="toggle()" onClick="popitup2h('image' , 'title')" </IMG>

<IMG src= "imagei.jpg" alt="title" title="title" width = "120" height = "160" border = "0" align="left" hspace = 10 vspace = 10 onDblClick="toggle()" onClick="popitup2v('image' , 'title')" </IMG>

*/

    function hpop(image, title, alignment) {
        document.write('<IMG src= \"' +image + 'i.jpg\" alt=\"' + title + '\" title=\"' + title + '\"    width = 160 height = 120 border = 0 align=\"' + alignment + '\" hspace = 10 vspace = 10 onDblClick=\"toggle()\" onClick=\"popitup2h(\' '+ image+'\' ,\' ' + title+ ' \' )\" <\/IMG>') }

    function vpop(image, title, alignment) {
        document.write('<IMG src= \"' +image + 'i.jpg\" alt=\"' + title + '\" title=\"' + title + '\"     width = 120 height = 160 border = 0 align=\"' + alignment + '\" hspace = 10 vspace = 10 onDblClick=\"toggle()\" onClick=\"popitup2v(\''+ image+ '\' ,\' ' + title+ ' \' )\" <\/IMG>') }

//Last Updated 3rd December 2006