我正在使用magnific-popup，我想知道是否有办法禁用图库中第一个/最后一个项目的箭头。
我已阅读文档，但无法找到有关此类功能的任何内容。
答案 0 :(得分：6)
您无需修改任何源文件，只需覆盖上一个/下一个功能：
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);
}
};
}
}
答案 1 :(得分：5)
对于任何仍在寻找的人来说，这里讨论的话题几乎是最好的（我希望如此！）解决方案：
它遵循作者的首选方式，不需要修改插件的源代码。
您可以在插件文档中阅读有关如何扩展或覆盖类函数的更多信息：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>
答案 2 :(得分：2)
这是我修改它的方式。当然不是最好但最糟糕的方式，但它对我有用。
希望有所帮助
编辑：代码包围/ * lmdrk * /评论它是我添加的内容
在jquery.magnificpopup.js
第29行
/**
* Private vars
*/
var mfp, // As we have only one instance of MagnificPopup object, we define it locally to not to use 'this'
/*lmdrk*/
is_first_item = false,
is_last_item = false,
/*lmdrk*/
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
第165行
open: function(data) {
var i;
/*lmdrk*/
is_first_item = false;
is_last_item = false;
/*lmdrk*/
if(data.isObj === false) {
第1465行
_document.on('keydown'+ns, function(e) {
if (e.keyCode === 37) {
if (mfp.currItem.index != 0) /* lmdrk */
mfp.prev();
} else if (e.keyCode === 39) {
if (mfp.currItem.index != mfp.items.length-1) /* lmdrk */
mfp.next();
}
arround line 1474
_mfpOn('UpdateStatus'+ns, function(e, data) {
if(data.text) {
data.text = _replaceCurrTotal(data.text, mfp.currItem.index, mfp.items.length);
}
/*lmdrk*/
if (mfp.currItem.index == 0)
is_first_item = true;
else if (mfp.currItem.index == mfp.items.length-1)
is_last_item = true;
/*lmdrk*/
});
_mfpOn(MARKUP_PARSE_EVENT+ns, function(e, element, values, item) {
arround line 1493
_mfpOn('BuildControls' + ns, function() {
if(mfp.items.length > 1 && gSt.arrows && !mfp.arrowLeft) {
var markup = gSt.arrowMarkup,
arrowLeft = mfp.arrowLeft = $( markup.replace('%title%', gSt.tPrev).replace('%dir%', 'left') ).addClass(PREVENT_CLOSE_CLASS),
arrowRight = mfp.arrowRight = $( markup.replace('%title%', gSt.tNext).replace('%dir%', 'right') ).addClass(PREVENT_CLOSE_CLASS);
/*lmdrk*/
if(is_first_item)
arrowLeft.css('display', 'none');
if(is_last_item)
arrowRight.css('display', 'none');
/*lmdrk*/
var eName = supportsFastClick ? 'mfpFastClick' : 'click';
和arround line 1543
next: function() {
mfp.direction = true;
mfp.index = _getLoopedId(mfp.index + 1);
/*lmdrk*/
if (mfp.arrowLeft.css('display') == 'none')
mfp.arrowLeft.css('display', 'block');
if (mfp.index == mfp.items.length - 1)
mfp.arrowRight.css('display', 'none');
/*lmdrk*/
mfp.updateItemHTML();
},
prev: function() {
mfp.direction = false;
mfp.index = _getLoopedId(mfp.index - 1);
/*lmdrk*/
if (mfp.arrowRight.css('display') == 'none')
mfp.arrowRight.css('display', 'block');
if (mfp.index == 0)
mfp.arrowLeft.css('display', 'none');
/*lmdrk*/
mfp.updateItemHTML();
答案 3 :(得分：0)
除了@Daniel Garcia的答案之外，我使用以下内容确保在第一个或最后一个项目开始时第一次显示图库时不显示箭头
第1383行
// Polyfill for :before and :after (adds elements with classes mfp-a and mfp-b)
if(mfp.isIE7) {
_getEl('b', arrowLeft[0], false, true);
_getEl('a', arrowLeft[0], false, true);
_getEl('b', arrowRight[0], false, true);
_getEl('a', arrowRight[0], false, true);
}
mfp.container.append(arrowLeft.add(arrowRight));
/* ----- Start of my editing ----- */
if (mfp.index == 0)
mfp.arrowLeft.hide();
if (mfp.index == mfp.items.length - 1)
mfp.arrowRight.hide();
/* ----- End of my editing ----- */
}
答案 4 :(得分：0)
你可以这样做：
callbacks: {
change: function() {
var mfp = $.magnificPopup.instance;
var container = $(mfp.container);
if (mfp.index >= mfp.items.length - 1) container.addClass('mfp-last');
else container.removeClass('mfp-last');
if (mfp.index == 0) container.addClass('mfp-first');
else container.removeClass('mfp-first');
}
}
加上这个css
.mfp-first .mfp-arrow-left {
display: none;
}
.mfp-last .mfp-arrow-right {
display: none;
}
答案 5 :(得分：0)
我完成并简化德米特里·谢苗诺夫的答案我的2美分，这是一个很好的暗示找到隐藏像我这样的菜鸟箭头的方法。我删除了不需要的“next”和“prev”函数覆盖IMO：箭头必须隐藏在显示屏上，而不是上一次/下一次点击。
callbacks: {
open: function() {
var mfp = $.magnificPopup.instance;
// if index is last, hide "next" arrow
if(mfp.index == mfp.items.length - 1) {
mfp.arrowRight.css('display', 'none');
}
// same with "prev" arrow and first item
if(mfp.index == 0) {
mfp.arrowLeft.css('display', 'none');
}
}
}
答案 6 :(得分：-1)
callbacks: {
open: function() {
var mfp = $.magnificPopup.instance;
var proto = $.magnificPopup.proto;
// Initial arrows show/hide check
if( mfp.index < 1)
$(".mfp-arrow-left").hide();
if( mfp.index >= mfp.items.length - 1)
$(".mfp-arrow-right").hide();
// NEXT Method
mfp.next = function() {
// if index is not last, call parent method
if( mfp.index < mfp.items.length - 1) {
proto.next.call(mfp);
// arrows show/hide check
$(".mfp-arrow-left").show();
if( mfp.index >= mfp.items.length - 1)
$(".mfp-arrow-right").hide();
} else {
// otherwise do whatever you want, e.g. hide "next" arrow
$.magnificPopup.close();
}
};
// PREV Method
mfp.prev = function() {
if(mfp.index > 0) {
proto.prev.call(mfp);
// arrows show/hide check
$(".mfp-arrow-right").show();
if( mfp.index < 1)
$(".mfp-arrow-left").hide();
}
};
} // open function
} // callbacks