Блог

У меня есть слайдер продукта, каждый слайд которого содержит одно изображение. Я хочу щелкнуть соответствующее изображение и загрузить его в div за пределами родительского элемента, чтобы оно стало полноэкранным (в модальном режиме). Я не могу использовать плагин для этого.

Примечание Я загружаю отдельный HTML-код для отображения модального, потому что мне нужно загрузить полноэкранное изображение за пределами родительского слайдера, чтобы оно отображалось правильно.

Вот что у меня есть на данный момент, но оно показывает только одно и то же изображение:

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

Изменения в 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>
  

Примечание: Удалите избыточные модели HTML.

Изменения JS

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

Пожалуйста, проверьте рабочую демонстрацию:https://jsfiddle.net/nvk6v6n0/7 /

Вы можете попробовать присвоить ему идентификатор.

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