Modal is "remembering" code from previous modals

Question

SETUP
I have a grid of boxes (modal triggers). Each box opens a modal. Inside each modal is a very simple thumbnail gallery of one main image and thumbnails. Clicking a thumbnail replaces the main image with larger version of itself.

PROBLEM (4th step in this sequence...)
(1) Open modal A, main image shows - great!
(2) Click the 2nd thumb in modal A and the main image changes to larger version of that thumb - great!
(3) Close modal A - great!
(4) Open modal B, main image is NOT the 1st thumb for modal B, but it's the larger image of the 2nd thumbnail for modal B - NOT so great! Modal B is remembering that I selected the 2nd thumb from modal A so it is showing the Modal B's 2nd thumb instead of its 1st.

QUESTION
How (and where) do I add code so that the modal "forgets" what was chosen in the last modal? Or resets each time I open a modal? This problem is severe if I choose modal A's 3rd image, but open modal B and it doesn't have a 3rd thumbnail - because the main image will be blank. Do I apply code to the modal or gallery jquery? This is driving me bonkers!

---

MODAL PLUGIN
custombox.js

THUMBNAIL PLUGIN
simplegallery.js

JQUERY TO 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 TO FIRE GALLERY

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

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

EDIT
FIDDLE! FIDDLE! FIDDLE! --> http://jsfiddle.net/zuhloobie/nLhcejsz/

(1) click modal A, see modal main image A1 and thumbs A1 and A2 at right
(2) click on thumb A2, see main image change to A2
(3) close modal A, open modal B
(4) see that main image is B2, not B1 (it remembered the 2nd thumb was clicked in modal A so it is showing 2nd thumb of modal B)

Hope that helps! :)

Answer 1

The Problem is you only set new src values but the image-elements themselves (which are hidden/displayed after a click on the thumbnails) are still in the same state as in the modal before.

I got it working by triggering a click on the first thumb when the modal opens:

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

Updated Fiddle

Answer 2

Could be a hackjob. But have a try. Add this piece of code in the click of .info function:

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

This effectively "resets" the images:

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

Answer 3

I changed the order of your inital .ready() functions and attempted to save the contents of all modals and reload them when Custombox is closed.

EDIT: The non-loading images has been resolved by loading the content on both the open() and close() functions of Custombox.

Grab initial modal content:

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

Load modal at Custombox open():

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

Reload modal at Custombox close():

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

UPDATED FIDDLE: http://jsfiddle.net/nLhcejsz/6/

This should now behave as you are requesting, the modal forgets which thumbnail was clicked and resets accordingly.

Answer 4

I've had the same problem with bootstrap modals. I found for myself a simple and working fix:

$('.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
}

For me a simple .empty() before I load the content did the job.

Answer 5

I have a simple:

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;}