Anne van Kesteren

Accessible Image Popup

This morning and yesterday evening I went totally nuts on an "standard compliant" image popup script. And I must say, it's cool! Some of the advantages:

• Completely accessible.
• The size of the bigger image does not need to be defined anywhere.
• The popup resizes to the size of the bigger image of which the size is not defined.
• Probably more ;)

It works in Mozilla 1.5b, IE6 and Opera 7; other browsers aren't tested yet. Expect some updates on that soon.

The script uses PHP and JavaScript and off course some good old XHTML and CSS. The first three files:

image.php, this file should be in the root directory. You have to edit some variables in order to make it work. The CSS file and the JavaScript file should be in the right directory.

image.css. There is nothing to change in this file. It eliminates all the margins and padding, that could be there.

image.js. This file is the only file I'm not completely satisfied with. IE happens not to support window.innerWidth, which I need 'it to find a hack for, If anyone has a better solution, please reply (but first try, since I have looked at a lot of other solutions). The little function I'm not happy with:

function resizeInner(width,height){
 if(window.innerWidth){
	 window.innerWidth  = width;
   window.innerHeight = height;
 }else{
   width  += 5;
   height += 30;
   resizeTo(width,height);
 }
}

Two things left, one file (JavaScript) and an example how to get everything to work. And I can assure you: "Everything is completely backwards compatible":

function.js. This is your global function file (If you have one). In this example there is only one JavaScript function inside what is necessary to do the trick, but I you have more function and these function require a window.onload, the bottom should like this:

window.onload = function(){
 imagePopup();
 secondFunction();
 thirdFunction(); /* ... */
}

And finally, it's this easy to get everything working:

<a href="/images/img.png" title="First screenshot" rel="screenshot"><img src="/images/smallimg.png" alt="First screenshot" title="Click for an larger image" height="60" width="60" /></a>

Easy isn't it? If you have any suggestions, feel free to comment or to contact me.

Comments

1. One more advantage:

   • doesn't fail when JavaScript is disabled

   Some disadvantages as well:

   • on page load, the JavaScript code needs to iterate over all links on the page. Also, the code gets executed only when the page is fully loaded
   • resizing doesn't work when 'resizing existing windows' is disabled in the browser settings (like I have in Mozilla Firebird)

   Also, I'm wondering if it is allowed to 'invent' a 'screenshot' linktype for the rel attribute. In the HTML 4.01 documentation I found this:

   Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types. Please see the profile attribute of the head element for more details.

   (http://www.w3.org/TR/html40...) (couldn't find any useful info on this in the XHTML documentation)

   Posted by karma at 12:40AM

2. It is perfectly valid to specify your own link type's. They are right this should be specified in profile, but currently there doesnt exist any data on profile, so we have to do without it.

   If the resizing doesn't work, it's like you say, a user's choice. And we scould not override the user his choices I think.

   Thanks for the feedback.

   Posted by Anne at 12:49AM