jQuery: adding Slimbox lightbox effect to Galleria

Two excellent jQuery scripts which I rely on time and time again are the Galleria image gallery and Slimbox 2, a lightweight Lightbox clone which has recently switched to using the jQuery framework over MooTools (happy days!).

Both scripts allow you to add impressive functionality to websites with very little effort. While the built in behaviour of Galleria is often ideal, I had a requirement to integrate lightbox functionality into it recently. I would consider myself a jQuery newbie, so this may not be the most elegant approach, but it seems to do the job on my browsers at least.

Galleria allows you to show a list of thumbnails, along with a larger version of one thumbnail. Clicking a different thumbnail enlarges that image instead. I needed to extend this functionality to give 3 image sizes for some of the gallery images: Clicking a thumbnail would give you a “medium” version, and clicking the medium version would show a larger version again in a lightbox pop-up.

I achieved this as follows:

  1. Firstly, I made sure that I had included all the files needed by both Galleria and Slimbox in the head of my page. (The basic usage instructions on both script sites can fill you in on this.)
  2. I gave any images in the gallery that needed a large lightbox version a longdesc attribute, setting it to the URL of the large version. (Not ideal semantically I know, but this attribute does expect a URL, and in this case the detailed information about the image is just a bigger, more detailed image, so I can live with that.)
  3. Next, I made sure that the clickNext option in my Galleria call was set to false. The clickNext option makes each main gallery image click through to the next to provide an alternative gallery navigation to clicking each thumbnail. However, I need to have some of my main images linking to lightbox pop-ups instead, so I disable this behaviour:
    $('#mygallery').galleria({
    	history   : false,
    	clickNext : false
    });
    
  4. Here’s the key step. I used the onImage option in my Galleria call, to specify a function to add the lightbox behaviour:
    $('#mygallery').galleria({
    	history   : false,
    	clickNext : false,
           onImage: function(image,caption,thumb){ 
    		//#check if thumbnail indicates that a large version of this pic is available
    		var large = thumb.attr('longdesc');
    		if(large)
    		{
    			//#if so, link to it and show it in a lightbox
    			image.wrap('<a href="' + large + '"></a>');
    			image.parent('a').slimbox();
    		}
    	}
    });
    

    A sample onImage function is provided in the Galleria advanced demo, which gave me my function outline. The parameters give you access to the thumbnail image, the main image and the image caption, giving you great freedom to extend the functionality. Here, all I want to do is check whether the thumbnail of this main image has a longdesc specified. If so, that means it needs the lightbox effect. So, I wrap a link around the main image, linking to the large version. Finally, I make a call to the Slimbox API to add lightbox functionality to the link I just added. (Note that I first tried just putting rel=”lightbox” in the anchor tag, but this seemed to have no effect. The rel attribute may have some other purpose in the Galleria script which overrides this.)

A few short steps and you’re done. This is the kind of thing that I thought would be a nightmare. For so many years, JavaScript gave me the shudders, but jQuery makes light work of so much. I’m using it increasingly, but still only now and then, with renewed awe each time. Warning: jQuery has been known to cause giddiness and excessive drooling in web developers. 🙂

