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

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

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

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

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


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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти

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

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


      OWL Карусель Изображений

       
       
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо OpenCart 3x
      Демо
      Админка - логин и пароль: demo
       
      Добавил Nymphetamine Добавлено 02.04.2017 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика Старая цена 450 Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От Nymphetamine
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо OpenCart 3x
      Демо
      Админка - логин и пароль: demo
       
    • От Pavel666
      Обнаружил баг в модуле слайдшоу, кнопки навигации вынесены за пределы блока с идентификатором модуля, в следствии чего при размещении нескольких блоков на странице, вешается несколько обработчиков на кнопки навигации и перелистываются все слайды на странице
      исходный код модуля slideshow.twig
       
      Как должно быть
       
      И аналогично файл carousel.twig
       
    • От 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)
  • Последние посетители   0 пользователей онлайн

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

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.