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 Number	Original Code	Replaced With
254	objPrevLink.setAttribute('href', '#');	objPrevLink.setAttribute('href', location.href + '#');
259	objNextLink.setAttribute('href', '#');	objNextLink.setAttribute('href', location.href + '#');
303	objBottomNavCloseLink.setAttribute('href', '#');	objBottomNavCloseLink.setAttribute('href', location.href + '#');
182	if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){	if (anchor.getAttribute('rev') && (relAttribute.toLowerCase().match('lightbox'))){
334	imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));	imageArray.push(new Array(imageLink.getAttribute('rev'), imageLink.getAttribute('title')));
341	if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){	if (anchor.getAttribute('rev') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
342	imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));	imageArray.push(new Array(anchor.getAttribute('rev'), anchor.getAttribute('title')));
346	while(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 Number	Original Code	Replaced 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. =)