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 aslightBox. 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.
Quick and painless – thanks!
I tried this hack but am unable to get it to work. Is there a way somebody could lend me a hand?
Best regards!
What is your URL? Make sure your image links have the
rel="lightbox[imageset]"attributes. The syntax for how the Prototype-based Lightbox works is explained here. All my modification does is make sure the jQuery Lightbox groups images by their bracketed imageset names.The demo page is located at http://awi.idproductions.com/product_detail/satradio/satradio_satmoto_product_detail.php
My lightbox links look like this
<a class="lightbox" href="../../images/products/highlight_one/sirius_moto_antenna_kit.jpg" title="cats all over">Photo gallery<a>But ones with different [imageset] attributes are displaying together.
Thanks for your help! This is PERFECT!
You bet — although I don’t see any imagesets in your code, your lightbox seems to be working. If you eventually have multiple sets of images on that page, say for example you had 3 images of antennas and another set of images of cables and connectors, you would want to use the
lightbox[imageset]rel attribute and my hack to get jQuery Lightbox to see the sets.Nice looking site, btw!
Thanks! I tried to do the imageset but it isn’t working. I’m sure I’m just missing something though.
If you can go back to the page you’ll see an antenna about 1/2 of the way down. If you click on it a larger copy of the image shows but not using lightbox. The code for that image is
<a href="../../images/products/highlight_one/sirius_moto_antenna_lg.jpg" rel="lightbox[dog]" title="New found glory">So I’m assuming that is wrong.
If you click on the “photo gallery” link the lightbox does work and the code for it is as follows
<a class="lightbox" href="../../images/products/highlight_one/sirius_moto_antenna_kit.jpg" title="cats all over">So it looks like the lightbox works when using the class attribute and not the rel attribute.
Again, I really appreciate you taking the time to look into this for me.
I’m sure I just did something wrong.
Jeff
Your code is fine (sorry, WordPress sanitizes URLs, so you gotta use < and >).
I see now. Your page header is still loading the original jquery.lightbox-0.5.pack.js.
You need to edit a version of lightbox (not the .pack version, unless you know about unpacking) with the code changes above. Until then, the imageset brackets prevent jQuery from matching your rel attributes.
OK. I just uploaded an edited version of lightbox and changed the header to load it accordingly. The image of the antenna is coded properly (I think) but it still doesn’t work and I get a error message that refers me to line 28 character 4 which is this line
$('a[rel^=lightbox]').lightBox();Maybe it wasn’t meant to be for me … lol
I think you’re short one closing
}. You just over-pasted.You still need one more
}to close the if/else that my patch is in. There should be three}}}‘s between the last semi-colon and the statementwhile ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {That took care of the error – thanks!
I still can’t get the lightbox to operate though.
Is this the proper coding technique for it
<a href="../../images/products/highlight_one/sirius_moto_antenna_lg.jpg" rel="lightbox[dog]" title="New found glory">sure is. and that URL will work fine. but now you’re calling lightbox twice in your header:
$('a.lightbox').lightBox({fixedNavigation:true});
$('a[rel^=lightbox]').lightBox();
The first one is invoking lightBox on everything with the *class* ‘lightbox’, and it is called first. That’s why only your “Photo Gallery” URL is behaving as expected.
The second line is the only one you want, so delete the a.lightbox line, add the fixedNavigation:true param to the rel^=lightbox line, and make sure all your images have the rel attributes set.
Thanks for taking another look at it for me. Apparently I must have the darkest of storm clouds swarming above me because I still can’t get it to work.
If you get a spare moment and could look at the code again I would certainly appreciate it.
<http://awi.idproductions.com/product_detail/satradio/satradio_satmoto_product_detail.php>Thanks again!
Jeff
Your jQuery looks like it’s out-of-date. You are using 1.1.3.1, it looks like 1.2 is the minimum required — although that’s not mentioned on the plugin site anywhere that I can find.
The newest jQuery is 1.3.1. I also got a local version of your page working fine by just swapping in 1.2.6 (which I’m still using) and 1.2.1 (which the jQuery Lightbox Plugin site uses).
Thanks! That took care of it!
I do have one follow-up question though. Is it possilbe to include images in the set but not have them displayed initially as a thumbnail?
For instance, I’d like to have a “more images” text link that launches the plug in and shows a series of images.
Thanks again for all of your help!
I really appreciate it.
Jeff
Sure is — make your “more images” link to the first image in your set, then just below your “more images” link, enclose a list of images in a hidden
<div>tag, such as:<div style="display:none;">
<a href="/images/image2.jpg" rel="lightbox[puppies]" title="Title"></a>
<a href="/images/image3.jpg" rel="lightbox[puppies]" title="Another Title"></a>
</div>
Instead of the inline style, you would probably want to define a class in your stylesheet that does the same thing, so you could do something more tidy like
<div class="hide_this">.jQuery goes thru and gathers the imageset from your code, even tho the style tells the browser to not display them. I do this on my homepage with the Frankie photos.
And congrats on getting everything working!
Hey thanks, this was just what I was looking for.
This should really be a default feature in the script to begin with.
I just wanted to say thank you for the code modification you made because it just saved hours for me to go through the entire (non-existing) documentation of the plugin to solve the multiple image sets problem.
Btw, despite the apparent advantage of the newer jQuery Lightbox plugin being newer it unfortunately lacks the ability to properly adjust its background shade to different browsers :( So I am staying with this one :)
Thanks again.
Glad it helped!
great just what i needed,so simple and works!
cheers
Thanks for posting this – your solution make the multiple galleries a breeze. On another note, I only wanted to show the first image thumbnail for a gallery and then have the rest show up when you launch the lightbox, here’s what I did in case others are looking to do the same…set up the gallery as described above, but only with the first thumbnail. Then, “hide” the remaining links to the images in the set.
One option is to make a class style for this, so in the CSS:
.hide {
display:none;
}
in the page:
class=”hide”, which can be added to the tag.
or you can just use img in the page, whichever you prefer.
You can keep the hidden images calls in line in the HTML page with the initial thumbnail or put them all at the bottom of your page to keep your code clean. I prefer keeping them together to make them easier to find months later. (Or to make it easier for someone else looking at the code).
Thanks again for making your modified code available – you’re the best!
Whoops, shouldn’t have written this in html, code for inline hide is:
(div style:visibility=”hidden”) img (/div)
Thank you so much for sharing!! It’s been a great help!
THANKS!
The only drawback are images with rel=’lightbox’ – with no brackets – the CMS I work with outputs rel=’lightbox’ for standalone images and rel=’lightbox[random] for groups – the bracket is now recognised – but the simple rel=’lightbox’ get bunched together as a group – has to be a way to modify this, otherwise another hack to my CMS – any ideas – btw thanks for this – it should be included in the release – as others have mentioned.
Just wanted to add this code – which allows images which have the 8 character rel=”lightbox” attribute NOT to be grouped – the CMS I work with makes this distinction. This way rel=”lightbox[foo]” links are grouped automatically and rel=”lightbox” are treated as individual instances:
for ( var i = 0; i 8)) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’)));
}
}
THANKS AGAIN
sorry – that code got mashed
- anyway inside the loop do a query on the length of the string and if it is > 8 then run settings.imageArray.push (line 82)
Worked for me. I had been trying to get Lightbox 2 working but had trouble with conflicting libraries. This works a treat.
Works like a charm! I’am very thankful for this tweek!
Brent,
Thanks for this wonderful tutorial. I am using jquery.lightbox-0.5.js to show lightbox can you help me in adding one more control, i.e. rotate functionality to the existing js plugin ? I would appreciate your assistance.
Sorry – I’m not going to be much help there. I only got as far into the Lightbox code to tweak the jQuery selector — rotating images looks to be a lot more involved because I don’t think jQuery has a built-in rotate method. You’ll need to add a call to another jQuery plugin to do the rotate.
I did a quick Google search for “jQuery rotate image” and came up with these possibilities:
jqueryrotate – jQuery plugin that rotate images (and animate them) by any angle – Google Project Hosting
jquery-rotate – jQuery extension for image rotation – Google Project Hosting
jQueryRotate | jQuery Plugins
Hope that helps!
This was exactly what I needed. Simple, and works without any hacking about!
Thanks.