Wednesday, October 24, 2007

Zoom 2.5.1 RC 4 Lightbox Popup Error in IE7

One of the best media gallery component for Joomla! is the Zoom Media Gallery. Their website is at http://www.zoomfactory.org/

One of my client website needs to implement a gallery function on the website and of course, I choose the best for my client - Zoom Gallery. The current version is 2.5.1 RC4 as of the time of this writing. Zoom has a great display animation using Lightbox Javascript and the best way for you to see it is to go here: http://www.theartofmusic.com.sg/component/option,com_zoom/Itemid,97/catid,2/

Nice animation? However, out of RC4 Zoom installation, that effect does not work well for IE6 and IE7. In fact, it does not work at all... =_(

Luckily, I am paid to make it work and hence here's the hack that will make it work:
File: /components/com_zoom/lib/js/lightbox.js
Line NumberOriginal CodeReplaced With
254objPrevLink.setAttribute('href', '#');objPrevLink.setAttribute('href', location.href + '#');
259objNextLink.setAttribute('href', '#');objNextLink.setAttribute('href', location.href + '#');
303objBottomNavCloseLink.setAttribute('href', '#');objBottomNavCloseLink.setAttribute('href', location.href + '#');
182 if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ if (anchor.getAttribute('rev') && (relAttribute.toLowerCase().match('lightbox'))){
334imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); imageArray.push(new Array(imageLink.getAttribute('rev'), imageLink.getAttribute('title')));
341if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){if (anchor.getAttribute('rev') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
342imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));imageArray.push(new Array(anchor.getAttribute('rev'), anchor.getAttribute('title')));
346while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}while(imageArray[imageNum][0] != imageLink.getAttribute('rev')) { imageNum++;}

File: /components/com_zoom/lib/template/template.gallery.php
Line NumberOriginal CodeReplaced With
395 $link .= " href=\"".$zoom->hotlinkImage
($zoom->_gallery->_id, '0', $ided, null)."\"";
$link .= " href=\"javascript: void(0);\"";
$link .= " rev=\"".$zoom->hotlinkImage
($zoom->_gallery->_id, '0', $ided, null)."\"";

Yup! That's about all the hacking. There are actually 2 cross-browser problems in the code that prevent the lightbox effect from working in IE7:
  1. <a href="#"> does not work well in IE. If your current URL is at http://www.yourwebsite.com/somedirectory/somemoredirectory/page.html and when you click on the link above, it will cause you to go to http://www.youwebsite.com/# even though BY RIGHT it should be http://www.yourwebsite.com/somedirectory/somemoredirectory/page.html#. Hence, we have to change all href="#" in the <a> tag to href="javascript: void(0);" or href="{current URL}#", the latter {current URL} being created dynamically by Javascript.
  2. Image's link is done by <a> with its href set to the image's src. What this means is that the image is linked to its exact file location on the web. This <a> link is used to trigger the lightbox effect. The <a> is actually something like this: <a href="{image file url}" onclick="{trigger lightbox effect}">.

    This causes problem in IE because for some unknown reasons, when you click on the link, IE will immediately go to the link's location, bypassing in the onclick event and hence, did not launch the lightbox effect. What you see is being directed to another web page.

    Therefore, we have to change all the href="javascript: void(0);" and set another attribute (in this case, I used the rev attribute) for the lightbox script to use for referencing the image URL.

Anyway, I hope the great guys at Zoom will be able to stablise the code at Zoom more. I have a couple of gitches too in the component. However, all in all, this is definitely a WONDERFUL gallery component and I really appreciate the efforts that all the current and past developers have put in.

Anyone reading this post and is still not able to make the lightbox work in your website, I am sure you will email me but please add more details for the error. Don't like just "My lightbox still doesn't work even though I follow your instructions. Please help." and expect me to auto-magically guess where-the-hell-is-wrong-with-your-setup. Really appreciate. =)

5 comments:

Johan Rossouw said...

Hi there,

I have applied the hack as described, and yet I still cannot get the lightbox in Zoom to work, not can I get the header module working in IE. The header image loads fine in firefox on the zoom pages, yet the lightbox also doesn't work on firefox.

Any idea how to get this working?

Johan Rossouw said...

www.flycastaway.com is the domain where I have the issue with the Zoom and header module

Anonymous said...

Have the same problem,not working at all. starting to dislike zoom gallery

Anonymous said...

Hi Steven!
Hope you can shed some light on this… When using the lightbox JS within the ZMG (Joomla) the thumbnails in the galleries display the description for the pictures as a title, right on top of the thumbnail and linked together. I’d like to keep those descriptions but not as part of the thumbnail, what can I do? Thanks

Steven Yap said...

Hey,

I think you should post this in the zoom gallery forum instead of this site. =)