Перейти к содержанию

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

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

В интернете нашел, что-то похожее, что мне нужно: в 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;
}

 

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

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

  • +1 1

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


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

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

после 

afterInit: afterOWLinit // do some work after OWL init

добавляем:

afterUpdate: afterOWLinit // do some work after Update

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

  • +1 1

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


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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти

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

    • От iDiy
      395.00 руб
      Скачать/Купить дополнение


      Адаптивное Слайдшоу
      Адаптивное Слайдшоу (responsive slideshow)
      Особенности:
      Мультиязычное HTML описание баннеров Мультиязычные изображения, ссылки баннеров, статус, порядок сортировки Поддержка сенсорных устройств (Touch Swipe) Управление колесиком мыши (mousewheel) Произвольные миниатюры Автопросмотр, таймер и прочее... Модуль не заменяет системных файлов и не требует vQmod.
       
      Демонстрация: YO-Слайдшоу
      Админ демо (логин/пароль: demo / demo)
      Добавил iDiy Добавлено 07.12.2013 Категория Модули Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 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 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 OpenCart.Pro, ocShop OcShop 1.5.6.4.х  
    • От iDiy
      Адаптивное Слайдшоу (responsive slideshow)
      Особенности:
      Мультиязычное HTML описание баннеров Мультиязычные изображения, ссылки баннеров, статус, порядок сортировки Поддержка сенсорных устройств (Touch Swipe) Управление колесиком мыши (mousewheel) Произвольные миниатюры Автопросмотр, таймер и прочее... Модуль не заменяет системных файлов и не требует vQmod.
       
      Демонстрация: YO-Слайдшоу
      Админ демо (логин/пароль: demo / demo)
    • От mrz
      Скачать/Купить дополнение


      Смена эффектов слайдшоу(ocmod)
      Дополнение позволяет устанавливать эффекты смены слайдов в модуле Слайдшоу.
      Совместимость
      opencart/ocstore 2.x
      Добавил mrz Добавлено 11.01.2016 Категория Модули  
    • От noti
      300.00 руб
      Скачать/Купить дополнение


      Слайдшоу для 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.х  
    • От dimondubna
      300.00 руб
      Скачать/Купить дополнение


      Универсальный слайдер SuperSlider
      Модуль слайдшоу базирующийся на jQuery и плагине easing с возможностью прокрутки слайдов с помощью колесика мышки.
      4 вида отображения - меняются в настройках модуля в админке (для каждого из видов - отдельный файл css, который вы можете подредактировать под свой шаблон)
      Поддержка многоязычности (рус. и англ. языковые файлы)
      ДЕМО нескольких вариантов использования слайдера:
      Вариант 1 - http://slider.gotovzakaz.ru
      Вариант 2 - http://slider.gotovzakaz.ru/index.php?route=product/category&path=20
      Вариант 3 - http://slider.gotovzakaz.ru/index.php?route=information/information&information_id=4
      Вариант 4 - http://slider.gotovzakaz.ru/index.php?route=product/product&manufacturer_id=5&product_id=28
      Совместимость: Модуль тестировался на ocstore 1.5.5.1.2 и opencart 1.5.6.4. Но должен работать и на других версиях ocstore/opencart. В случае возникновения проблем или вопросов, свяжитесь с автором модуля через ЛС.
      Плановые доработки плагина: Будет добавлена возможность использования нескольких слайдеров разного вида на одной странице (пока по техническим причинам возможно использование только одного модуля SuperSlider на странице). Кому эта возможность крайне необходима - следите за обновлениями.
      Добавил dimondubna Добавлено 09.09.2014 Категория Слайдшоу, баннеры, галереи  
  • Последние посетители   0 пользователей онлайн

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

×