Magnific Popup - 禁用第一个/最后一个项目上的箭头

Question

我正在使用magnific-popup,我想知道是否有办法禁用图库中第一个/最后一个项目上的箭头.

我已阅读文档,但无法找到有关此类功能的任何信息.

Answer 1

您不需要修改任何源文件,只需覆盖prev/next函数:

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

Answer 2

对于任何仍在寻找的人来说,这里讨论的话题几乎是最好的(我希望如此!)解决方案:

它遵循作者的首选方式,不需要修改插件的源代码.

您可以在插件文档中阅读有关如何扩展或覆盖类函数的更多信息:magnific-popup/documentation.html #faq

<script type="text/javascript">
$(document).ready(function() {

    // add this code after popup JS file is included
    $.magnificPopup.instance.next = function() {    
        // if index is not last, call parent method
        if($.magnificPopup.instance.index < $.magnificPopup.instance.items.length - 1) {
            // You may call parent ("original") method like so:
            $.magnificPopup.proto.next.call(this /*, optional arguments */);
        }
    };
    $.magnificPopup.instance.prev = function() {
        // if index is not first, call parent method
        if($.magnificPopup.instance.index > 0) {
            // You may call parent ("original") method like so:
            $.magnificPopup.proto.prev.call(this /*, optional arguments */);
        }
    };

    $.magnificPopup.instance.toggleArrows = function() {
        // if index is not last, show the Next-Image Arrow Button:
        if($.magnificPopup.instance.index < $.magnificPopup.instance.items.length - 1) {
            $(".mfp-arrow-right").show();
        }
        // if index is last, hide the Next-Image Arrow Button:
        if($.magnificPopup.instance.index == $.magnificPopup.instance.items.length - 1) {
            $(".mfp-arrow-right").hide();
        }

        // if index is not first, show the Previous-Image Arrow Button:
        if($.magnificPopup.instance.index > 0) {
            $(".mfp-arrow-left").show();
        }
        // if index is first, hide the Previous-Image Arrow Button:
        if($.magnificPopup.instance.index == 0) {
            $(".mfp-arrow-left").hide();
        }
    };

    $.magnificPopup.instance.updateItemHTML = function() {
        $.magnificPopup.instance.toggleArrows();
        // You may call parent ("original") method like so:
        $.magnificPopup.proto.updateItemHTML.call(this /*, optional arguments */);
    };

    /* - image gallery - */
    $(".zoom-gallery").each(function() {  
        $(this).magnificPopup({
            delegate: 'a', // the selector for gallery item
            type: 'image',
            callbacks: {
              open: function() {
                // Will fire when this exact popup is opened
                // this - is Magnific Popup object

                this.toggleArrows.call(this);
              }
            },
            gallery: {
                enabled:true
            }
        });
    });
});
</script>