y2507 Опубликовано 8 ноября, 2019 Жалоба Поделиться Опубликовано 8 ноября, 2019 Добрый вечер. Как в карточке товара организовать переключение главного фото по миниатюре как здесь. https://demo.createx.studio/createx/shop-single.html Там нужно вывести как то через id image но не работает, кто то делал такую штуку. Заранее спасибо Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 8 ноября, 2019 Жалоба Поделиться Опубликовано 8 ноября, 2019 обыкновенный скрип это делает https://kenwheeler.github.io/slick/ вариант Slider Syncing Цитата Ссылка на сообщение Поделиться на другие сайты
alexivchenko Опубликовано 8 ноября, 2019 Жалоба Поделиться Опубликовано 8 ноября, 2019 В 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/ Цитата Ссылка на сообщение Поделиться на другие сайты
y2507 Опубликовано 10 декабря, 2019 Автор Жалоба Поделиться Опубликовано 10 декабря, 2019 В 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)--> Заранее спасибо Цитата Ссылка на сообщение Поделиться на другие сайты
alexivchenko Опубликовано 10 декабря, 2019 Жалоба Поделиться Опубликовано 10 декабря, 2019 Если понимаете как устроен скрипт, проблем интегрировать в дизайн не должно быть Цитата Ссылка на сообщение Поделиться на другие сайты
y2507 Опубликовано 10 декабря, 2019 Автор Жалоба Поделиться Опубликовано 10 декабря, 2019 Если понимаете как устроен скрипт, проблем интегрировать в дизайн не должно бытьВ 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)--> Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 10 декабря, 2019 Жалоба Поделиться Опубликовано 10 декабря, 2019 (изменено) {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} часть кода вторая часть по аналогии Изменено 10 декабря, 2019 пользователем shooroop Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.