Open Images in Lightbox Groups

This post may contain referral links which may earn a commission for this site

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Grouping Lightbox Images using jQuery

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

6 Comments

  1. Great work, you saved me a lot of time. Thanks a lot 🙂

    In the article text above the code, you have a typo – "lighbox-group-cats" instead of "lightbox-group-cats" (I copied CSS name class from there and for a couple of minutes I was trying to find why it's not working 😉 ).

    Reply
    • You're welcome, Karol. Thanks for pointing out the typo – I've just corrected it 🙂

      Reply
  2. I changed the "//Create a magnific popup gallery for each group" section to this

    groups.map(function(group){

    var $images = $('.' + group + ' .et_pb_lightbox_image');

    $images.magnificPopup({
    type: 'image',
    gallery: {
    enabled: true
    }
    });

    });

    The current code works great, but gallerys are not opened at the correct index, they are allways opened at index 0. This simpler initialization works and makes the gallery open at the correct index. I didn't investigate it any further, why the original solution does not work, and what potential downsides this fix has, but I thought you should know 😉

    Reply
    • Hey Vincent, that is a big improvement. Thanks for sharing it 🙂

      I think the problem with the original solution – which I modified from an example I found somewhere – was that it was (unnecessarily) re-building the gallery and losing the index information in the process. I didn't realize magnificPopup could do it directly like this, so I appreciate you enlightening me. I've merged your changes into my code above (and have added some new code to display the image titles). Let me know if you spot any issues with it, etc, and thanks again!

      Reply
  3. Works a treat!
    fantastic – thank you very much for sharing this information.

    The only thing is, the image title, caption or description does not show in the lightbox group.

    Is there a solution to this please?

    Reply
    • You're welcome, Geoffrey, I've just updated the code to show the title set in the image module under "Advanced > Attributes > Image Title Text". I've also just made an improvement to the code suggested by Vincent in his comment, so I'd recommend replacing the entire code with the above (though maybe take a copy before you do in case I've missed anything). Hope it helps!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Hundreds of new features for Divi
in one easy-to-use plugin

6 Comments

  1. Great work, you saved me a lot of time. Thanks a lot 🙂

    In the article text above the code, you have a typo – "lighbox-group-cats" instead of "lightbox-group-cats" (I copied CSS name class from there and for a couple of minutes I was trying to find why it's not working 😉 ).

    Reply
    • You're welcome, Karol. Thanks for pointing out the typo – I've just corrected it 🙂

      Reply
  2. I changed the "//Create a magnific popup gallery for each group" section to this

    groups.map(function(group){

    var $images = $('.' + group + ' .et_pb_lightbox_image');

    $images.magnificPopup({
    type: 'image',
    gallery: {
    enabled: true
    }
    });

    });

    The current code works great, but gallerys are not opened at the correct index, they are allways opened at index 0. This simpler initialization works and makes the gallery open at the correct index. I didn't investigate it any further, why the original solution does not work, and what potential downsides this fix has, but I thought you should know 😉

    Reply
    • Hey Vincent, that is a big improvement. Thanks for sharing it 🙂

      I think the problem with the original solution – which I modified from an example I found somewhere – was that it was (unnecessarily) re-building the gallery and losing the index information in the process. I didn't realize magnificPopup could do it directly like this, so I appreciate you enlightening me. I've merged your changes into my code above (and have added some new code to display the image titles). Let me know if you spot any issues with it, etc, and thanks again!

      Reply
  3. Works a treat!
    fantastic – thank you very much for sharing this information.

    The only thing is, the image title, caption or description does not show in the lightbox group.

    Is there a solution to this please?

    Reply
    • You're welcome, Geoffrey, I've just updated the code to show the title set in the image module under "Advanced > Attributes > Image Title Text". I've also just made an improvement to the code suggested by Vincent in his comment, so I'd recommend replacing the entire code with the above (though maybe take a copy before you do in case I've missed anything). Hope it helps!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *