[Решено] Как изменить порядок дополнительных фотографий товара?

[arthyrgrex]

Добрый день.

Собственно сабж (не повторяюсь).

Нужно первое (дефолтное фото) переставить в конец списка дополнительных фотографий, пример:
http://modamio.ru/birjuzovoe-vjazanoe-platje



В product.tpl только этот кусок кода подходит, но там ничего нету:
 

<script>
            // product images owl
            var a = $("#one-image");
            var b = $("#image-additional");
            
            a.owlCarousel({
            singleItem: true,
            slideSpeed: 1000,
            navigation: true,
            navigationText: ['<i class="fa fa-angle-left fa-5x"></i>', '<i class="fa fa-angle-right fa-5x"></i>'],
            pagination: false,
            afterAction: syncPosition,
            responsiveRefreshRate: 200,
            addClassActive: true,
            });
            
            b.owlCarousel({
            items: 4,
            itemsDesktop: [1200, 3],
            itemsDesktopSmall: [992, 2],
            itemsTablet: [768, 4],
            itemsMobile: [668, 3],
			itemsMobilSmall: [510, 2],
            pagination: false,
            navigation: true,
            navigationText: ['<i class="fa fa-angle-left fa-5x"></i>', '<i class="fa fa-angle-right fa-5x"></i>'],
            responsiveRefreshRate: 100,
            afterInit: function(el) {
                el.find(".owl-item").eq(0).addClass("synced");
            }
            });
            
            function syncPosition(el) {
            var current = this.currentItem;
            $("#image-additional")
                .find(".owl-item")
                .removeClass("synced")
                .eq(current)
                .addClass("synced")
            if ($("#image-additional").data("owlCarousel") !== undefined) {
                center(current)
            }
            }
            
            $("#image-additional").on("click", ".owl-item", function(e) {
            e.preventDefault();
            var number = $(this).data("owlItem");
            a.trigger("owl.goTo", number);
            });
            
            function center(number) {
            var bvisible = b.data("owlCarousel").owl.visibleItems;
            var num = number;
            var found = false;
            for (var i in bvisible) {
                if (num === bvisible[i]) {
                    var found = true;
                }
            }
            
            if (found === false) {
                if (num > bvisible[bvisible.length - 1]) {
                    b.trigger("owl.goTo", num - bvisible.length + 2)
                } else {
                    if (num - 1 === -1) {
                        num = 0;
                    }
                    b.trigger("owl.goTo", num);
                }
            } else if (num === bvisible[bvisible.length - 1]) {
                b.trigger("owl.goTo", bvisible[1])
            } else if (num === bvisible[0]) {
                b.trigger("owl.goTo", num - 1)
            }
            }
         </script>

В контроллере product.php тоже ничего похожего нету.

Скорее всего нужно править:
http://modamio.ru/catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js

Но я к сожалению не силен в JS, по этому обращаюсь на форум.

Благодарю за советы.

[Гість]

покажи код вывода доп фото 

возможно основное фото стоит 1 по умолчанию

[arthyrgrex]

покажи код вывода доп фото 

возможно основное фото стоит 1 по умолчанию

<?php if ($images && $config->get('control_additional')== 2) { ?>
         <div id="image-additional" class="owl-carousel image-additional" style="margin-top:15px">
            <div class="item"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $fix2; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>
            <?php foreach ($images as $image) { ?>
            <div class="item">
               <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>">
            </div>
            <?php } ?>
         </div>
         <?php } ?>

[gavi]

<?php if ($images && $config->get('control_additional')== 2) { ?>
         <div id="image-additional" class="owl-carousel image-additional" style="margin-top:15px">
            <div class="item"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $fix2; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>
            <?php foreach ($images as $image) { ?>
            <div class="item">
               <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>">
            </div>
            <?php } ?>
         </div>
         <?php } ?>

 

замените на этот код

<?php if ($images && $config->get('control_additional')== 2) { ?>
<div id="image-additional" class="owl-carousel image-additional" style="margin-top:15px">
  <?php foreach ($images as $image) { ?>
  <div class="item">
    <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>">
  </div>
  <?php } ?>
  <div class="item"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $fix2; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>
</div>
<?php } ?>

[arthyrgrex]

 

замените на этот код

<?php if ($images && $config->get('control_additional')== 2) { ?>
<div id="image-additional" class="owl-carousel image-additional" style="margin-top:15px">
  <?php foreach ($images as $image) { ?>
  <div class="item">
    <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>">
  </div>
  <?php } ?>
  <div class="item"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $fix2; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>
</div>
<?php } ?>

Сработало! 

Большое спасибо.

Но при таком раскладе есть небольшой нюанс:

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

Можно ли как-то этот момент поправить, чтобы при нажатии на дополнительное фото - отображалось именно то фото, на которое нажали?

[arthyrgrex]

Я так понимаю это в данном коде:
 

<div class="<?php echo $class; ?><?php if($config->get('control_zoom_image')== 1) { ?> zoom-image<?php } ?>">
         <div class="zoom">+</div>
         <div id="one-image" class="owl-carousel">
            <div class="item">
               <img src="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>" id="image"  title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" itemprop="image" />
               <a class="zoom2 thumbnails" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"></a>
            </div>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <div class="item">
               <img src="<?php echo $image['fix']; ?>" data-zoom-image="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>">
               <a class="zoom2 thumbnails" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"></a>
            </div>
            <?php } ?>
            <?php } ?>
         </div>
		 
         <script type="text/javascript">
            $(".zoom").on("click", function(){
            $(".active .zoom2").click();
            });							
         </script>

[gavi]

Попробуйте так:

<div class="<?php echo $class; ?><?php if($config->get('control_zoom_image')== 1) { ?> zoom-image<?php } ?>">
         <div class="zoom">+</div>
         <div id="one-image" class="owl-carousel">
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <div class="item">
               <img src="<?php echo $image['fix']; ?>" data-zoom-image="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>">
               <a class="zoom2 thumbnails" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"></a>
            </div>
            <?php } ?>
            <?php } ?>
            <div class="item">
               <img src="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>" id="image"  title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" itemprop="image" />
               <a class="zoom2 thumbnails" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"></a>
            </div>
         </div>
		 
         <script type="text/javascript">
            $(".zoom").on("click", function(){
            $(".active .zoom2").click();
            });							
         </script>

[arthyrgrex]

Большое спасибо за помощь!