не правильное отображение картинки при нажатии главной картинки

Question

Подключил xzoom.

Добавил карусель owl.carousel для прокрутки картинок.

Для того чтобы просматривать в полный экран подключил magnific-popup

проблема состоит в том, что когда выбираешь любую картинку в карусели и нажимаешь пкм на основную картинку в полноэкранном режиме, всегда отображается первая картинка вместо той картинки по которой кликнул

пробовал подключить fancybox и это ни как не повлияло на результат

(function($) {
  $(document).ready(function() {
    $(".thumb-xzoom, .xzoom-gallery").xzoom({
      tint: '#006699',
      Xoffset: 15
    });


    $('#thumb-click').on('click', function(event) {
      var xzoom = $(this).data('xzoom');
      xzoom.closezoom();

      var gallery = xzoom.gallery().ogallery;
      var index = xzoom.gallery().index;

      var i, images = new Array();
      for (i in gallery) {
        images[i] = {
          src: gallery[i]
        };
      }

      $.magnificPopup.open({
        items: images,
        type: 'image',
        gallery: {
          enabled: true
        }
      });
      event.preventDefault();
    });


    /** OWL CAROUSEL**/
    $(".owl-carousel").each(function(index, el) {
      var config = $(this).data();
      config.navText = [
        '<svg width="35" height="35" style="fill: #a6acac;" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>',
        '<svg width="35" height="35" style="fill: #a6acac;" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'
      ];
      config.smartSpeed = "300";
      if ($(this).hasClass('owl-style2')) {
        config.animateOut = "fadeOut";
        config.animateIn = "fadeIn";
      }
      $(this).owlCarousel(config);
    });


  });
})(jQuery);

.gallery-image{
    max-width: 550px;
    background: antiquewhite;
}

.img-thumb {
    padding: 0 40px; 
}

.img-thumb ul {
    list-style: none;
}

.img-thumb ul{
    background: transparent;
    border: 0 none;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
}

.img-thumb .xzoom-thumbs {
    padding-top: 20px;
    padding-left: 0;
}

.xzoom-thumbs li{ display: inline-block; }

.img-thumb .li-galer img {
    width: 89px;
}
.li-galer{
    margin-right: 2px;
}

.owl-carousel .item{
    background: #eaeaea;
}

.img-thumb li{
    border: 1px solid #eaeaea;
    padding: 0px;
}


.owl-carousel:hover .owl-prev{  left: 0;  }
.owl-carousel:hover .owl-next{  right: 0; }
.owl-carousel:hover .owl-prev, .owl-carousel:hover .owl-next{
    opacity: 1;
    visibility: inherit;
}

.owl-nav .owl-prev{  left: 0; }
.owl-nav .owl-next{  right: 0; }
.owl-nav .owl-prev, .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.gallery-image .img-thumb .owl-next { right: -40px;}
.gallery-image .img-thumb .owl-prev { left: -40px; }

.owl-nav .owl-prev, .owl-nav .owl-next{
    background: #eaeaea;
    width: 35px;
    height: 35px;
    color: #ccc;
    text-align: center;
    padding-top: 4px;
}
.owl-nav .owl-prev .fa, .owl-nav .owl-next .fa{
    font-weight: bold;
}

.owl-nav.owl-prev:hover, .owl-nav .owl-next:hover{
    background: #ff3366;
    color: #fff;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>xZoom and own-carousel</title>
  <link type="text/css" rel="stylesheet" media="all" href="https://unpkg.com/xzoom/dist/xzoom.css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <!-- Add Magnific Popup -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

  <!-- Add owl.carousel -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

  <script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>

</head>

<body>
<div style="text-align:center;">
    <div class="xzoom-container gallery-image">

        <div class="img-full">
            <a href="gallery/preview/01_b_car.jpg">
                <div class="img-full-thumb">
                    <img id="thumb-click" class="thumb-xzoom" src="https://falge.ru/uploads/gallery/preview/01_b_car.jpg" xoriginal="https://falge.ru/uploads/gallery/original/01_b_car.jpg" />
                </div>
            </a>
        </div>

        <div class="img-thumb">
            <ul class="owl-carousel xzoom-thumbs" data-items="4" data-nav="true" data-dots="true" data-margin="20" data-loop="true">
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/01_b_car.jpg"><img class="xzoom-gallery xactive" src="https://falge.ru/uploads/gallery/preview/01_b_car.jpg" title="01_b_car" alt="01_b_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/02_o_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/02_o_car.jpg" title="02_o_car" alt="02_o_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/03_r_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/03_r_car.jpg" title="03_r_car" alt="03_r_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/04_g_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/04_g_car.jpg" title="04_g_car" alt="04_g_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/05_g_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/05_g_car.jpg" title="05_g_car" alt="05_g_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/06_g_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/06_g_car.jpg" title="06_g_car" alt="06_g_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/07_g_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/07_g_car.jpg" title="07_g_car" alt="07_g_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/08_g_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/08_g_car.jpg" title="08_g_car" alt="08_g_car" /></a>
                </li>
                <li class="li-galer">
                    <a href="https://falge.ru/uploads/gallery/original/09_g_car.jpg"><img class="xzoom-gallery" src="https://falge.ru/uploads/gallery/preview/09_g_car.jpg" title="09_g_car" alt="09_g_car" /></>
                </li>
            </ul>
        </div>
        
    </div>
</div>
</body>

</html>

БЛОГ НА HUSL

не правильное отображение картинки при нажатии главной картинки

Ответы (0 шт):