Whatstyle.net

By Harmen Janssen

• Home
• About
• Archive
• Résumé
• Portfolio
• Accessibility
• Contact

Image popups that fit

Posted on 23 August 2006 (02:19 PM)

Comments (3)

Don't rely on Javascript

Popup windows require Javascript. Javascript, being a client side scripting language and all, can be turned off by the user. Never rely on it.

Using bogus destinations in your links will get you nowhere:

1. <a href="#">click to open a window</a>
2. Download this code: /code/image_popups_that_fit1.txt

With Javascript turned off, nothing will happen and your audience will be confused and thus annoyed. Besides, Google won't spider your precious content, since it's not available in the href attribute. So instead, use something like this:

1. <a href="path/to/content/">click to see some content</a>
2. Download this code: /code/image_popups_that_fit2.txt

This way, users with Javascript turned off will still be able to view your content. These are basic fundamentals when it comes to Javascript popups, A List Apart features more information if things are still unclear.

Popping up images

We now have the basics all sorted out, let's focus on images. Regardless of popups being evil, they're still being used quite a lot by graphic artists, photographers et cetera in order to show their work in greater detail. As is especially the case with dynamic content, you might not know beforehand which dimensions to use when popping up images. The script below uses basic Javascript to calculate the image's dimensions before opening the new window. This will ascertain a perfect fit, as can be seen in this example.

All files can be downloaded as a RAR-archive.

Javascript calculations

I'm going to be very brief in my explanation and just explain the general structure of the code. The script is pretty basic anyway and is written as a plug-and-play solution to be used by even the biggest development dummy.

1. function initPopups ()
2. {
3. var W3CDOM = (document.getElementById && document.getElementsByTagName);
4. if (!W3CDOM) return;
5. var as = getElementsByClass ('popup',document,'a');
6. for (var i = 0; i < as.length; i++)
7. {
8. if (as[i].getElementsByTagName ('img').length > 0)
9. {
10. as[i].onclick = function ()
11. {
12. var imgsrc = this.href;
13. var img = new Image();
14. img.src = imgsrc;
15. img.onload = function ()
16. {
17. var dims = [img.width,img.height];
18. popImage(dims,imgsrc);
19. }
20. return false;
21. }
22. }
23. }
24. }
25. Download this code: /code/image_popups_that_fit3.txt

This function is used to initialise the script. It uses Dustin Diaz's getElementsByClass method to fetch all a-elements with a "popup" class. It then assigns an onclick event handler to all of them which creates a new Image-object, with a src attribute containing the link's href value.

Take special care in this bit of code:

1. img.onload = function ()
2. {
3. var dims = [img.width,img.height];
4. popImage(dims,imgsrc);
5. }
6. Download this code: /code/image_popups_that_fit4.txt

You can't fetch information about the image before it has completely loaded. Therefore, I assign an onload handler which triggers the next function:

1. function popImage (dims,imgsrc)
2. {
3. var width = dims[0];
4. var height = dims[1];
5. var win = window.open ('image.html?url='+imgsrc,'popwin','width='+width+',height='+height);
6. }
7. Download this code: /code/image_popups_that_fit5.txt

This function then pops up a window as big as the image so it fits nicely inside. image.HTML fetches the URL of the image from the GET-variable "URL" and creates an image element. In my example I added some extra functionality for closing the window by clicking on the image and displaying a message you can do so by mousing over the image.

1. window.onload = function ()
2. {
3. var img = document.createElement ('img');
4.  
5. var url = window.location.href.split('?');
6. var imgsrc = url[1].substring(4);
7.  
8. img.src = imgsrc;
9. img.alt = '';
10.  
11. var body = document.getElementsByTagName('body')[0];
12. body.appendChild(img);
13.  
14. var p = document.createElement ('p');
15. p.id = 'close';
16. p.appendChild(document.createTextNode ('Click to close window'));
17.  
18. body.appendChild(p);
19.  
20. img.style.cursor = 'pointer';
21. img.onmouseover = function ()
22. {
23. p.style.display = 'block';
24. }
25. img.onmouseout = function ()
26. {
27. p.style.display = 'none';
28. }
29. img.onclick = function ()
30. {
31. window.close ();
32. }
33. }
34. Download this code: /code/image_popups_that_fit6.txt

Some things to keep in mind

Note that in image.HTML I added some CSS rules to cancel out the default margin of the body element. I did this because the default margin would otherwise shove the image over the window borders, undoing everything we've achieved.

Also, the script is run within the onload event handler of the window object:

1. window.onload = initPopups;
2. Download this code: /code/image_popups_that_fit7.txt

When using multiple scripts on your pages, that are all initialised in the onload handler, remember that only one method can be assigned to an event handler at a time. You can solve this problem with the following code:

1. window.onload = generalInit;
2. function generalInit ()
3. {
4. initPopups();
5. someOtherFunction();
6. }
7. Download this code: /code/image_popups_that_fit8.txt

To work, then! Upload the files to your server, include the following markup in your pages...

1. <a class="popup" href="someBigImage.jpg"><img src="someSmallImage.jpg" alt="" /></a>
2. Download this code: /code/image_popups_that_fit9.txt

...and include popup.js in the head of your document...

1. <script type="text/javascript" src="popup.js"></script>
2. Download this code: /code/image_popups_that_fit10.txt

...but remember, kids: use 'em sparingly!

Back to top

Filed under HTML and CSS, Javascript

• ← previous article: School and the web
• → next article: Styling quotations

Leave a comment

Back to top

Preferences

• Layout:
  • High contrast
  • Regular
• Language / Taal:
  • English
• Text-size:
  • Increase text-size
  • Decrease text-size
  • Regular text-size

These settings will be saved for your convenience.