Перейти к содержимому


Фото
- - - - -

Галерея доп. изображений в карточке товара

фото товара

  • Чтобы отвечать, сперва войдите на форум
2 ответов в теме

#1 y2507

y2507
  • Пользователь
  • 13 сообщений
  • Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 08.11.2019 - 18:03

Добрый вечер.

 

Как в карточке товара организовать переключение главного фото по миниатюре как здесь.

https://demo.createx.studio/createx/shop-single.html

Там нужно вывести как то через id image но не работает, кто то делал такую штуку.

 

Заранее спасибо



#2 shooroop

shooroop
  • Фрилансер
  • 975 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 08.11.2019 - 18:35

обыкновенный скрип это делает https://kenwheeler.github.io/slick/   вариант Slider Syncing



#3 alexivchenko

alexivchenko
  • Пользователь
  • 66 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Курск

Опубликовано 08.11.2019 - 19:24

В JS не селен, так что выкладываю, что вытянул из оригинала и работает 

	<script>
! function(l) {
    "use strict";
    var i = "body",
        o = window,
        e = document,
        t = {
            init: function() {
                t.productGallery()
            },
            productGallery: function(t) {
                l(t = ".product-carousel").length && l(t).owlCarousel({
                    items: 1,
                    loop: !1,
                    dots: !1,
                    URLhashListener: !0,
                    startPosition: "URLHash",
                    onTranslate: function(t) {
                        var a = t.item.index,
                            e = l(".owl-item").eq(a).find("[data-hash]").attr("data-hash");
                        l(".product-thumbnails li").removeClass("active"), l('[href="#' + e + '"]').parent().addClass("active"), l('[data-hash="' + e + '"]').parent().addClass("active")
                    }
                })
            }
        };
    l(function() {
        t.init()
    })
}(jQuery);



	</script>

Сам не разобрался только с var = и откуда l берется, если делать по правилам

 

	<script>
	$(document).ready(function() {

  $(".product-carousel").owlCarousel({
    items : 1,
	loop: false,
	dots: false,
	URLhashListener: true,
	startPosition: "URLHash",
                    onTranslate: function(t) {
                        var a = t.item.index,
                            e = l(".owl-item").eq(a).find("[data-hash]").attr("data-hash");
                        l(".product-thumbnails li").removeClass("active"), l('[href="#' + e + '"]').parent().addClass("active"), l('[data-hash="' + e + '"]').parent().addClass("active")
                    }
  });

 
});



	</script>

 

Ну и код вывода 

<div class="product-gallery">
	<div class="product-carousel owl-carousel owl-loaded owl-drag">
	<a class="gallery-item" href="img/01.jpg" data-fancybox="gallery1" data-hash="one"><img src="img/01.jpg" alt="Product"></a>
	<a class="gallery-item" href="img/02.jpg" data-fancybox="gallery1" data-hash="two"><img src="img/02.jpg" alt="Product"></a>
	<a class="gallery-item" href="img/03.jpg" data-fancybox="gallery1" data-hash="three"><img src="img/03.jpg" alt="Product"></a>
	<a class="gallery-item" href="img/04.jpg" data-fancybox="gallery1" data-hash="four"><img src="img/04.jpg" alt="Product"></a>
	</div>
	<ul class="product-thumbnails">
		<li class=""><a href="#one"><img src="img/th01.jpg" alt="Product"></a></li>
        <li class=""><a href="#two"><img src="img/th02.jpg" alt="Product"></a></li>
        <li class=""><a href="#three"><img src="img/th03.jpg" alt="Product"></a></li>
        <li class=""><a href="#four"><img src="img/th04.jpg" alt="Product"></a></li>
        <li><a class="navi-link text-sm" href="https://www.youtube.com/embed/CjNjcrQZtd8" data-fancybox="" data-width="960" data-height="640"><i class="fe-icon-video text-lg d-block mb-1"></i>Watch Video</a></li>
    </ul>
</div> 

Стили 

.product-gallery {
    position: relative;
    padding: 2.75rem 1rem 0;
    -webkit-box-shadow: 0 0.75rem 1.25rem 0.0625rem rgba(64,64,64,0.09);
    box-shadow: 0 0.75rem 1.25rem 0.0625rem rgba(64,64,64,0.09);
}
.gallery-item {
    display: block;
    position: relative;
    width: 100%;
    -webkit-transition: -webkit-box-shadow .35s .12s;
    transition: -webkit-box-shadow .35s .12s;
    transition: box-shadow .35s .12s;
    transition: box-shadow .35s .12s, -webkit-box-shadow .35s .12s;
    color: #fff;
    text-decoration: none;
}
img, figure {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.product-gallery .product-thumbnails {
    display: block;
    margin: 0 -1rem;
    padding: .75rem;
    border-top: 1px solid #e7e7e7;
    list-style: none;
    text-align: center;
}
.product-gallery .product-thumbnails>li {
    display: inline-block;
    margin: .625rem .1875rem;
    vertical-align: middle;
}
.product-gallery .product-thumbnails>li.active>a {
    border-color: #ac32e4;
    cursor: default;
    opacity: 1;
}
.product-gallery .product-thumbnails>li>a {
    display: block;
    width: 94px;
    -webkit-transition: all .25s;
    transition: all .25s;
    border: 1px solid transparent;
    background-color: #fff;
    opacity: .75;
}
.product-gallery .product-thumbnails>li>a>img {
    display: block;
}

 

Демо http://simpla2x.ru/owl/







Также с меткой «фото товара»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых