jquery - 模态是之前模态的 "remembering"代码

Question

设置
我有一个盒子网格(模式触发器)。每个框都会打开一个模式。每个模式内部都是一个非常简单的缩略图库，其中包含一个主图像和缩略图。单击缩略图会将主图像替换为其较大版本。

问题(此序列中的第四步...)
(1) 打开模态A，主图显示——太棒了!
(2) 单击模态 A 中的第二个拇指，主图像将变为该拇指的放大版本 - 太棒了!
(3) 关闭模态 A - 太棒了!
(4) 打开模态 B，主图像不是模态 B 的第一个缩略图，而是模态 B 的第二个缩略图的较大图像 - 不太好!模态 B 记住我从模态 A 中选择了第二个拇指，因此它显示了模态 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&nbsp;&nbsp;<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>

编辑
fiddle ! fiddle ! fiddle ! --> http://jsfiddle.net/zuhloobie/nLhcejsz/

(1)点击模态A，看到模态主图A1和右边的大拇指A1、A2
(2) 点击大拇指A2，看到主图变为A2
(3)关闭模态A，打开模态B
(4) 看到主图像是 B2，而不是 B1(它记得在模态 A 中单击了第二个拇指，因此它显示了模态 B 的第二个拇指)

希望有帮助! :)

Answer 1

问题是您只设置了新的 src 值，但图像元素本身(单击缩略图后隐藏/显示)仍然处于与之前模态中相同的状态。

我通过在模式打开时触发第一个拇指上的点击来使其工作:

open: function() {
    correspondingModal.find("#thumb_1").parent("a").trigger("click");
}

Updated Fiddle