Скролинг дополнительных изображений в карточке товара с помощью 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 } ?>

[shchs]

Я обычно еще использую:

lazyLoad: true

Тогда соответственно меняем:

img src=

на:

img class="lazyOwl" data-src=

Примечание: class="lazyOwl"  -  справедливо для owl версий 1.3.2(3), для других версий уточнять.

Что дает: Картинки загружаются не сразу, а по мере необходимости(видимости), что облегчает вес страницы и увеличивает скорость её загрузки.

[Skiminok]

Всем привет.

Сделал все как тут написано получилось.

Только есть один косяк. При нажатии на стрелки вправо, влево или на пустом месте с дополнительными картинками открывается основное изображение.

Подскажите как это исправить???

 

Заранее благодарен за ответ.

[Jabob]

Доброго дня!

подключил, все здорово, как сделать вертикальный слайдер доп картинок?

сайт - http://jou-jou.ru/MaxTsurka

Змінено 28 вересня 2016 користувачем Jabob

[MihailX]

Спасибо. Работает. Скажите, а как поменять главную картинку по клику а миниатюру?  Version 2.1.0.2

[Vikaharkov]

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

Где-то можно посмотреть в работе, чтобы понять, о чем речь?

[hostup]

18.02.2016 в 13:20, 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>

 

[hostup]

Победил.

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