Jquery 放大弹出窗口-禁用第一个/最后一个项目上的箭头
我正在使用放大弹出窗口，我想知道是否有办法禁用画廊中第一个/最后一个项目上的箭头Jquery 放大弹出窗口-禁用第一个/最后一个项目上的箭头,jquery,magnific-popup,Jquery,Magnific Popup,我正在使用放大弹出窗口，我想知道是否有办法禁用画廊中第一个/最后一个项目上的箭头 我已经阅读了文档，但是找不到关于这种功能的任何信息。这是我修改它的方式。当然不是最好的，而是最坏的方式，但它对我有效 希望能有帮助 编辑：代码被/*lmdrk*/注释包围，这是我添加的内容 在jquery.magnificpoop.js中 环线29 /** * Private vars */ var mfp, // As we have only one instance of MagnificPopup ob
我已经阅读了文档，但是找不到关于这种功能的任何信息。这是我修改它的方式。当然不是最好的，而是最坏的方式，但它对我有效 希望能有帮助 编辑：代码被/*lmdrk*/注释包围，这是我添加的内容 在jquery.magnificpoop.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),
open: function(data) {
var i;
/*lmdrk*/
is_first_item = false;
is_last_item = false;
/*lmdrk*/
if(data.isObj === false) {
_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();
}
_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) {
_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';
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();
对于@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 ----- */
}
您不需要修改任何源文件，只需覆盖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);
}
};
}
}
回调：{
打开：函数（）{
var mfp=$.magnificpoop.instance；
var proto=$.magnificpoop.proto；
//扩展移动到下一项的函数
mfp.next=函数（）{
//若索引不是最后一个，则调用父方法
if（mfp.index0）{
原型前置呼叫（mfp）；
}
};
}
}
您可以这样做：
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');
}
}
.mfp-first .mfp-arrow-left {
display: none;
}
.mfp-last .mfp-arrow-right {
display: none;
}
我花了2美分完成并简化了德米特里·塞门诺夫的回答，这是一个很好的提示，为像我这样的傻瓜找到了隐藏箭头的方法。我删除了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');
}
}
}
对于仍在寻找答案的人来说，以下是对所讨论主题的近乎最佳（我希望如此）的解决方案： 它遵循作者喜欢的方式，不需要修改插件的源代码 您可以在插件文档中阅读有关如何扩展或重写类函数的更多信息：
$（文档）.ready（函数（）{
//在包含弹出JS文件后添加此代码
$.magnificpoop.instance.next=function（）{
//若索引不是最后一个，则调用父方法
if（$.magnificpoup.instance.index<$.magnificpoup.instance.items.length-1）{
//您可以这样调用父（“原始”）方法：
$.magnificpoop.proto.next.call（this/*，可选参数*/）；
}
};
$.magnificpoop.instance.prev=函数（）{
//若索引不是第一个，则调用父方法
如果（$.magnificpoop.instance.index>0）{
//您可以这样调用父（“原始”）方法：
$.magnificppopup.proto.prev.call（this/*，可选参数*/）；
}
};
$.magnificpoop.instance.toggleArrows=function（）{
//如果索引不是最后一个，则显示下一个图像箭头按钮：
if（$.magnificpoup.instance.index<$.magnificpoup.instance.items.length-1）{
$（“.mfp向右箭头”）.show（）；
}
//如果索引是最后一个，则隐藏下一个图像箭头按钮：
if（$.magnificpoup.instance.index==$.magnificpoup.instance.items.length-1）{
$（“.mfp向右箭头”）.hide（）；
}
//如果索引不是第一个，则显示上一个图像箭头按钮：
如果（$.magnificpoop.instance.index>0）{
$（“.mfp向左箭头”）.show（）；
}
//如果索引是第一个，则隐藏上一个图像箭头按钮：
如果（$.magnificpoop.instance.index==0）{
$（“.mfp向左箭头”）.hide（）；
}
};
$.magnificpoop.instance.updateItemHTML=function（）{
$.magnificPopup.instance.toggleArrows（）；
//您可以这样调用父（“原始”）方法：
$.magnificPopup.proto.updateItemHTML.call（this/*，可选参数*/）；
};
/*-图片廊-*/
$（“.zoom gallery”）.each（函数（）{
$（此）.magnificPopup({
委托：“a”，//库项目的选择器
键入：“图像”，
回调：{
打开：函数（）{
//将在打开此确切弹出窗口时触发
//这是一个放大的弹出对象
this.toggleArrows.call（this）；
}
},
画廊：{
已启用：true
}
});
});
});
回调：{
打开：函数（）{
var mfp=$.magnificpoop.instance；
var proto=$.magnificpoop.proto；
//初始箭头显示/隐藏检查
如果（mfp指数<1）
$（“.mfp向左箭头”）.hide（）；
如果（mfp.index>=mfp.items.length-1）
$（“.mfp向右箭头”）.hide（）；
//下一种方法
mfp.next=函数（）{
//若索引不是最后一个，则调用父方法
if（mfp.index=mfp.items.length-1）
$（“.mfp向右箭头”）.hide（）；
}否则{
//否则，执行任何您想要的操作，例如隐藏“下一步”箭头
$.magnificPopup.close（）；
}
};
//PREV方法
mfp.prev=函数（）{
如果（mfp.index>0）{
原型前置呼叫（mfp）；
//箭头显示/隐藏检查
<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>
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