Бесконечная прокрутка изображений товара

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

MaximKAA M
Аватара
MaximKAA M
Репутация: 1
Сообщения: 58
Зарегистрирован: 18.02.2016
С нами: 8 лет 1 месяц

Сообщение #1 MaximKAA » 28.06.2016, 13:32

Доброго времени суток!
Прошу оказать содействие в решении задачи.
Как сделать бесконечную прокрутку изображений в карточке товара? Чтобы изображения по циклу повторялись

m1hasik M
Аватара
m1hasik M
Возраст: 32
Репутация: 31
Сообщения: 200
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Откуда: Днепр
Skype

Сообщение #2 m1hasik » 28.06.2016, 14:00

MaximKAA писал(а):Доброго времени суток!
Прошу оказать содействие в решении задачи.
Как сделать бесконечную прокрутку изображений в карточке товара? Чтобы изображения по циклу повторялись
Добрый день. У доп фото сделать бесконечную прокрутку?
Если так, то нужно вот в этот код нудно добавить строку infinite: true,

Код: Выделить всё

$(".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
            }
         }
      ]
   });
Последний раз редактировалось m1hasik 28.06.2016, 18:09, всего редактировалось 1 раз.

MaximKAA M
Аватара
MaximKAA M
Репутация: 1
Сообщения: 58
Зарегистрирован: 18.02.2016
С нами: 8 лет 1 месяц

Сообщение #3 MaximKAA » 28.06.2016, 14:41

Сделал вот так:

Код: Выделить всё

   /* Инициализация доп. фото в карточке */
   $(".fn-slick-images.okaycms").slick({
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: true,
      responsive: [
         {
            breakpoint: 481,
            settings: {
               slidesToShow: 2
            }
         }
      ]
   });


Не рабоатет

m1hasik M
Аватара
m1hasik M
Возраст: 32
Репутация: 31
Сообщения: 200
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Откуда: Днепр
Skype

Сообщение #4 m1hasik » 28.06.2016, 18:10

MaximKAA писал(а):Сделал вот так:

Код: Выделить всё

   /* Инициализация доп. фото в карточке */
   $(".fn-slick-images.okaycms").slick({
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: true,
      responsive: [
         {
            breakpoint: 481,
            settings: {
               slidesToShow: 2
            }
         }
      ]
   });


Не рабоатет
Ну Вы за доп. фото товара имели в виду, правильно я понял?
Скрин киньте если что, может о разном говорим

MaximKAA M
Аватара
MaximKAA M
Репутация: 1
Сообщения: 58
Зарегистрирован: 18.02.2016
С нами: 8 лет 1 месяц

Сообщение #5 MaximKAA » 28.06.2016, 18:31

m1hasik писал(а):
MaximKAA писал(а):Сделал вот так:

Код: Выделить всё

   /* Инициализация доп. фото в карточке */
   $(".fn-slick-images.okaycms").slick({
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: true,
      responsive: [
         {
            breakpoint: 481,
            settings: {
               slidesToShow: 2
            }
         }
      ]
   });


Не рабоатет
Ну Вы за доп. фото товара имели в виду, правильно я понял?
Скрин киньте если что, может о разном говорим
У товара есть основное фото. Можно добавить дополнительные фото к товару. Необходимо сделать чтобы при открытии фото и просмотре всех фотографий прокрутка не останавливалась а возвращалась к первой фотографии и так бесконечно прокручивалась

m1hasik M
Аватара
m1hasik M
Возраст: 32
Репутация: 31
Сообщения: 200
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Откуда: Днепр
Skype

Сообщение #6 m1hasik » 28.06.2016, 19:25

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}


добавьте тегу img rel="group" у доп фоток, и тогда в фенсибоке они будут прокручиваться

MaximKAA M
Аватара
MaximKAA M
Репутация: 1
Сообщения: 58
Зарегистрирован: 18.02.2016
С нами: 8 лет 1 месяц

Сообщение #7 MaximKAA » 29.06.2016, 05:11

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" у доп фоток, и тогда в фенсибоке они будут прокручиваться

Все равно не работает. Можно листать только влево и вправо а чтобы по циклу после последней возвращалось на основную и дальше на дополнительные не происходит/
На демо Симплы это есть по умолчанию. Открываешь основное фото http://demo.simplacms.ru/products/samsung-s5570-galaxy-mini и автоматически появляются стрелочки прокрутки в обе стороны и можно бесконечно прокручивать в любую сторону

m1hasik M
Аватара
m1hasik M
Возраст: 32
Репутация: 31
Сообщения: 200
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Откуда: Днепр
Skype

Сообщение #8 m1hasik » 29.06.2016, 05:47

MaximKAA, Разобрался, зайдите в файл okay.js в папке дизайн
и найдите код

Код: Выделить всё

/* Зум картинок в карточке */
   $(".fn-zoom.okaycms").fancybox({
      prevEffect: 'fade',
      nextEffect: 'fade',
      loop: false
   });


в нем loop исправьте на true

MaximKAA M
Аватара
MaximKAA M
Репутация: 1
Сообщения: 58
Зарегистрирован: 18.02.2016
С нами: 8 лет 1 месяц

Сообщение #9 MaximKAA » 29.06.2016, 05:58

m1hasik писал(а):MaximKAA, Разобрался, зайдите в файл okay.js в папке дизайн
и найдите код

Код: Выделить всё

/* Зум картинок в карточке */
   $(".fn-zoom.okaycms").fancybox({
      prevEffect: 'fade',
      nextEffect: 'fade',
      loop: false
   });


в нем loop исправьте на true
Тоже дошел уже до okay.js, но вы оказались быстрее :)
Спасибо большое! То, что надо

m1hasik M
Аватара
m1hasik M
Возраст: 32
Репутация: 31
Сообщения: 200
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Откуда: Днепр
Skype

Сообщение #10 m1hasik » 29.06.2016, 06:03

MaximKAA, Если честно, не понимаю зачем это выключили, сам как то не обращал внимания на этот код


Название раздела: Вопросы по работе с OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Вопросы по работе с OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 32 гостя