我正在使用 magnific-popup，我想知道是否有办法禁用画廊中第一个/最后一个项目上的箭头。
我已通读文档，但找不到有关此类功能的任何信息。
问问题
6139 次
7 回答
7
您不需要修改任何源文件，只需覆盖 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);
}
};
}
}
于 2014-01-22T08:56:38.020 回答
6
For anyone still looking, here is the nearly best (I hope so!) solution to the discussed topic:
It follows the authors preferred way and does not require modification of the plugin's source-code.
You can read more about how to extend or override class functions in the plugin documentation: 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>
于 2014-10-05T13:34:08.713 回答
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();
}
绕线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) {
绕线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';
和绕线 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();
于 2013-05-28T18:54:15.323 回答
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 ----- */
}
于 2013-05-28T23:13:28.433 回答
0
我的 2 美分来完成和简化 Dmitry Semenov 的答案，这是一个很好的提示，可以为像我这样的菜鸟找到隐藏这些箭头的方法。我删除了 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');
}
}
}
于 2014-02-13T20:07:25.870 回答
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;
}
于 2014-02-07T10:38:54.867 回答
-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
于 2017-02-03T17:47:23.463 回答