Jquery loop append Inhalt

Question

Ich habe einen Produktschieberegler mit jeder Folie, die ein Bild enthält. Ich möchte auf das jeweilige Bild klicken und es in ein div außerhalb des Elterns laden, so dass es Vollbild (in einem modalen) wird. Ich kann dafür kein Plugin verwenden.

Hinweis Ich lade separate HTML die modal angezeigt werden, weil ich die Vollbild-Bild außerhalb des Schiebers Eltern zu laden haben, damit es richtig angezeigt wird.

Hier ist, was ich bisher habe, aber es zeigt nur die eine, gleiche Bild:

// 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 1

HTML ändert

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

Hinweis: Entfernen Sie redundante Modelle HTML.

JS ändert

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

Bitte überprüfen Sie arbeiten Demo: https://jsfiddle.net/nvk6v6n0/7/

Answer 2

Sie können mit dem Geben Id es versuchen.

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