Grouping Images

[Math3wC]

Hi Andre,

Love the plugin, but it require a grouping function to separate the images in same pages to have their own gallery. Or is the function already there? Because I can't find any guide about it.

[andreknieriem]

Hey, I will mention it in the guide now. You can have multiple lightboxes, you only need some different selectors. So you can make a group and give them the class ".lighbox-1" and another group calling ".lightbox-2".

After that you can simply do: var lightbox = $('.lighbox-1 a').simpleLightbox(options); var lightbox2 = $('.lighbox-2 a').simpleLightbox(options);

[pmfx]

@andreknieriem Unfortunately thats not a solution for me. Can we have one JS call and many galleries grouped by rel or data-attribute tag?

[andreknieriem]

That would be a good feature. I will check it.

[Mushr0000m]

+1 for that feature

[andreknieriem]

Ok, I will take a look at this.

[andreknieriem]

If I understand right, the feature is now online ;) 1.9.0

[groomain]

Hi don't think that this was exactly what @pmfx was thinking.

The old way was:

var lightbox = $('.lighbox-1 a').simpleLightbox(options); var lightbox2 = $('.lighbox-2 a').simpleLightbox(options);

The new way is: var lightbox = $('.lighbox a').simpleLightbox({rel: "lightbox-1"}); var lightbox2 = $('.lighbox a').simpleLightbox({rel: "lightbox-2"});

You still have to do two call and know by advance what is the name of the rel.

It's would be better if with one call. All images with rel="lightbox-1" are together as all images with rel="azert" are together too.

var lightbox = $('.lighbox a').simpleLightbox({rel: true});

Maybe I haven't understand well how the feature was working. :)

Regards,

[andreknieriem]

Hey, now I get what you need. Will change that feature to that way. I looked at the colorbox code and there it was implemented the way I do it too.

[groomain]

Thanks for your fast response.

You can also look at Fancybox. They have this feature :).

All images with data-rel="azerty" or rel="azerty" are naturally together with one call.

Regards,

[thesergeev]

Also please add grouping by data-rel attr. Because validator not allow use custom names in rel attr in HTML5

[andreknieriem]

@thesergeev this is planned. I startet to implement this feature, but it needs a lot of code rewriting for setting up multiple instances with one call.

[thesergeev]

@andreknieriem, thank you for the plugin! It's the best!

[Mushr0000m]

While the team is working on a better solution, here is for others what I do to have this feature, it's not perfect but it work, if it can help others :

if ($('.lightbox').length > 0) {
    var $images = $('.lightbox');
    var $imagesGrouped = $images.filter('[data-group]');
    var $imagesAlone = $images.not($imagesGrouped);
    var params = {
        // your params
    };

    // Handle standalone images
    $imagesAlone.each(function (index, element) {
        $(element).simpleLightbox(params);
    });

    // Handle grouped imags
    if ($imagesGrouped.length > 0) {
        // Select all groups
        var groupNames = $imagesGrouped.map(function() {
            return $(this).data('group');
        }).get();
        groupNames = $.unique(groupNames);

        // Apply on each group
        $.each(groupNames, function(key, value) {
            $imagesGrouped.filter(function () {
                return $(this).data('group') == value;
            })
            .simpleLightbox(params);
        });
    }
}

So if you add the "lightbox" class you have an alone lightbox and if you add data-group="something", it will create a group with all other lightbox with this attribute.

[appel]

Thanks for sharing your temporary solution @Mushr0000m, I can confirm this works like a charm!

[andreknieriem]

Yeah but this is exactly the method that I described in die docs. You have to do multiple calls to get multiple instances. With one call it's not possible.

[spartie17]

Amazing lightbox @andreknieriem! @Mushr0000m thanks so much for your solution for having multiple galleries! I can confirm that it works in Firefox, Edge, and Safari, but in Chrome it seems to call multiple instances at the same time and they are layered on top of each other (see screenshot). I'm not sure why this happens, especially only in Chrome, and I'm not well versed enough in JavaScript to fix it. I was wonder if you, or anyone else might have any ideas? Thanks in advance!

[Klenkes]

I know this is an old post but I want Andre to encourage to implement the automatic rel grouping.

I just found SimpleLightbox and love it for its small size and ease of use and great options. Begun to replace LightGallery with it, but I am missing the grouping by rel attribute. In all my cases/websites the value is not known, so grouping has to be automatic.

Unfortunately I am not a Javascript programmer. So I wouldn't be much of a help...

[andreknieriem]

It is not that easy, but with v2 ready I can now get this to work ;)

[andreknieriem]

It would be great if some of you can test the feature: https://github.com/andreknieriem/simplelightbox/tree/feature-rel

It works like that: It autodetects the rel attribute and groups images by it. If you set the rel option it only selects this group. If you set the rel option to nofollow, it ignores the rel option and selects all items.

[Klenkes]

Thank you! Looks promissing. I made a few quick tests and was confused at the beginning because simpleLightbox now goups by rel automaticaly. First I tried to set rel: true which results in the script not working at all(not lightboxing...), then I commented it out and then everything works. One problem is, if you have a single image not grouped by rel it acts strange. It thinks it's a part of a group and swipes itself... and image count is wrong

Take a look: http://testcases.kopfleere.de/bilddarstellungen/simplelightbox-rel/

[Klenkes]

Sorry, wrong link to the test case...

[andreknieriem]

Yes can see it and wasn't able to reproduce the error. I see the error seems in your implementation. You call

$('.gallery a').simpleLightbox(...

and some lines below

$('.zoomable').simpleLightbox();

But the .zoomable image is in a gallery a. So you open 2 lightbox at once. That causes this strange behaviour.

[Klenkes]

Oh my... you are right. I take everything back. Works fine now. Thanks!

[andreknieriem]

Alright published it. Finally :D