CODEWITHSUNDEEP
javascriptjquerycssmodal-dialogimage-gallery
egr103
egr103

Reputation: 3978

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/

Upvotes: 1

Views: 148

Answers (2)

Rahul Patel
Rahul Patel

Reputation: 5246

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/

Upvotes: 1

priya_singh
priya_singh

Reputation: 2488

You can try with giving Id to it.

Jsfiddle

 $( ".product--slider .slide" ).each(function( index ) {
   $('#product-slider-flickity img').click(function(){
      var id= $(this).parent().attr("id");
      $('.'+id+'.p-image-zoom').toggleClass('md-show');
      $('.'+id+'.p-image-zoom').siblings(".md-modal").removeClass("md-show");
   });

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

Upvotes: 0

Related Questions