Disable Gallery Looping

[mjcampagna]

I would like prevent galleries from looping the last image back to the first. Instead, I'd like the gallery to close after the last image.

Is there a way to do this? I found nothing about looping enable/disable in the documentation.

Thanks,
Matt

[tiesont]

Haven't tested this, but based off the documentation, something like this should work:

var magnificPopup = $.magnificPopup.instance;

$.magnificPopup.instance.next = function() {
    var i = magnificPopup.index;
    var num = magnificPopup.items;

    if(num > i){
        $.magnificPopup.proto.next.call(this /*, optional arguments */);
    }
    else{
        magnificPopup.close();
    }
};

[mjcampagna]

Tested. It closes the popup on any navigation at all, so I guess it views each popup in the gallery as the only item in the gallery ... ?

[tiesont]

Hmm. That wasn't the behavior I expected. I'll have to throw a sample together and see what I can come up with. In the meanwhile, you might consider posting something to StackOverflow.

[dimsemenov]

You may just override prev/next functions.

callbacks: {
    open: function() {
        var mfp = $.magnificPopup.instance;
        var proto = $.magnificPopup.proto;

        // extend function that moves to next item
        mfp.next = function() {

            // if index is not last, call parent method
            if(mfp.index < mfp.items.length - 1) {
                proto.next.call(mfp);
            } else {
               // otherwise do whatever you want, e.g. hide "next" arrow
            }
        };

        // same with prev method
        mfp.prev = function() {
            if(mfp.index > 0) {
                proto.prev.call(mfp);
            }
        };

    }
}

http://dimsemenov.com/plugins/magnific-popup/documentation.html#how_to_override_some_function_without_modifying_the_source_files

[mjcampagna]

Thanks, Dmitry. That's perfect! Much appreciated.

Thank you for your attention on this as well, Tieson.

[mjcampagna]

What would be the correct way to hide the next arrow using your example above, Dmitry?

[mjcampagna]

I've gotten this far:

elementParse: function(){

    if(mfp.index >= mfp.items.length - 1) {
        mfp.arrowRight.hide();
    };

},

Unfortunately, hiding the arrow in this way hides it all on slides, not just this one. For example, if I go back to the previous image, then the "Next" arrow has vanished entirely.

[mjcampagna]

This works, but seems overly convoluted.

In CSS:

.mfp-gallery .mfp-first .mfp-arrow-left, 
.mfp-gallery .mfp-last .mfp-arrow-right {
    display: none;
    }

And then:

open: function(){
    var mfp = jQuery.magnificPopup.instance;

    // hide image nav when first/last
    if(mfp.index >= mfp.items.length - 1) {
        $(".mfp-container").addClass("mfp-last");
    } else {;
        $(".mfp-last").removeClass("mfp-last");
    }
    if(mfp.index == 0) {
        $(".mfp-container").addClass("mfp-first");
    } else {;
        $(".mfp-first").removeClass("mfp-first");
    }

}, //open

change: function(){
    var mfp = jQuery.magnificPopup.instance;

    // hide image nav when first/last
    if(mfp.index >= mfp.items.length - 1) {
        $(".mfp-container").addClass("mfp-last");
    } else {;
        $(".mfp-last").removeClass("mfp-last");
    }
    if(mfp.index == 0) {
        $(".mfp-container").addClass("mfp-first");
    } else {;
        $(".mfp-first").removeClass("mfp-first");
    }

}, //change

Clearly, having to repeat the functions in two callbacks is less than optimal, but I can't find a callback that encompasses both open and change. Is there such a thing? Or is there any way of going about this that just makes better sense than this hamfisted manipulation of container classes?

[petertwise]

Thanks for posting all of this helpful code everyone. I would add this as a feature request. I seem to remember colorbox has a simple loop: false parameter built in. Something like that would be very useful.

[katherine-boost]

Echoing @squarecandy, a config option to enable/disable gallery looping would be a wonderful addition to the library!

[petertwise]

@katherine-boost I'm thinking that with the last official release in 2016 and almost 3000 forks out there, we might be on our own at this point...

[katherine-boost]

So it seems! 😢