我使用的是大胆的Popup插件(http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)
我可以先把我的代码放在这里:
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
// Delay in milliseconds before popup is removed
removalDelay: 600,
// Class that is added to popup wrapper and background
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-fade',
type:'inline',
midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.,
callbacks: {
beforeOpen: function() {
if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){
if ($('.imagetitle').length > 0) {
// it exists
}else{
$(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>");
$(".image-container span.imagetitle").css({
"left": $(".image-container img").position().left+"px",
"margin-top":10+"px",
"margin-bottom":10+"px"
});
}
}
//Make it a Gallery! - Whoop Whoop
if($("div.white-popup").length > 1){
$("div.white-popup").append("<div class='popupgalleryarrowleft'> </div>");
$("div.white-popup").append("<div class='popupgalleryarrowright'> </div>");
}
},
open: function(){
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
}
}
});
});
所以我想要一个内联图库。它可以正常工作,但这部分不是:
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
我只是试图获得下一个实例,当有一个实例时。当我在运行时通过firebug运行此代码时,它可以工作!
任何人都可以帮我吗?希望。
问候大卫
答案 0 :(得分:1)
正在寻找同样的事情。 我想在这里你在寻找http://codepen.io/anon/pen/kInjm
$('.open-gallery-link').click(function() {
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
});
});
答案 1 :(得分:0)
我需要为图库创建自定义导航,因此我使用$.magnificPopup.instance.next();
进行了游戏。放入图库的单击处理程序时,它确实有效。
否则,没有&#34;下一个实例&#34;找到因为它还没有存在。
单击底部/标题栏(see it on codepen)时,这将导航到下一个图库图像:
$('.gallery').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
$('.gallery').click(function() {
$('.mfp-bottom-bar').click(function() {
$.magnificPopup.instance.next();
});
return false;
});
这里有一个更完整的example on Codepen,有多个画廊。
这个也使用回调调整弹出窗口中自定义导航和填充的高度。这很有用,因为我项目中的导航按钮具有很高的高度,并且被屏幕底部切断。 (默认情况下,仅使用图像高度本身来计算弹出窗口在视口中的拟合方式。)
希望这对某人有用。我知道这个问题是在两年前,但也许其他人也会通过谷歌搜索找到它,就像我一样。