Contenu de la boucle Jquery

Question

J'ai un curseur de produit avec chaque diapositive contenant une image. Je veux cliquer sur l'image respective et la charger dans un div à l'extérieur du parent afin qu'il devienne plein écran (dans un modal). Je ne peux pas utiliser un plugin pour ça.

Remarque Je suis chargement HTML séparé pour afficher le modal parce que je dois charger l'image en plein écran en dehors du parent du curseur de sorte qu'il affiche correctement.

Voici ce que j'ai jusqu'à présent, mais il montre que l'un, même 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 1

change HTML

<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: Supprimez les modèles redondants HTML.

JS change

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

S'il vous plaît vérifier démonstration de travail: https://jsfiddle.net/nvk6v6n0/7/

Answer 2

Vous pouvez essayer de donner Id lui.

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