Popup window

A Karelia Community Forum member asked the following:

When one of my larger (historic) images is being displayed I would like to have a line of text underneath the image saying something like: 'please click here to see a modern photograph of the same scene'.

When this line is clicked I would like the (modern) picture to display roughly over the position of the historic one. I would like this modern image to be movable by using the cursor and closable by clicking a "x" leaving just the historic image.

Something along these lines can be achieved with plain HTML, opening a new window and showing the new image in there, but it would be cumbersome for the user. A better solution seemed to be that offered by a piece of Javascript to allow a smaller window to be "popped up" and, if necessary, reused.

Here's an example:

gardenold

This is how the trellis looked in June 2010


How is it done?

Well, surprisingly easily, thanks to the Code Injection features of Sandvox.

Firstly, there's the Javascript, which should preferably be available to the whole site, so, with our Sandvox site open in Sandvox, we use the menu item Edit>Site Code Injection… In the resulting window, we select the Head Area tab and place the insertion point in the lower text area. There are plenty of popup Javascripts available on the Web, but I chose the one here  and modified it just a little to make things easier for everyone. The code is as follows:

<script type="text/javascript">
// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

// Original script amended by David Neale to automatically resize window

var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Image Window"  //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

// Window space adjustments by David Neale
// Will hopefully centre image horizontally and provide sufficient space for caption below image

popwidth += 25;
popheight += 55;

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}

}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)

else{

//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)

jkpopwin.resizeTo(popwidth, popheight+30)
}

jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>


Don't worry if it looks daunting. All you need to do is to copy and paste it!

Once pasted, you can close the Site Code Injection Window.

Now that the Javascript is installed, we need to add a bit of Raw HTML in order to activate it.

The HTML that I have used above also displays the "Show recent photo" button and looks like this:

<a href="#" onClick="jkpopimage('../../pics/gardennew.jpg', 640, 480, 'After two years.'); return false"><img src="../../pics/see_recent.jpg"></a>

There are a few things to note here, as they will need to be changed:

a. the pathname ../../pics/gardennew.jpg points to the image to be displayed in the popup window; I have used a relative pathname, but it can be an absolute pathname if you prefer (i.e. beginning with http://);

b. the 640, 480 refer to the size of the image pointed to (width and height); there is no need to add pixels for borders, as the Javascript takes care of that;

c. the 'After two years' is the caption that will appear below the image in the popup window;

d. <img src="../../pics/see_recent.jpg">  is a pointer to the graphic used to produce the "See recent photo" button. Feel free to copy this button if you wish (you will need to change the pointer, of course), or you can substitute any other graphic, again changing the pointer. If you want a simple text link, no problem: just change the whole thing to a piece of text between quotes, such as "Click here to see more recent image." 

And that's just about it. If you are unsure about using paths and pathnames, take a look here.

Any questions? Use the contact form.

© David Neale 2011