sim.plified.com

Implementation: I am supporting some legacy Classic ASP code and need to implement a simple Ajax based photo gallery that sucked in photos from flickr through JavaScript, placed them in the DOM and then attach a lightbox viewer to the photos. In doing so I played with several lightboxes and thought I would share some of the pitfalls and successes.

Trial 1 – YUI & Photo Viewer.

My first attempt was with Photo Viewer a lightbox that utilizes YUI. One of the frustrations I have with YUI is the need to include so many files. I know there are advantages to this (you can only take in what you need), but it also tends to make things a bit more confusing. The installation instructions call for 4 styles sheets and 6 javascript includes.

The problem I ran into with Photo Viewer is that I was having difficult instantiating the viewer when I was populating the DOM after page load. I am using Ajax to import the pictures into the DOM on page load, therefore I needed the Photo Viewer to wait until after the pictures were loaded and then attach itself to the photos in the DOM. No such luck. I tried calling the script onSuccess, to no avail.

I even tried to use the XML feature to call a dynamically generated XML file on the server. But I had no success with this option either.

This script worked fine if my photos were in the DOM at page load, but because I needed populate the DOM after page load I ran out of patience with this script and tried to move on.

Followup: The creator of the script later wrote me saying:

To get PhotoViewer working on images loaded after the dom initially loads is simple. After you are done loading your images via AJAX, have your call back re-init the controller EX: YAHOO.photoViewer.controller.init()

Trial 2 – Lightbox2 (Prototype & Scriptaculous)

My second attempt was to use Lightbox2 currently posted on the Dynamic Drive web site. This script utilizes prototype and scriptaculous to give it its dynamic features.

This Script was a bit easier to install, not so many files to include. After a bit of tweaking I was able to get the Script to initialize AFTER I populated the DOM. Basically I had to comment out the scripts automatic initialization and include my own initialization in the "onComplete" callback.

The hang up here was IE7. I was getting some strange renderings of the background in IE7. I did a bit of searching to see if anyone was having a similar effect, finding little substance by way of solutions, I decided to move on.

Trial 3 – Thickbox & jQuery

The more I learn about jQuery, the more I like it. With thickbox I finally met with success, but not without some modifications.

Mod 1: I had to do the same thing I did with LIghtbox2. I had to comment out the scripts own instantiation call and instantiate after the "onComplete".

Mod 2: Because my site was not already using a CSS reset, I had to remove the CSS reset line from thickbox.css:

/**{padding: 0; margin: 0;}*/

Mod 3: IE7 Strikes again! I was having trouble with IE7 again, this time the box was not centering properly in the browser. Thankfully I located a fix for the script here. You have to replace the tb_position() function with the following:

function tb_position() {
jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH /2), 10)

 + 'px', width: TB_WIDTH + 'px'});
var browser = navigator.userAgent.toLowerCase();
var IEVersion;
var brVerId = browser.indexOf('msie');
if (brVerId > 0) {
IEVersion = browser.substr( brVerId + 5 ,1);
}
if (! (IEVersion && IEVersion == '6')) {
jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}

The final implementation has yet to be published, but you can watch for it here: http://www.roberts.edu/athletics/