arthyrgrex

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

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

arthyrgrex    5

Добрый день.

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

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

post-10240-0-81556800-1483480684_thumb.png

В 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, по этому обращаюсь на форум.

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

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


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

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

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

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


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

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

возможно основное фото стоит 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    134
<?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    5

 

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

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

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

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

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

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

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

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


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

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

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

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

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

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

Войти

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

Войти


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

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