30 comments Write a comment

  1. Hi Janine, I’m trying to do the exact same thing but cannot figure it out! I’m a web designer not a developer! I’ve tried the method on your blog but it just breaks Galleria. Long shot i know, but is there any chance you have a HTML page with the markup in that you cold send to me please or direct me to? Or do you ahve any more tips/tutorials? I have spent the last two days trying to integrate Galleria and a lightbox and i am desperate now! It would be very much appreciated!

  2. Hi Zoheb,
    Thanks for dropping by. I’m sorry that following my method did not work for you – I based this post on a working example I did, so I’ll have to look over it when I get a chance in case a few typos crept in, or maybe it only works with the particular version of Galleria and Slimbox I used?
    I’ve sent you on a link to a working example and when I get a chance to review the code, I’ll put a basic test case up online somewhere.

  3. Hi, your solution worked great. However, if I want the thumbnails to immediately fire up lightbox (instead of showing the large image first then clicking that to show lightbox), how can this be accomplished?

    sincerely,
    – bakkelun

  4. Hi Bakkelun,
    I haven’t looked into that, so I’m not sure off the top of my head. Do you just want all your images opening in a lightbox? If so, you could just forget Galleria altogether and just use slimbox on its own. Or are you looking to do something more complex?

  5. hi thanks for replying.

    the idea is to use galleria’s way of “generating” thumbs, but with the slimbox functionality. I know there are several ways around with, let’s say a thumbnail generator + slimbox only, but it’s not what I’m after 🙂

    sincerely,
    – bakkelun

  6. I’d imagine you could use the onThumb option (rather than the onImage option I used) to add a function to get your slimbox effect from the thumbs.
    http://code.google.com/p/galleria/wiki/Options
    You may need to remove the default galleria thumbnail click behaviour, to remove the core large image functionality. If you download the uncompressed version of the Galleria script, it will be easier to see which bits to comment out.
    It would be nicer if there was just a slimbox gallery script that did what you needed out of the box though – it’s probably only a matter of time before someone clever makes it happen! 🙂

  7. Hi Janine! Like Zoheb, I’ve been trying to combine Galleria with Lightbox and have not been successful! I can get them to work alone beautifully, but when I combine the two the code just breaks and the lightbox is not functional! I am sure I am doing something wrong (and it’s probably something simple as well), but I just cannot figure it out! I’ve spent days trying to understand what it is I’m doing to wrong but my efforts have proven unsucessful! Do you have a working HTML page you could send me? I would love that!!! Or any advice or guidance you could send my way!

  8. Hi Raven,
    Sorry for delay in responding to your comment – I was away last week.
    I’ve emailed you a link to a working page, but will try and get a simpler example up online when I get a chance. It could be that different versions of the galleria and slimbox scripts don’t quite work out. The versions I got working successfully are: jquery-1.3.2.min.js, Slimbox v2.02 and galleria 1.0 beta. Note that I first had to alter the galleria file slightly to get it working with jQuery 1.3.2 as documented here: http://www.janinedalton.com/blog/archives/2009/jquery-galleria-overwriting-div-content-with-large-image/

  9. I wish i had googled this several hours and headaches ago! I have a huge gallery to get done, and this is exactly what i was looking for. I was pulling my hair out, thanks a bunch for this!

  10. Ahoy Kaela 🙂 No problem – hope it works out for you. Love the graphics etc on your own portfolio site by the way 🙂

  11. Aw thanks for the tweet Kaela 🙂 I must get a proper example of this up online, because a couple of other commenters have had trouble implementing it – if only there were more hours in a day!

  12. Hey there!

    I’ve been trying to accomplish integration of galleria and lightbox but no success. Fortunetely, I found your tutorial and way to integrate it with slimbox! I didn’t realize that it may be scripts conflict, thus slimbox sorted out my headaches! Cheers mate!

  13. This is perfect – really looking for this! – I am not a programmer – I think I get it – but I don’t know where to edit the jquery.galleria.js – lot’s of gibbly gook in there? I tried at the end but no results – thanks for the post!

  14. Hi Ted,
    Don’t worry, you don’t need to go anywhere near the galleria script itself.
    When using galleria, you need to have a short script in your web page (either in a separate script file or directly in the head of the page) which calls galleria and makes the magic happen. You put the code I mention inside this galleria call, to end up with something like the code in step 4 (which will itself be inside a standard jQuery document ready function of course).
    Hope this helps?
    Janine.

  15. Do you know how to make Prev/Next buttons in this configuration?
    I tried wrapping rel=”lightbox-cat” in above script but it seems that doesnt work 🙁 Help!

  16. Yea, I was really thinking about this wrong – thanks for the tip – got it working – perfecto – thanks much!

  17. THANKS so much.. You pointed me the right direction. I was trying to integrate galleria with thickbox or lightbox but could not get it working. The prob was I was trying to trigger them in separate calls and not right in the onImage function. Your instructions were spot on. BTW, it also works to trigger lightbox the same way, and you can call tb_init from thickbox w/i the onImage and that also works.

    The thing I wanted to add tho was navigation to the other images. It is a total pains since both thickbox and slimbox use the rel attribute to group images together and galleria hogs the rel attribute. Also, I did not want to add *box click functionality to the thumbs, I wanted them work like they are supposed to.

    I hacked at thickbox and finally got it to work, but was not feeling good about all the hacking. First, don’t bother trying to wrap the thumbs in anchor tags, it totally breaks galleria. Also, I had to hack at it so it only applied the click function to my one image but assembled my group from all the thumbs. So in onImage I wrap the main image in a tags and give it a special class, add a name attribute and value, and then call tb_init() on that selector. When coding my UL of thumbs, i added a name attribute to the img tag (I know, not valid, but I don’t care.. I could not access the longdesc in my thickbox hacking.) Then I had to hack thickbox to 1) look for the name attribute for the imageGroup value, then 2) parse through all imgs with a name attribute that matched the image that triggered the function. In all, I broke thickbox from working normally, but it worked.

    I moved on to seeing what slimbox could do.. but because i can’t go under the hood and edit the code i’m limited. Slimbox can very easily make a multiple image slimbox from a jquery object that selects more than one image.. which is cool, but there is no way to stop it from adding the click functionality to each image.. and I don’t want it on the thumbs. The only solution was to feed it a static list of images as an array and put it in a separate function, then call that function with an onclick jquery call. Which is kinda kludgey but ok, since I assemble the UL dynamically anyway from a dir of images.

    This is what i added to onImage:
    image.click(function(){show_pics(spa_pics,start_img);});

    (I also had to add a few lines of code to pull out the image number from the src and send that as the start image)

    This is the show_pics function:
    function show_pics(spa_pics, start_img) {

    //build the 2d array
    var slim_pics = new Array();
    for ( var i in spa_pics ) {
    slim_pics[i] = new Array(imgpath + spa_pics[i],’description’);
    }

    jQuery.slimbox(slim_pics, start_img, {loop: true});
    }

    spa_pics is my array of pics that was built from php opening a dir and pulling back all the images, then echoing them into a JS array. (that’s the kludgy part). then i have to turn it into a 2d array for slimbox.

    the working code can be found here, but this site is not launched yet and is still in baby development stages: http://www.spaweekguide.com/spas/new-york/bunya-citispa

  18. Thanks for posting such a detailed explanation of your progress with this Mari. I’ll have to get my head around it when I get a chance! It’s a great feeling when you manage to get some cool scripts to play together 🙂

  19. Another thing I thought of last night for a group of images with next/prev nav w/o having the click functionality added to the galleria thumbs would be to add a hidden DIV/UL to the page that duplicates all your thumbs/images and give them a special class. Then add whatever class you used for them to the main image in the onImage function, then call slimbox on that selector. You have to have a separate set of images cuz you don’t want to mess with the ones that are turned into galleria thumbs.

    image.wrap(‘<a href=”‘ + image.attr(‘src’) + ‘” rel=”nofollow”></a>’);
    image.addClass(‘my_group_of_images’);
    $(‘.my_group_of_images’).slimbox();

    This probably is a lot better than my other method. Since they are hidden, there is no worries about the click functionality applied to them.

    Another note: since I only use 1 image for all the levels, I really don’t need to wrap a tags on anything. The a tag is just always used in lightboxes to specify the bigger src in the href, and I am using the big images everywhere as the src so I don’t need it in an href. So you can easily change slimbox’s functionality by passing it a link mapping function to grab the src of the image, instead of the href of the A.. then you don’t need a tags and you can target the images instead.

    for a single image:
    image.slimbox({loop: true}, function(el) {return [el.src, el.title];});

    or with my yet to be tested example:
    image.addClass(‘my_group_of_images’);
    $(‘.my_group_of_images’).slimbox({loop: true}, function(el) {return [el.src, el.title];});

    In the above case, you wouldn’t have to add links around any of the image group images in the hidden div.

    Also, one other helpful hack (I think) that I made to galleria was to add display:none to the unstyled UL class (.gallery_unstyled) so that the images don’t show briefly while galleria loads. Then you have to go into the galleria core and remove this class after the thumbs are made.. Line 220 in version 1.0. is where the thumb-making loop ends. Add this code:

    $(this).removeClass(‘gallery_unstyled’);

    Trying to remove the class with jquery in the doc didn’t work for me.. and because it has precedence over the other classes added to the UL via galleria, it makes the newly created thumbs invisible if it is not removed.

    Thanks for posting the initial post Janine, it really helped a lot. Just one little thing makes a difference!

  20. Here is working code for next/prev image group navigation via slimbox when you are using only one size image for all views and not linking to a larger image. It requires that you leave the galleria thumbs/images alone and just create a separate set of hidden images to use as the group.

    First duplicate all your images in a hidden DIV and give them all the same class:

    In the galleria onImage function add that class to the clicked image:

    image.addClass(‘image_group’);

    Then call slimbox on that image with a linkMapper that pulls the src of the image for the larger display, and a linkFilter that filters out the duplicate images — you will have a dupe because the one you clicked on is also in the hidden DIV.

    $(‘.image_group’).slimbox({loop: true},
    function(el) {return [el.src, el.title];},
    function(el) {return (this == el) || (this.src != el.src);});

    If you are linking to larger images, then you’ll have to wrap the clicked image in A tags like Janine shows and then set up your hidden DIV images in the same way. You won’t need the linkMapper (second argument) then, but you will have to change the linkFilter (3rd arg) to compare hrefs instead of srcs.

    I say it’s working.. but I haven’t tested it in all browsers yet.

  21. Re: my suggestion to add display:none to the gallery_unstyled class so that the images dont show while the page loads… totally broke it in IE. (God, I hate IE.) visibility:hidden works tho. Go figure.

  22. Hi Janine – really like this, very helpful.

    I wanted to see if you or anyone else could help me out with what bakkelun was trying to do: when clicking on a certain thumbnail, I want to open the slimbox instead of in the galleria (only for certain images). I tried your technique, but like you said, the underlying code seems to override the link around the thumbnail.

    I am not an expert in Java but I know this is where the code needs to change, and I have added a longdesc reference here:

    // add the rel attribute

    _thumb.attr(‘rel’,_src);

    //add the long desc

    _thumb.attr(‘longdesc’,_longdesc);

    // add the title attribute
    _thumb.attr(‘title’,_title);

    // add the click functionality to the _thumb
    _thumb.click(function() {
    $.galleria.activate(_src);
    });

    I cannot figure out what to put underneath the _thumb.click function — it would make sense to create an If longdesc exists statement, then link to the slimbox rel; if not do what galleria normally does.

    Any thoughts?

  23. Found this from the developer:

    Adding

    thumb.click(function() {
    window.location = $(this).attr(‘longdesc’);
    });

    To the OnThumb function grabs the longdesc attribute and directs the page to the URL you specify, but it simply redirects. There has to be a way to get this link to call the slimbox instead, maybe with a different function – can anyone help?

  24. This is really great information on what you have done with Galleria and Slimbox. I was wandering if there is a dome of this somewhere.

  25. Just want to thank Mari again for the howto for getting previous/next navigation working for the lightbox enlargements. I hadn’t needed this when I first combined Galleria and Slimbox and wrote this post. But I really needed that to work on my current build, and having had my head out of this for a long while, Mari’s method for this was really useful. I hope to add some basic demos at some stage – just up the walls with work at the moment!

  26. This is great and everything explained here works properly for me. BUT
    I would need a caption to be visible INSIDE the slimbox viewer.
    By now, I’m only able to see the caption generated by Galleria (written in the html code).
    Is there a way to get the caption along the image into the slimbox viewer (by changing some lines in galleria.js maybe?).
    I really need this.
    Thank you for everything.