UPDATE (2/16/09): Another jQuery Lightbox plugin exists that supports imagesets by default. I am using the newer plugin now and recommend everyone do the same.
- Both releases were at version 0.5, so I thought they were the same. Looking closer at the changelogs, I found this new one by Warren Krewenki to be better maintained and supports imagesets without hacking.
- NOTE: My modification below only applies to the Leandro Vieira Pinho version.
- Be aware that Krewenki’s Lightbox function is called
lightbox, all lowercase. Pinho’s was camelcased as lightBox. In addition to pointing to the filenames of Krewenki’s new .js and .css files, your initializing function needs to be updated to all lowercase. Most settings don’t carryover either between the two jQuery plugs — although Krewenki’s match to the original Lightbox better — so verify those, too.
ORIGINAL POST:
I use the very popular Lightbox 2 script in places on this site, which is built upon the Javascript framework Prototype and script.aculo.us library. But, I also love the Javascript image gallery Galleria which requires jQuery. I don’t want to load both frameworks all the time, so I was happy to find a jQuery port of Lightbox called jQuery lightbox plugin.
The HTML syntax is almost identical between the two lightbox scripts, so I don’t have to recode any IMG tags. However, version 0.5 of the jQuery lightbox plugin does not recognize Lightbox 2 image sets (a group name between square brackets in the rel attribute).
By adding one IF statement to jquery.lightbox-0.5.js, jQuery lightbox plugin can gain this feature. The code below should replace lines 79-82.
jquery.lightbox-0.5-modified.js
79
80
81
82
83
84
| // Add an Array (as many as we have that match the objClicked 'rel' attr), with href and title atributes, inside the Array that storage the images references
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
}
} |
Line 81 in the above code is the key. The matching elements passed in the jQuery object get added to the image array only if their ‘rel’ attributes match the initial ‘rel’ attribute of objClicked.
Then, your initializing function should read like this:
your-image-page.html
$(function() {
// Select all links whose attribute rel starts with lightbox
$('a[rel^=lightbox]').lightBox();
});Note the caret character after ‘rel’, which matches all elements having the ‘rel’ attribute and values *beginning* with ‘lightbox’. Also, jQuery’s Selector API documentation says that the “@” before the attribute name has been deprecated as of v1.2. See more under the “Selectors > Attribute Filters” section of jQuery documentation.
Maybe there is a more elegant way to compare elements that doesn’t require matching the ‘rel’ attributes. But, to retain the same HTML syntax for those converting from the Prototype/script.aculo.us script to jQuery plugin, this hack will do nicely.
Frankie – 2 months
Frankie – 2 years
