Скролинг дополнительных изображений в карточке товара с помощью owl

[19th 17]

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php

где-нибудь после

$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css');

добавляем

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');

 

2) \catalog\view\theme\default\template\product\product.tpl

2.1) в начало файла

<style>
#owl-demo .item{
  padding: 1px 1px;
  margin: 1px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.customNavigation{
  text-align: center;
}
.customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.owl-carousel .owl-buttons .owl-prev{
left:1px !important;
opacity: 0.4 !important;
}
.owl-carousel .owl-buttons .owl-next{
right:1px !important;
opacity: 0.4 !important;
}
.owl-carousel:hover .owl-buttons div{
opacity:0.7 !important;
}
</style>

2.2 в конец, в скрипты

 $(document).ready(function() {
     
      var owl = $("#owl-demo");
     
      owl.owlCarousel({
          items : 3, 
          itemsDesktop : [1000,3], 
          itemsDesktopSmall : [900,3], 
          itemsTablet: [600,2], 
          itemsMobile : false, 
		  navigation : true,
		  navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
		  pagination: false
      }); 
    });

2.3 вывод дополнительных картинок

<?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>

меняем на

<?php if ($images) { ?>
				<div id="owl-demo" class="owl-carousel owl-theme">
					<?php foreach ($images as $image) { ?>
						<div class="item">
							<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
						</div>
					<?php } ?>
				</div>
      <?php } ?>

 

[19th 17]

еще подсказали, меняем:

img src=

на:

img class="lazyOwl" data-src=

class="lazyOwl"  -  справедливо для owl версий 1.3.2(3), для других версий уточнять. Что дает: Картинки загружаются не сразу, а по мере необходимости (видимости), что облегчает вес страницы и увеличивает скорость её загрузки.

[Adems 9]

В 19.02.2016 at 08:35, 19th сказал:

еще подсказали, меняем:

img src=

на:

img class="lazyOwl" data-src=

class="lazyOwl"  -  справедливо для owl версий 1.3.2(3), для других версий уточнять. Что дает: Картинки загружаются не сразу, а по мере необходимости (видимости), что облегчает вес страницы и увеличивает скорость её загрузки.

Не подскажете какой класс для 2.1

[dadx 0]

Подскажите а как сделать чтобы при нажатии на миниатюру менялось основное изображение, а не открывалось больше? Буду ооочень благодарен.