我已经开发了aspx页面，我有使用owl-carousel的图像厨房现在当我添加了magnific-popup插件并使用了gallery选项然后我注意到当我点击旋转木马上的图像它成功弹出窗口但是图像得到重复（内部弹出窗口）
我的aspx代码：
<div class="owl-carousel">
<asp:ListView runat="server" ID="lvDesrtProgramGallery" ItemType="SharedKernel.Core.Model.ProgramPhoto" SelectMethod="lvDesrtProgramGallery_GetData">
<ItemTemplate>
<div class="item">
<a class="desert-safari-gallery" href="<%# Item.PhotoPath %>">
<img src="<%# Item.MediumPhotoPath %>" alt="" />
<div class="overlay">
<a href="#"><i class="fa fa-search-plus"></i> </a>
</div>
</a>
</div>
</ItemTemplate>
</asp:ListView>
</div>
Js代码
$('.desert-safari .owl-carousel').owlCarousel({
items: 3,
dots: false,
nav: true,
loop: true,
margin: 10,
autoplay: true,
navText: ['<i class="fa fa-angle-left fa-4x"></i>', '<i class="fa fa-angle-right fa-4x"></i>'],
onInitialized: callback,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false,
margin: 80
},
570: {
items: 1,
nav: false
},
768: {
items: 2,
nav: false
},
992: {
items: 3,
nav: false,
},
1200: {
items: 3,
nav: true,
loop: false
}
}
});
function callback(event) {
$(".desert-safari-gallery").magnificPopup({
type: "image",
removalDelay: 160,
loop: false,
preloader: false,
fixedContentPos: true,
showCloseBtn: false,
gallery: {
enabled: true
}
})
}
我刚遇到这个问题，所以我想我会给你答案/解决方案。
原因：由于你使用猫头鹰旋转木马循环，猫头鹰旋转木马是克隆物品。因为您克隆旋转木马中的项目，所以现在将重复项目添加到弹出库中。真麻烦吗？有两个看似明显的解决方案。
解决方案1：不要使用owl-carousel的循环。
如果您想要轮播的循环功能，这可能不是首选解决方案，但这将不再导致弹出窗口接收重复的条目。
解决方案2：根据生成的元素创建一个对象数组，删除重复项，然后使用magnific的items属性设置库项目。
这是一个我必须根据类似场景创建的工作脚本我相信你可以剖析这个过程是什么：
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.gallery img').each(function(i){
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('gallery').magnificPopup({
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
});
}
});
})( jQuery );
我发现@Chris Stage的答案非常有效，但对于一些试图逐字使用代码的n00b可能会遇到问题。我不能只是发表评论或接受答案，所以我发布我的修订版，希望它能为其他人提供正确的代码。
我发现的一个问题是.each（）函数中，您必须将标记的URL包装到较大的图像，而不是图像的URL本身，因为轮播中使用的标记可能是缩略图或等效的，并且在弹出窗口中打开的“较大图像”中较大的一个可以是单独的URL。
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.photo-gallery .item a').each(function(i){ //Target your wrapping a tag
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('.photo-gallery').magnificPopup({ //Target parent carousel container
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
removalDelay: 300,
mainClass: 'mfp-fade' //Adds magnific's fade effect
});
}
});
})( jQuery );
这个解决方案与Owl的“克隆”图像问题完美配合，感谢@Chris Stage提出这个问题。他的回答应该是“接受的答案”，但我也喜欢Upvote澄清，所以我可以赚取一些Rep积分:)