Allow gallery to be assign via data-rel attribute

[roykho]

Hi! This is more of a feature request than an issue. It would be nice if we could uniquely assign a group gallery via data-rel attribute. So for example I can have the following code.

<a href="largeimage" class="lightbox" data-rel="gallery123"><img src="smallimage" /></a> <a href="largeimage" class="lightbox" data-rel="gallery123"><img src="smallimage" /></a>

So that anything with that data-rel that are the same will be grouped in the same gallery.

Thanks!

[AdamWebDev]

Your images are broken...

[roykho]

Yeah they were code...I had to surround them in ticks for them to show...

[carasmo]

I'm a nit wit, I see that I can have non-linked images, I had the gallery set to true and other wrong js in my code.

[ghost]

I think I suggested the same in this issue already: https://github.com/dimsemenov/Magnific-Popup/issues/167

[Grawl]

@RexDude looks like true, and there is an answer.

[p2media]

We came up with this workaround:

var lightboxElements = {};

$('[data-rel^="lightbox"]').each(function(idx, elem) {
    var $elem = $(elem),
        href = $elem.attr('href'),
        rel = $elem.data('rel'),
        itemSettings = {
            src: href,
            type: 'iframe'
        }
    ;
    lightboxElements[rel] = lightboxElements[rel] || [];

    // @TODO: get additional properties per `.data()`

    if (href.match(/\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i)) {
        itemSettings.type = 'image';
    }

    lightboxElements[rel].push(itemSettings);
});

$.each(lightboxElements, function(rel, items) {

    var $handles = $('[data-rel="'+ rel +'"]');
    $handles.on('click', function(event) {
        event.preventDefault();

        var idx = $handles.index(this) || 0;

        $.magnificPopup.open({
            items: items,
            image: {
                verticalFit: true
            },
            gallery: {
                enabled: true,
                arrows: true
            }
        });

        return false;
    }, idx);

});

[iamkeir]

I went about it slightly differently (and I hope more simply):

var $lightboxTriggers = $('[data-mfp]'); // cache triggers

  $lightboxTriggers.each(function() { // for each instance
    var $trigger = $(this);
    var triggerLightbox = $trigger.data('magnificPopup'); // to check if magnific already bound
    var enableGallery = false; // default to non-gallery mode
    var groupID = $trigger.data('mfp-group') || false; // group ID, if any

    if (groupID) { // if we have a grouping
      $trigger = $lightboxTriggers.filter('[data-mfp-group="' + groupID + '"]'); // set trigger to filtered group triggers
      enableGallery = true; // enable gallery mode
    }

    if (!triggerLightbox) { // if trigger does not already have magnific popup attached

      $trigger.magnificPopup({ // init magnific
        gallery: {
          enabled: enableGallery // flag for gallery
        }
      });

    }

  });

The markup for a trigger is:

<a href="[link to image etc.]" class="mfp-image" data-mfp data-mfp-group="gallery">Trigger</a>

Note, I am using the class helper to indicate 'type'.