Image popups for the 21st century

Over the weekend I’ve been working on image popups. Hardly the most difficult topic to spend a weekend on, you might think, but then I never was content with simply popping up a new window; that would just be far too easy…

Man in Blue has a very clever site going on, rewriting the page dynamically with javascript to change the display without reloading it. I was particularly taken with his image popup scripts, so I half-inched them and spent a while rewriting and adding CSS hacks so that they would work on a scrolling page.

Here’s the result. In theory, you should be able to click on an image, it’ll fade out the rest of the screen (well, overlay a transparent black PNG over it, anyway), and the popup will be displayed in full glorious technicolour on top of that. To get rid of hit, hit the ‘close’ link or the image itself.

In practice…it actually seems to be working pretty well. No transparency in IE5 – you just get a solid black blackground. Netscape degrades gracefully, which is about as good as can be hoped. And the IE:Mac layout is a bit broken. But apart from that, it works beautifully in all the browsers I’ve tried – Safari, Firefox, Opera, IE6, Omniweb – and I hear that Konqueror and Mozilla are fine with it, too.

Go take a look and let me know what you think. If you spot problems, please leave a comment here and I’ll see what I can do about them. I’m especially interested in IE6 compatibility : it seems to be working perfectly for everyone except 1 user…

· 2004-10-19 ·

  1. Very nice, and it works for me in IE 6 SP2.

    Very nice site in general, you have ;) — Alex    Nov 8, 09:28 AM    #
  2. I’ve been searching everywhere for this kind of a popup. Works fabulous on firefox, but if only the whole world wasn’t in love with IE. The only IE problem I can find is the z-index of Flash and form controls is always above the image popup. Apart from that it’s gold — jamie    Jul 17, 03:06 AM    #

Commenting is closed for this article.