模态是 "remembering" 以前模态的代码

Question

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

问题（此序列中的第 4 步...）
(1) 打开模态A，主图显示-太棒了！
(2) 单击模态 A 中的第二个拇指，主图像变为该拇指的放大版本 - 太棒了！
(3) 关闭模态 A - 太棒了！
(4) 打开模态 B，主图像不是模态 B 的第一个缩略图，而是模态 B 的第二个缩略图的大图 - 不太好！模态 B 记住我从模态 A 中选择了第二个拇指，因此它显示了模态 B 的第二个拇指而不是第一个拇指。

问题
我如何（以及在哪里）添加代码，以便模态 "forgets" 在最后一个模态中选择了什么？或者每次我打开模式时都重置？如果我选择模态 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

我在使用 bootstrap 模态时遇到了同样的问题。我为自己找到了一个简单有效的修复方法：

$('.info').on('click', function (e) {
    $(".modal-body").empty(); 
    // Don't know which element should be empty in your example
    // After the empty(), I load the content I need
}

对我来说，一个简单的 .empty() before 我加载内容就完成了工作。

Answer 2

问题是您只设置了新的 src 值，但图像元素本身（单击缩略图后 hidden/displayed ）仍处于与之前模式相同的状态.

我通过在模式打开时触发第一个拇指的点击来让它工作：

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

Updated Fiddle

Answer 3

可能是一个黑客工作。但试一试。在.info函数的click中加入这段代码：

$(".content img").hide(0, function () {
    $(".image_1").show();
});

这实际上 "resets" 图片：

Fiddle: http://jsfiddle.net/praveenscience/nLhcejsz/2/

Answer 4

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

编辑：非加载图像已通过在自定义框的 open() 和 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')]);
            });
        }

在自定义框关闭时重新加载模式：

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

已更新 FIDDLE：http://jsfiddle.net/nLhcejsz/6/

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

Answer 5

我有一个简单的：

let preventNoMultiple = true;
$('.modal').modal();
$('.Modal').on('shown.bs.modal', function (event) {
  if(preventNoMultiple){// ...do something}
});
$('.Modal').on('hidden.bs.modal', function (event) {preventNoMultiple = false;}

模态是 "remembering" 以前模态的代码

Modal is "remembering" code from previous modals

jquery

modal-dialog

thumbnails

image-gallery