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

[19th]

В стандартном шаблоне 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]

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

img src=

на:

img class="lazyOwl" data-src=

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

[Adems]

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

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

img src=

на:

img class="lazyOwl" data-src=

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

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

[dadx]

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

[kusttt]

В 18.02.2016 at 13:37, 19th сказал:

<?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 } ?>

Второй день "воюю". Может поможет кто, как адаптировать код с отображением превьюшек ниже...

<li class="row">
										<div class="image-additional col-xs-3 col-sm-2">
											<a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" data-thumb="<?php echo $thumb; ?>" data-key="0">
												<img src="<?php echo $small; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" class="img-responsive" />
											</a>
										</div>
										<?php foreach ($images as $key => $image) { ?>
											<div class="image-additional col-xs-3 col-sm-2">
												<a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" data-thumb="<?php echo $image['small']; ?>" data-key="<?php echo $key+1; ?>">
													<img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" class="img-responsive" />
												</a>
											</div>
										<?php } ?>
										
									</li>

 

[BuslikDrev]

25 минут назад, kusttt сказал:

Второй день "воюю". Может поможет кто, как адаптировать код с отображением превьюшек ниже...

Сайт покажите, без ссылки на сайт никто не может.

[kusttt]

5 минут назад, BuslikDrev сказал:

Сайт покажите, без ссылки на сайт никто не может.

Сайт на локалке. Автор хака для примера взял часть кода из дефолт шаблона, я - выложил свой "кусок". Как бы все то же самое, но "наугад" переставляя куски кода - не получается результат, а навыков программирования нет.

[kusttt]

Победил.

<div id="owl-demo" class="image-additional " >
    
                                       <div class="image-additional ">
<a class="thumbnail"  href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" data-thumb="<?php echo $thumb; ?>" data-key="0">
<img class="img-responsive" src="<?php echo $small; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"/></a>
                                        </div>
                                        
                                        
                    <?php foreach ($images as $key => $image) { ?>
                        <div>
<a class="thumbnail"   href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"data-thumb="<?php echo $image['small']; ?>" data-key="<?php echo $key+1; ?>" >
<img class="img-responsive" src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" class="img-responsive" /></a>
                        </div>

<?php } ?>
</div>