Перейти к содержанию
Официальный форум поддержки Simpla

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


Рекомендуемые сообщения

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

 

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

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

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

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

 

Как сам скрипт устроен я понимаю , а как это интегрировать в код вывода не понятно.

 

Стандартный код:

PS/ У меня в этом был вопрос

 

<!-- Большое фото -->
	{if $product->image}
	<div class="image">
		<a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
	</div>
	{/if}
<!-- Большое фото (The End)-->

<!-- Дополнительные фото продукта -->
	{if $product->images|count>1}
	<div class="images">
		{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
		{foreach $product->images|cut as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
	</div>
	{/if}
<!-- Дополнительные фото продукта (The End)-->

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

Ссылка на сообщение
Поделиться на другие сайты

Если понимаете как устроен скрипт, проблем интегрировать в дизайн не должно быть

В HTML все обычно. 

Но для работы галереи нужно уникальный id картинки , а так как главное и доп изображение обрабатывается по отдельности как этого добиться ?

 

Можете подсказать на примере: 

<!-- Большое фото -->
	{if $product->image}
	<div class="image">
		<a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
	</div>
	{/if}
<!-- Большое фото (The End)-->

<!-- Дополнительные фото продукта -->
	{if $product->images|count>1}
	<div class="images">
		{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
		{foreach $product->images|cut as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
	</div>
	{/if}
<!-- Дополнительные фото продукта (The End)-->
Ссылка на сообщение
Поделиться на другие сайты
    {if $product->images}
   <div class="product-carousel owl-carousel owl-loaded owl-drag">
    
        {foreach $product->images as $i=>$image name=foo}
            <a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group" data-hash="one_{$smarty.foreach.foo.iteration}">

<img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
        {/foreach}
    </div>
    {/if}

 

часть кода  вторая часть по аналогии

Изменено пользователем shooroop
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...