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

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

Здравствуйте, подскажите пж opencart 2.2.0.0 в продукте дополнительный товар выводиться с помощью owl carousel в Position image additional: bottom есть прокрутка товара c низ так же можно вывести доп товар с лева от картинки товара но нет прокрутки. Подскажите что не так делаю.

Выводит доп картинки с лева

Скрытый текст

<div class="col-sm-3">
<div class="thumbnails thumbnails-left clearfix">
   <ul>
     <?php if($theme_options->get( 'product_image_zoom' ) != 2 && $thumb) { ?>
      <li><p><a href="<?php echo $popup; ?>" class="popup-image" data-image="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>"><img src="<?php echo $theme_options->productImageThumb($product_id, $config->get($config->get('config_theme') . '_image_additional_width'), $config->get($config->get('config_theme') . '_image_additional_height')); ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
     <?php } ?>
      <?php foreach ($images as $image) { ?>
      <li><p><a href="<?php echo $image['popup']; ?>" class="popup-image" data-image="<?php echo $image['popup']; ?>" data-zoom-image="<?php echo $image['popup']; ?>"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
      <?php } ?>
  </ul>
</div>
</div>

 

Пробовал так

Скрытый текст

<div class="col-sm-3">
<div class="thumbnails thumbnails-left clearfix">
   <ul class="thum-left">
     <?php if($theme_options->get( 'product_image_zoom' ) != 2 && $thumb) { ?>
      <li><p><a href="<?php echo $popup; ?>" class="popup-image" data-image="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>"><img src="<?php echo $theme_options->productImageThumb($product_id, $config->get($config->get('config_theme') . '_image_additional_width'), $config->get($config->get('config_theme') . '_image_additional_height')); ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
     <?php } ?>
      <?php foreach ($images as $image) { ?>
      <li><p><a href="<?php echo $image['popup']; ?>" class="popup-image" data-image="<?php echo $image['popup']; ?>" data-zoom-image="<?php echo $image['popup']; ?>"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
      <?php } ?>
  </ul>
//Добавил скрипт
   <script type="text/javascript">
      $(".thum-left").owlCarousel({
      loop: true,
      autoplay: true,
      items: 3,
      navigation: true,
      autoplayHoverPause: true,
      animateOut: 'slideOutUp',
      animateIn: 'slideInUp'
      });
</script>
</div>
         </div>

 

но тогда доп фото отображается горизонтально. Подскажите пж.

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


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

может кому то пригодится решил с помощью thumbelina ссылка на github тут описание как можно реализовать

Вкратце

1. в catalog/view/theme/default/template/common/header.tpl подключаем js и css

2. в catalog/view/theme/default/template/product/product.tpl добавляем в нужном месте 

<div  id="slider3"></div>
   <div class="thumbelina-but vert top">&#708;</div>

 

и вставляем скрип 

Скрытый текст

<!-- Create sliders. -->
<script type="text/javascript">
    $(function(){
        
        $('#slider1').Thumbelina({
            $bwdBut:$('#slider1 .left'),    // Selector to left button.
            $fwdBut:$('#slider1 .right')    // Selector to right button.
        });
        
        $('#slider2').Thumbelina({
            $bwdBut:$('#slider2 .left'),    // Selector to left button.
            $fwdBut:$('#slider2 .right')    // Selector to right button.
        });
        
        $('#slider3').Thumbelina({
            orientation:'vertical',         // Use vertical mode (default horizontal).
            $bwdBut:$('#slider3 .top'),     // Selector to top button.
            $fwdBut:$('#slider3 .bottom')   // Selector to bottom button.
        });
      
    })
</script>    

 

  • +1 1

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


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

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

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

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

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

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

Войти

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

Войти

  • Последние посетители   0 пользователей онлайн

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

×

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

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