设置
我有一个方格框(模态触发器)的网格。每个框都会打开一个模态窗口,在每个模态窗口内都有一个非常简单的缩略图库,包括一个主要图片和若干个缩略图。点击缩略图将用其较大版本替换主要图片。
问题(这一步是第四步...)
(1)打开模态窗口A,主要图片显示-太好了!
(2)在模态窗口A中单击第二个缩略图,主要图片将更改为该缩略图的较大版本-很棒!
(3)关闭模态窗口A-非常好!
(4)打开模态窗口B,主要图片不是模态窗口B的第一个缩略图,而是模态窗口B的第二个缩略图的较大图片-不太好!模态窗口B记住了我在模态窗口A中选择的第二个缩略图,因此显示的是Modal B的第二个缩略图而不是第一个。
问题
如何(在哪里)添加代码以使模态窗口“忘记”上一个模态窗口中选择的内容?或每次打开模态窗口时都重置?如果我选择模态窗口A的第三张图片,但打开模态窗口B并且它没有第三个缩略图-因为主要图片将为空。我应该将代码应用于模态窗口还是图库jQuery?这让我发疯了!
模态插件
custombox.js
缩略图插件
simplegallery.js
触发模态的JQUERY
$(document).ready(function () {
$(".modal img").not(":visible").each(function () {
$(this).data("src", this.src);
this.src = "";
});
$(".modal").each(function () {
$(this).data("sourcesAreSet", false);
});
$('.info').on('click', function (e) {
var correspondingModal = $($(this).data('href'));
if (correspondingModal.data("sourcesAreSet") == false) {
correspondingModal.find("img").each(function () {
this.src = $(this).data("src");
});
correspondingModal.data("sourcesAreSet", true);
}
Custombox.open({
target: $(this).data('href'),
effect: 'push',
speed: 500,
overlayColor: '#2C3E50',
overlayClose: false
});
e.preventDefault();
});
});
JQUERY转换为画廊
$(document).ready(function(){
$('#gallery').simplegallery({
galltime : 1000, // transition delay
gallcontent: '.content',
gallthumbnail: '.thumbnail',
gallthumb: '.thumb',
});
});
示例模态框
<div id="modal51" class="modal">
<div id="portfolioItemClose" class="close"><span></span>
</div>
<div class="portfolioTitle wow fadeInLeft" data-wow-delay=".5s" data-wow-duration=".3s">ikuw solutions
</div>
<div class="portfolioImageBodyContainer">
<div class="portfolioImage wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
<div id="gallery" class="">
<div class="content">
<img src="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech.jpg" class="image_1">
<img src="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech_2.jpg" class="image_2" style="display:none;">
</div>
</div>
</div>
<div class="portfolioBody wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s">
<div class="portfolioClientDescriptionUsage">
<div class="portfolioBodyClient wow fadeIn" data-wow-delay=".8s">ikuw solutions</div>
<div class="portfolioBodyDescription wow fadeIn" data-wow-delay=".9s">technical training course outline</div>
<div class="portfolioBodyUsage wow fadeIn" data-wow-delay="1s">students</div>
</div>
<div class="portfolioBodyText wow fadeIn" data-wow-delay="1.1s">[text]</div>
<div class="portfolioBodyPDF wow fadeIn" data-wow-delay="1.1s"><a href="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech.pdf" target="_blank">View full-scale PDF <span class="fa fa-angle-right"></span></a></div>
<div class="portfolioBodyLine wow zoomIn" data-wow-delay="1.2s" data-wow-duration=".3s"></div>
<div class="portfolioBodyVersions wow fadeIn" data-wow-delay="1.3s">pages</div>
<div class="thumbnail">
<div class="thumb wow bounceIn" data-wow-delay="1.5s"><a href="#" rel="1"><img src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20141117_ikuw_flyer_course-outline_tech.jpg" id="thumb_1" class="fit"></a></div>
<div class="thumb wow bounceIn" data-wow-delay="1.6s"><a href="#" rel="2"><img src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20141117_ikuw_flyer_course-outline_tech_2.jpg" id="thumb_2" class="fit"></a></div>
</div>
</div>
</div>
</div>
编辑
测试!测试!测试! --> http://jsfiddle.net/zuhloobie/nLhcejsz/
(1) 点击弹窗 A,查看主图像 A1 和右侧的缩略图 A1 和 A2
(2) 点击缩略图 A2,查看主图像变为 A2
(3) 关闭弹窗 A,打开弹窗 B
(4) 查看主图像是 B2,而不是B1(它记得在弹窗 A 中单击了第二个缩略图,因此显示了弹窗 B 的第二个缩略图)
希望这有所帮助! :)