Modal是"记住"以前模态中的代码

Question

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

问题(这个序列中的第4步......)
(1)打开模态A,主图像显示 - 太棒了!
(2)单击模态A中的第二个拇指,主图像变为该拇指的较大版本 - 太棒了!
(3)关闭模态A - 太棒了!
(4)打开模态B,主图像不是模态B的第一个拇指,但它是模态B的第二个缩略图的较大图像 - 不是那么大!莫代尔B记得我从模态A中选择了第二个拇指,所以它显示的是模态B的第二个拇指而不是第一个拇指.

问题
我如何(以及在​​哪里)添加代码,以便模态"忘记"在最后一个模态中选择的内容？或者每次打开模态时重置？如果我选择模态A的第3张图像,但打开模态B并且它没有第3张缩略图,则此问题非常严重 - 因为主图像将为空白.我是否将代码应用于模态或库jquery？这让我疯狂!

---

MODAL PLUGIN
custombox.js

THUMBNAIL PLUGIN
simplegallery.js

JQUERY FIRE MODAL

$(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!小提琴!小提琴!- > http://jsfiddle.net/zuhloobie/nLhcejsz/

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

希望有所帮助!:)

Answer 1

我更改了初始 .ready() 函数的顺序，并尝试保存所有模式的内容并在 Custombox 关闭时重新加载它们。

编辑：未加载图像已通过在Customboxopen()和函数上加载内容来解决。close()

获取初始模态内容：

$(".modal").each(function () {
    window['reset' + $(this).attr('id')] = $(this).find('.content').html();
});

在 Custombox open() 处加载模态：

open: function(){
            $(".modal").each(function () {
                $(this).find('.content').html(window['reset' + $(this).attr('id')]);
            });
        }

在 Custombox close() 处重新加载模态：

close: function(){
            $(".modal").each(function () {
                $(this).find('.content').html(window['reset' + $(this).attr('id')]);
            });
        }

更新的小提琴：http://jsfiddle.net/nLhcejsz/6/

现在，这应该按照您的要求运行，模式会忘记单击了哪个缩略图并相应地重置。