Питання Модаль - це "запам'ятовування" коду з попередніх модалів


SETUP
У мене є сітки ящиків (модальні тригери). Кожна коробка відкриває модаль. Всередині кожного модала - це дуже проста галерея мініатюр одного головного зображення та ескізів. Натискання ескіза замінює основне зображення з більшою його версією.

ПРОБЛЕМА (Четвертий крок у цій послідовності ...)
(1) Відкрити модаль А, основне зображення показує - чудово!
(2) Клацніть 2-го великого пальця в модалі A, а основне зображення змінюється на велику версію цього великого пальця - чудово!
(3) Закрити модальний А - чудово!
(4) Відкритий модуль В, основне зображення НЕ є першим великим пальцем для модального В, але це велике зображення другого ескізу для модального В - НЕ так чудово! Модаль Б пам'ятає, що я вибрав другий великий палець на модалі А, тому він показує 2-й великий палець Modal B, а не 1-й.

ПИТАННЯ
Як (і де) додати код, щоб модаль "забув" те, що було вибрано в останньому модалі? Або скидає кожен раз, коли я відкриваю модаль? Ця проблема важка, якщо я вибрав третє зображення Modal A, але відкритий модальний варіант B, і він не має третього ескізу - тому що основне зображення буде порожнім. Чи можу я застосувати код до модального або галереї jquery? Це заважає мені бонитися!


МОДАЛЬНИЙ ПЛЮГИН
custombox.js

ГОЛОВНА ПЛЮГИН
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();
    });
});

ДЖЕРЕЛА ДО ОГОЛОШЕННЯ ГАЛЕРЕЇ

$(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) клацніть модаль А, перегляньте модальне головне зображення A1 та палець A1 та A2 справа
(2) натисніть на великий палець A2, див. Основне змінення зображення на A2
(3) закритий модальний A, відкритий модальний B
(4) бачимо, що основним зображенням є B2, а не B1 (він згадав, що другий великий палець був натиснуто в модальному форматі A, тому він показує 2 великих пальців модального B)

Надія, що допомагає! :)


10
2017-07-21 23:09


походження


Bueller .... Bueller ... - chris
Чи не те ж питання, про яке ви вже запитали раніше: stackoverflow.com/questions/31305037/... ? - Dekel
Ні - інше. Це було пов'язано з збільшенням. Це крок вище, про спорожнення модального або очищення кеш-пам'яті або скидання коду перед його відкриттям. - chris
Я не знаю custombox, але може мати кілька екземплярів? Якщо ні, проблема може полягати в тому, що у вас є кілька елементів із модальним класом. - schellingerht
Так, він може мати кілька екземплярів. Опубліковано скрипку: jsfiddle.net/zuhloobie/nLhcejsz - chris


Відповіді:


Я змінив порядок своїх початкових функцій .ready () і намагався зберегти вміст усіх модалів та перезавантажувати їх, коли Custombox закрито.

EDIT: зображення, що не завантажуються, було вирішено шляхом завантаження вмісту на обох сторінках open() і close() функції Custombox.

Захоплення вихідного модального вмісту:

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

Відкрити модаль для завантаження за замовчуванням ():

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')]);
            });
        }

ОНОВЛЕНО ФІДДЕ: http://jsfiddle.net/nLhcejsz/6/

Тепер це має поводитися, як ви запитуєте, модуль забуває про те, яке мініатюру було натиснуто і відповідним чином скинуто.


3
2017-07-30 20:49



Я люблю цю ідею ... але у мене виникають проблеми зі стрільбою, чому ці зображення не завантажуються: / - chris
Я знову йду до нього, щоб побачити, що я можу зробити. Я впевнений, що це стане чимось простим. - Glen Despaux Jr
Будь ласка, перегляньте оновлену відповідь, вона зараз працює для мене. - Glen Despaux Jr
Ідеальний! Дякую ТОЧНО, @Glen. Дійсно ціную це :) - chris
Чудово! Рада, що мені вдалося допомогти! - Glen Despaux Jr


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

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

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

Оновлено Fiddle


4
2017-07-29 14:12



Мені це подобається, але чи можна повністю скинути весь модальний вміст на модальний відкритий зворотний виклик? Як порожній і перезавантажити його натисканням? - chris
Тоді використовуйте open функція до empty() модаль і заповніть його знову за допомогою розмітки html(). Я не розумію, чому ви хотіли б перезавантажити його. Так, запропоноване рішення - це злак, але це працює. - sydeslyde
Як я вже згадував у повідомленні Jeroen, я можу лише звільнити його - не можу перезавантажити його. Я думав, спорожнити його і перезавантажити це був "правильний" спосіб зробити це. Це також було запропоновано автором плагіна, я просто не зміг перезавантажити його? - chris
UPDATE: це не працює. Це не вдається, коли ви намагаєтеся відкрити Modal C. Якщо ви відкриваєте Modal B і клацніть на великому пальці B2 ... потім закрийте Modal B і відкрийте Modal C - основне зображення порожнє. Ваша відповідь буде працювати тільки в тому випадку, якщо Modals матимуть однакову кількість мініатюр - що не буде таким. - chris


Може бути хакерів. Але спробуйте. Додати цей фрагмент коду в click від .info функція:

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

Це фактично "скидає" зображення:

Скрипка: http://jsfiddle.net/praveenscience/nLhcejsz/2/


3
2017-07-29 14:28



Чи можна повністю скинути весь модальний вміст на модальний відкритий зворотний виклик? Як порожній і перезавантажити його натисканням? - chris
Ваша відповідь є, по суті, такою ж відповіддю, про яку я вже говорив, що я спробував у своїй відповіді на Jeroen за 3 дні до того, як ви опублікували це. - chris
@chris Але це було щось про те, щоб зробити його порожнім, це так? - Praveen Kumar Purushothaman
Моя перевага полягає в тому, щоб вийти з модального вмісту та перезавантажити його. Якщо це не спрацює, тоді мені доведеться вдаватися до приховування / показу зображень, як я вже згадував, що я зробив і працював у пост Джереена. - chris


У мене проблема з завантажувальними модулями була такою ж. Я знайшов собі простий і робочий виправлення:

$('.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()  раніше Я завантажую вміст, виконуючи завдання.


1
2017-07-24 12:39



Я хотів би повністю очистити весь вміст модуля перед завантаженням (використовуючи openback callback custombox.js) ... і я можу це зробити, використовуючи .empty(), але це просто випадає ... це не завантажує вміст - chris
Найближче, що я отримав, було додати це до зворотного виклику: $('.image_1').hide(); і потім $('.image_1').show(); до відкритого зворотного виклику. Відчуваєш нерозумно Я насправді не знаю, чому це працює, але я думаю, що це робить. Якщо є кращий спосіб, я всі вуха ... - chris
Але я краще забув вміст модала та перезавантажив його модальним відкритим, ніж налаштування окремих частин у рамках модала, оскільки він охоплюватиме інші потенційні проблеми. - chris
Будь-який шанс, що ви могли б зробити jsfiddle? - Jeroen Bellemans
FIDDLE! jsfiddle.net/zuhloobie/nLhcejsz. Намагався зробити це дещо зрозумілим. Дотримуйтесь послідовності, наведеної у питанні, зверху. - chris