Добрый день. У доп фото сделать бесконечную прокрутку?MaximKAA писал(а):Доброго времени суток!
Прошу оказать содействие в решении задачи.
Как сделать бесконечную прокрутку изображений в карточке товара? Чтобы изображения по циклу повторялись
Код: Выделить всё
$(".fn-slick-images.okaycms").slick({
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
swipeToSlide : true,
arrows: true,
responsive: [
{
breakpoint: 481,
settings: {
slidesToShow: 2
}
}
]
});
Код: Выделить всё
/* Инициализация доп. фото в карточке */
$(".fn-slick-images.okaycms").slick({
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 481,
settings: {
slidesToShow: 2
}
}
]
});
Ну Вы за доп. фото товара имели в виду, правильно я понял?MaximKAA писал(а):Сделал вот так:Код: Выделить всё
/* Инициализация доп. фото в карточке */
$(".fn-slick-images.okaycms").slick({
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 481,
settings: {
slidesToShow: 2
}
}
]
});
Не рабоатет
У товара есть основное фото. Можно добавить дополнительные фото к товару. Необходимо сделать чтобы при открытии фото и просмотре всех фотографий прокрутка не останавливалась а возвращалась к первой фотографии и так бесконечно прокручиваласьm1hasik писал(а):Ну Вы за доп. фото товара имели в виду, правильно я понял?MaximKAA писал(а):Сделал вот так:Код: Выделить всё
/* Инициализация доп. фото в карточке */
$(".fn-slick-images.okaycms").slick({
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 481,
settings: {
slidesToShow: 2
}
}
]
});
Не рабоатет
Скрин киньте если что, может о разном говорим
MaximKAA писал(а):У товара есть основное фото. Можно добавить дополнительные фото к товару. Необходимо сделать чтобы при открытии фото и просмотре всех фотографий прокрутка не останавливалась а возвращалась к первой фотографии и так бесконечно прокручиваласьm1hasik писал(а):Ну Вы за доп. фото товара имели в виду, правильно я понял?
Скрин киньте если что, может о разном говорим
Код: Выделить всё
{if $product->images|count > 1}
<div class="row m-y-2 fn-slick-images okaycms">
{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
{foreach $product->images|cut as $i=>$image}
<div class="col-xs-4 col-lg-3">
<a class="fn-zoom okaycms btn-block border-a-1-info text-xs-center product-images" href="{$image->filename|resize:800:600:w}" rel="group">
<img rel="group" src="{$image->filename|resize:87:72}" alt="{$product->name|escape}"/>
</a>
</div>
{/foreach}
</div>
{/if}
m1hasik писал(а):MaximKAA писал(а):У товара есть основное фото. Можно добавить дополнительные фото к товару. Необходимо сделать чтобы при открытии фото и просмотре всех фотографий прокрутка не останавливалась а возвращалась к первой фотографии и так бесконечно прокручивалась
это я не так понял
вот как надоКод: Выделить всё
{if $product->images|count > 1}
<div class="row m-y-2 fn-slick-images okaycms">
{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
{foreach $product->images|cut as $i=>$image}
<div class="col-xs-4 col-lg-3">
<a class="fn-zoom okaycms btn-block border-a-1-info text-xs-center product-images" href="{$image->filename|resize:800:600:w}" rel="group">
<img rel="group" src="{$image->filename|resize:87:72}" alt="{$product->name|escape}"/>
</a>
</div>
{/foreach}
</div>
{/if}
добавьте тегу img rel="group" у доп фоток, и тогда в фенсибоке они будут прокручиваться
Код: Выделить всё
/* Зум картинок в карточке */
$(".fn-zoom.okaycms").fancybox({
prevEffect: 'fade',
nextEffect: 'fade',
loop: false
});
Тоже дошел уже до okay.js, но вы оказались быстрее :)m1hasik писал(а):MaximKAA, Разобрался, зайдите в файл okay.js в папке дизайн
и найдите кодКод: Выделить всё
/* Зум картинок в карточке */
$(".fn-zoom.okaycms").fancybox({
prevEffect: 'fade',
nextEffect: 'fade',
loop: false
});
в нем loop исправьте на true
Вернуться в «Вопросы по работе с OkayCMS»
Сейчас этот раздел просматривают: 27 гостей