Popup windows, Javascript and the longest piece of software development ever?

Let's talk about windows.

I don't mean the glass and plastic type that you look out of, nor the type that's made Bill G his millions of mega bucks, I mean the popup type that shows you more information on a website when you click on or hover over something.

In our holiday gite website we've taken a traditional approach used on many other websites of having thumbnail pictures which when you click on them they are replaced by a full size photo.

I feel it's much better for the user experience if you open the new bigger picture in a separate window which can be easily closed rather than opening the picture in the current window as then the website visitor has to click 'back' to get back to what they were looking at before they clicked the photo.

The simple approach to achieving this is with

<a href="pathname_to_large_picture" target="_blank">

which will open up a new window when the link is clicked ... but as I discovered back in 2008 when I tested the Gite website with the W3C website validation tool, this isn't valid HTML 4.01 as the target tag has been removed, so I ended up (after a lot of searching) with:

<a href="pathname_to_large_picture" onclick="target='_blank'; " >

Which did the job just fine.

And then sometime in mid 2008 I found a little bit of Javascript somewhere on the internet that improved on this:

function opwn(url,wd,ht)
{
var hw=(screen.availwidth - wd)/2, hh=(screen.availheight - ht)/2;
newwindow=window.open(url,'img','height='+ht+',width='+wd+', screenx='+hw+', screeny='+hh+',left='+hw+',top='+hh);
if (window.focus) {newwindow.focus()}
}

That when called from an onclick() event would calculate the screen size and using window.open() would create a new window of the right size as the image, would centre the window on the browser and would open the image in the popup window.

And all was good ... except that whilst it worked in Internet Explorer, it didn't work quite work as properly in Firefox; the popup window was correctly sized but it always opened up in the top left hand side of the screen. In the grand scheme of things I decided I could live with this irritation so implemented this opwn() function across all the pages of our website.

And there things stayed for a while until quite by chance I came across a website, I don't remember where it was, but it blew me away with popup windows that magically dimmed the background and faded into sight from the centre of the screen. There was animated graphics, next and previous buttons to view multiple images, and and and, ... and I was hooked!

Reading the HTML I discovered that the website had used a really neat Javascript package called lightbox written by Lokesh Dhakar and so I was pretty quickly downloading the javascript and CSS files and created a test version of our Gite website homepage with "lightbox powered" popup image windows.

But the more I played with lightbox the more I decided I wasn't happy with this popup solution. Lightbox visually looks great but all that bling comes at a price - bloat !

Lightbox relies on the underlying Scriptaculous Effects Library and the Prototype Framework so with Lightbox's own Javascript there is a total of 5 additional files to be loaded by the web-browser and a total of 186Kb to be downloaded, plus some CSS changes required as well to make it all work properly.

Google to the rescue though and I quickly turned up a number of alternatives to the Lightbox project, with varying attempts by other people to improve on the original design with slimmer Javascript, easier configurability, more options, etc.

I tried all the ones I could find at the time with test versions of our website homepage being created using litebox, lytebox, lytebox_mod, slimbox, myslimbox and thickbox.

By now though the seeds of doom were set and my enthusiasm for using any of them had waned and I concluded that for reasons variable and multiple I didn't like any of the pre-canned lightboxes and its clones. Mainly I didn't like the additional file sizes that would have to be downloaded, but I also was having second thoughts about the bling. In the end I resolved that "I could do better" and I'd therefore write my own piece of image popup Javascript code - "it can't be all that hard" (ha!) and then I'd have something that perfectly fitted my needs and integrated easily to my website.

I'll pause the story here because the actual software development then took me over 2 years to complete ...