Модаль - это "запоминание" кода из предыдущих модалов

НАСТРОЙКИ
У меня есть сетка ящиков (модальные триггеры). Каждая коробка открывает модальную форму. Внутри каждого модала есть очень простая миниатюрная галерея одного основного изображения и миниатюр. Нажатие миниатюры заменяет основное изображение самой большой версией.

ПРОБЛЕМА (4-й шаг в этой последовательности...)
(1) Open modal A, основное изображение показывает - отлично!
(2) Нажмите второй палец в модальном A, и основное изображение изменится на большую версию этого большого пальца - отлично!
(3) Закрыть модальный A - отлично!
(4) Open modal B, основное изображение НЕ является 1-м большим пальцем для модального B, но это более крупное изображение второго миниатюры для модального B - НЕ так здорово! Modal B помнит, что я выбрал второй палец с модального A, чтобы он показывал Modal B 2nd thumb, а не первый.

Вопрос
Как (и где) добавить код, чтобы модальный "забыл" то, что было выбрано в последнем модальном? Или сбрасывается каждый раз, когда я открываю модальный? Эта проблема серьезная, если я выбираю модальное 3-е изображение, но открываю модальный B, и у него нет третьего эскиза - потому что основное изображение будет пустым. Я использую код для модального или jQuery галереи? Это приводит меня в бешенство!

MODAL PLUGIN
custombox.js

THUMBNAIL PLUGIN
simplegallery.js

СОКРАЩЕНИЕ В ПОЖАРНОМ МОДЕЛИ

$(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 TO FIRE GALLERY

$(document).ready(function(){
    $('#gallery').simplegallery({
        galltime : 1000, // transition delay
        gallcontent: '.content',
        gallthumbnail: '.thumbnail',
        gallthumb: '.thumb',
    });
});

ПРИМЕР MODAL

<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)

Надеюсь, что это поможет!:)

Ответ 1

Я изменил порядок ваших функций inital.ready() и попытался сохранить содержимое всех модалов и перезагрузить их, когда Custombox закрыт.

ИЗМЕНИТЬ. Негрузовые изображения были разрешены путем загрузки содержимого в функции open() и close() Custombox.

Захватить начальный модальный контент:

$(".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')]);
            });
        }

ОБНОВЛЕНО FIDDLE: http://jsfiddle.net/nLhcejsz/6/

Теперь это должно вести себя так, как вы запрашиваете, модально забывает, какая эскиз нажата и сбрасывается соответственно.

Ответ 2

Проблема заключается в том, что вы устанавливаете только новые значения src, но сами элементы изображения (которые скрыты/отображаются после щелчка по эскизам) все еще находятся в том же состоянии, что и в модальном формате.

Я получил его работу, нажав на первый палец, когда модаль открывается:

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

Обновлен скрипт

Ответ 3

Может быть взломан. Но попробуйте. Добавьте этот фрагмент кода в click функции .info:

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

Это эффективно "сбрасывает" изображения:

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

Ответ 4

У меня была такая же проблема с моделями 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() до. Я загружаю содержимое, выполнив задание.