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

kos0760    2

Для своего сайта своими силами решил сделать миниатюры для слайдшоу 

В интернете нашел, что-то похожее, что мне нужно: в slideshow.tpl заменил:

 

<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: true,
	navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
	pagination: true
});
--></script>

 

на

 

<script type="text/javascript">

var owl;

$(document).ready(function () {

    owl = $('#slideshow<?php echo $module; ?>');

    owl.owlCarousel({
        items: 6,
	autoPlay: 3000,
	singleItem: true,
        slideSpeed: 1300,
        paginationSpeed: 1400,
        afterInit: afterOWLinit // do some work after OWL init
    });    
    
    function afterOWLinit() {

        // adding A to div.owl-page
        $('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');
        $('#slideshow<?php echo $module; ?> .owl-pagination a').click(function() {
        $('#slideshow<?php echo $module; ?>').trigger('slideTo', '#' + this.href.split('#').pop() );
         return false;
        });

        var pafinatorsLink = $('.owl-controls .item-link');
        
        $.each(this.owl.userItems, function (i) {

            $(pafinatorsLink[i])
                // i - counter
                // Give some styles and set background image for pagination item
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
                    '-webkit-background-size': 'cover',
                    '-moz-background-size': 'cover',
                    '-o-background-size': 'cover',
                    'background-size': 'cover'
                })
                // set Custom Event for pagination item
                .click(function () {
                    owl.trigger('owl.goTo', i);
                });

        });         

    };

});

</script>

 

И в owl.carousel.css добавил оформление:

 

 

.owl-theme .owl-controls {
    position: relative;
}
 
.owl-theme .owl-controls .item-link {
    position: relative;
    display: block;
    width: 100px;
    height: 40px;
    margin: 0 2px;
    border-bottom: 4px solid #ccc;
    outline: none;
}
 
.owl-theme .owl-controls .active .item-link {
    border-bottom: 4px solid #cc4895;
}
 
.owl-theme .owl-controls .owl-page span {
    display: none;
}

 

Все получилось так как я хотел. Единственный косяк в том, что при изменении размеров окна браузера миниатюры пропадают. При обновлении страницы снова появляются. Не могу понять, в чем дело.((

Может, кто поможет решить проблему?

Поделиться сообщением


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

Вопрос решен!

после 

afterInit: afterOWLinit // do some work after OWL init

добавляем:

afterUpdate: afterOWLinit // do some work after Update

и миниатюры остаются на месте.

Поделиться сообщением


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

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

Поделиться сообщением


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

Точнее мне надо реализовать миниатюры в карточке товара.

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От Nymphetamine

      650.00 руб
      Скачать/Купить дополнение


      Owl карусель товаров

       
      Особенности:
      Настраиваемая адаптивность товаров. Возможность разбивать карусель на табы. Сенсорные события (свайп-жесты). Слайд события мышкой. Отложенная загрузка картинок (lazy load). Автопрокрутка. Настраиваемая навигация.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам. Случайным.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить все товары, только из определенной категории, или же выборочные товары. Фильтр по производителю - все производители, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо OpenCart 1.5x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru http://automusic.net.ua http://shwkclothing.com http://eudoratex.com Добавил Nymphetamine Добавлено 08.11.2014 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика greenmedia.ua Старая цена 850 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1
      1.5.3.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось  
    • От Nymphetamine

       
      Особенности:
      Настраиваемая адаптивность товаров. Возможность разбивать карусель на табы. Сенсорные события (свайп-жесты). Слайд события мышкой. Отложенная загрузка картинок (lazy load). Автопрокрутка. Настраиваемая навигация.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам. Случайным.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить все товары, только из определенной категории, или же выборочные товары. Фильтр по производителю - все производители, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо OpenCart 1.5x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru http://automusic.net.ua http://shwkclothing.com http://eudoratex.com
    • От Nymphetamine

      250.00 руб
      Скачать/Купить дополнение


      Owl карусель изображений

       
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
      Добавил Nymphetamine Добавлено 02.04.2017 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика greenmedia.ua Старая цена Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От Nymphetamine

       
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
    • От noti


      Просмотреть файл Слайдшоу для OpenCart - адаптивный слайдер с выводом слогана
      Адаптивное слайдшоу для Opencart на основе FlexSlider 2.
      Возможности и преимущества:
      Возможен вывод слогана на слайде из админки. Кнопка для ссылки на сайдере Три анимационных эффекта Сдвиг, Вертикальный сдвиг и Появление. Регулируется интервал времени смены слайдов. Возможно отображение как с нижними миниатюрами изображения так и без них. Задается максимальная ширина слайдера, цвет шрифта, фона слайдера и его расположение. Для вывода слайдеров используются стандартные баннеры. Устанавливается отдельным модулем. Управление пальцами на устройствах с сенсорным экраном. Вес всего 22kb Совместимость с шаблоном AVA Store
      Демо (3 варианта слайдера)
      Демо админки
      Логин demo, пароль demo
       
      Пример #1
      Слайдер с миниатюрами изображений и текстом по центру. Полупрозрачный фон можно убрать совсем и оставить только текст.

       
      Пример #2
      Надпись слайдера можно расположить справа, слева или по центру и задать нужную величину ширины прозрачного слоя.

      Стиль фона текста, стиль текста и кнопок единый для всего слайдера.
      Инструкция по установке в папке Documentation
      Имена файлов и версии движка:
      FlexSlider RB OpenCart 2.3 - для OpenCart 2.3, OcSore 2.3 FlexSlider RB OpenCart 2.2 - для OpenCart 2.2 FlexSlider RB OpenCart 2.0 - для OpenCart 2.0, 2.1, OcSore 2.1 FlexSlider RB OpenCart 1.5 - для OpenCart 1.5, OcSore 1.5 Шаблон на котором установлен слайдер.
      Изменения в версии 2.4.1:
      Добавлены точки, когда превью отключены Добавлена поддержка OpenCart / OcStore 1.5 Изменения в версии 2.3:
      добавлен еще один эффект (вертикальный сдвиг) если указана ссылка на баннере, то появляется кнопка задается текст этой кнопки добавлены опции по стилизации (цвет кнопки, текста, фона и расположение блока) Автор noti Добавлен 16.10.2015 Категория Модули Системные требования Сайт разработчика w-concept.ru Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1
      1.5.3.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х  
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу