Galleries and Images

[ghost]

Hi,

I would like to use Magnific Popup with a CMS so there could be one or more images or one or more galleries depending on the content of the actual page.With FancyBox i just did $("a.fancybox").fancybox(); and the gallery got the data-fancybox-group="gallery-1" attribute.

In Magnfic Popup I right now have to do something like this:

$('a.magnific-popup').magnificPopup({
        type: 'image',
        tClose: '',
        fixedContentPos: false,
        image: {
            cursor: '',
            titleSrc: 'data-title-src'
        }
    });

    $('.gallery').each(function() { 
        $(this).magnificPopup({
            delegate: 'a', 
            tClose: '',
            fixedContentPos: false,
            type: 'image',
            gallery:{
                enabled:true,
                tPrev: '',
                tNext: '',
                tCounter: '%curr% von %total%',
            },
            image: {
                cursor: '',
                titleSrc: 'title'
            }
        });
    }); 

My question is: is there an easier way doing this? Or are you maybe planning a Fancybox like approach?

[dimsemenov]

Hi,

There is no such option and probably won't be, Global jQuery selector by attribute name/value is pretty slow, and I don't want to overload the script with stuff that can be easily added by those who need this feature.

You may create the options object once and pass it to both init codes.

.

[ghost]

You may create the options object once and pass it to both init codes.

Could you perhaps give me an example how my code then would look like? Or what options object do you mean? Right now i have:

// single image
$('a.lightbox').magnificPopup({ 
    type: 'image',
    fixedContentPos: false,
    removalDelay: 300,
    mainClass: 'mfp-with-fade',
    tClose: '',
    closeOnContentClick: true,
    image: {
        cursor: '',
        titleSrc: 'data-title'
    }
});

// gallery images
$('.gallery').each(function() {
    $(this).magnificPopup({
        type: 'image',
        fixedContentPos: false,
        removalDelay: 300,
        mainClass: 'mfp-with-fade',
        tClose: '',
        image: {
            cursor: '',
            titleSrc: 'data-title'
        },
        delegate: 'a',
        gallery:{
            enabled:true,
            tPrev: '',
            tNext: '',
        }
    });
}); 

[emaildano]

@RexDude I'm not 100% sure of what you're looking for but I was able to use your JS markup in Wordpress and pull image captions into the gallery. Since those selectors aren't supported I had to go about it a different way. Works perfectly fine for me though.

Here's a recap of what I did using Advanced Custom Fields Repeater Field and this plugin.

// gallery images
$('.photoWrap').each(function() {
    $(this).magnificPopup({
        type: 'image',
        removalDelay: 300,
        mainClass: 'mfp-with-fade',
        tClose: '',
        image: {
            cursor: '',
            titleSrc: 'data-title'
        },
        delegate: 'a',
        gallery:{
            enabled:true,
            tPrev: '',
            tNext: '',
        }
    });
}); 

data-title="<?php echo $image['caption']; ?>

[Grawl]

I am also want it. We cannot every time just put all images into one container with a specific class. Sometimes we have a complex markup and have to choose what images we need to add to a gallery. For example, we need every left-aligned image on our page into one gallery and right-aligned to other.

If an existing approach is too slow so we need to do it faster but not ignore such a major feature.

So this time we need a walkthrough on how to do it without built-in non-existing functionality. Maybe it can be a MagnificPopup Plugin? maybe a guide into this repository wiki?

[sassoli]

I have solved in this way:

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
    delegate: 'a', // the selector for gallery item
    type: 'image',
    gallery: {
      enabled:true
    }
});

});

http://stackoverflow.com/questions/16654120/multiple-galleries-with-magnific-popup