Magnific-popup: Disable Gallery Looping

Created on 20 Jan 2014 · 12Comments · Source: dimsemenov/Magnific-Popup

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

Source

mjcampagna

Most helpful comment

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

dimsemenov on 22 Jan 2014

👍2 ❤1

All 12 comments

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();
    }
};

tiesont on 20 Jan 2014

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 ... ?

mjcampagna on 22 Jan 2014

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.

tiesont on 22 Jan 2014

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

dimsemenov on 22 Jan 2014

👍2 ❤1

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

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

mjcampagna on 22 Jan 2014

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

mjcampagna on 27 Jan 2014

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 on 27 Jan 2014

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?

mjcampagna on 27 Jan 2014

👍2

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.