egr103 egr103 - 1 month ago 6
jQuery Question

Jquery loop append contents

I have a product slider with each slide containing one image. I want to click the respective image and load it into a div outside of the parent so it becomes full screen (in a modal). I cannot use a plugin for this.

Note
I'm loading separate HTML to display the modal because I have to load the fullscreen image outside of the slider parent so it displays correctly.

Here's what I have so far, but it only shows the one, same image:

// Product modal

// For each slide do something
$( ".product--slider .slide" ).each(function( index ) {
// Show the modal window
$('#product-slider-flickity img').click(function(){
$('.p-image-zoom').toggleClass('md-show');
});
});

// Close the modal
$('.md-close-zoom').click(function() {
$('.p-image-zoom').removeClass('md-show');
});


JsFiddle: https://jsfiddle.net/nvk6v6n0/4/

Answer

HTML changes

<div class="md-modal size-popup p-image-zoom image-1">
  <div class="md-content">
    <div id='imageshow'>
    </div>    
    <button class="md-close-zoom">Close me</button>
  </div>
</div>

Note : Remove redundant models HTML.

JS changes

//Loop through all the slides...
$( ".product--slider .slide" ).each(function( index ) {
        // Show the modal window
    $('#product-slider-flickity img').click(function(){
        //Display clicked image in the modal popup
        $("#imageshow").html('<img src="'+$(this).attr('src')+'"/>');
      $('.p-image-zoom').toggleClass('md-show');      
    }); // Show the modal window
});

Please check working demo : https://jsfiddle.net/nvk6v6n0/7/