We wrote about:

Group images together for use with Fancybox (jQuery)

Fancybox is a great jQuery plugin with lots of great options.  Here is a small snippet of jQuery to add the grouping vai jQuery, which you might want to do with say a WordPress gallery so the client doesn’t need to add any additional markup.

You can then wrap the entire gallery in a<div> tag or perhaps use a selector something like body.gallery a.

Update 5th February 2013 – Further to the comments below, please find a code sample below to group the lightbox per post:

jquery

20/04/2011

Written by James Montgomery, Designer & Developer.

Back

  • Servando Mendoza

    HELLO

  • Cabronne007

    using the above snippet, how will i apply that for a dynamic images using a dynamic grouping name? any help please

    • http://www.realisingdesigns.com James Montgomery

      Hey, do you have any code or an example of what you are trying to achieve?

  • AndyWarren

    I actually wrote a little piece of jQuery yesterday very similar to this. While looking for a solution to my issue I stumbled across this page here.

    jQuery(document).ready(function() {
    var groupID = “group-”;
    jQuery(‘.post .entry-content a’).addClass(‘fancybox’).attr(‘rel’, groupID);
    jQuery(“.fancybox”).fancybox();
    });

    My issue is that its adding the id of the first post as the attribute to all images in all posts. So rather than group a specific posts images its grouping all posts images. Any suggestions.

    P.S. The backticks are in the single PHP tag on purpose as this page kept rendering the tag!

  • Guest

    I posted a few minutes ago, but think I deleted my post when trying to edit it. So I wrote this little piece of jQuery yesterday to group images from WordPress blog posts. My issue is that its getting the ID of the first blog post and applying it as a rel to all images. In otherwords, its grouping all post’s images rather than just the specific post’s.

    `jQuery(document).ready(function() {
    var groupID = “group-”;
    jQuery(‘.post .entry-content a’).addClass(‘fancybox’).attr(‘rel’, groupID);
    jQuery(“.fancybox”).fancybox();
    });

    P.S. I have those backticks in the PHP tag on purpose as this page kept rendering it! I had to break it to stop it form rendering!

  • http://www.realisingdesigns.com James Montgomery

    Hi Andy,

    I think you want to do something like this… http://jsfiddle.net/tJYnU/

    If it works OK, I’ll update the post with it.

    James

    • AndyWarren

      Unfortunately, it appears to be doing the same thing. Grouping all posts images into the same fancybox gallery.