Заменить стандартный слайдер товаров в карточке.

[newjey]

Добрый день.

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

 

Так что бы можно было просматривать фото нажимая на стрелочки слева и с права и если много дополнительных изображений то они бы тоже отображались в одну строку с прокруткой.

 

Спасибо.

[newjey]

Я так понимаю что это owl carousel, как её подключить вместо стандартной?

[newjey]

Что-то последнее время люди на форуме вроде вымерли(

[newjey]

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

<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
			<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?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 } ?>
          </ul>
          <?php } ?>

Как его подправить для вывода через owl ?

[newjey]

Нашел вот такой файл, установил его галерея изменилась, но очень странно выводится.

а дополнительные изображения отсутствуют под главным фото, но в галерее они есть и выведены в маленьком разрешении:

Может где-то конфлик или не подключен скрипт какой-то?

carousel_product_img.ocmod.xml

[Tom]

Во первых,раз все картинки выводится должны в одном размере,то явно нужно и в настройках это учесть.

[newjey]

Во первых,раз все картинки выводится должны в одном размере,то явно нужно и в настройках это учесть.

Спасибо размер увеличил, всё ок. Но почему нет всех превьюшек под главным фото?

[Tom]

Потому что это не предусмотренно в модификаторе вашем.

[newjey]

Осталось значит вывести миниатюры под главным фото. Как это можно сделать?

[newjey]

Потому что это не предусмотренно в модификаторе вашем.

Слёзно прошу, подскажите как их добавить?)

Спасибо.

[Tom]

https://opencartforum.com/topic/61127-%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%BE-%D0%BC%D0%B8%D0%BD%D0%B8%D0%B0%D1%82%D1%8E%D1%80%D1%8B-%D0%B2-owl-carousel/

[newjey]

https://opencartforum.com/topic/61127-%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%BE-%D0%BC%D0%B8%D0%BD%D0%B8%D0%B0%D1%82%D1%8E%D1%80%D1%8B-%D0%B2-owl-carousel/

Сделал, так же, не помогло.

[Tom]

Значит ещё раз перечитать.И учиться ,учиться и учится...

 

PS я проверял данный подход,он вполне рабочий.

[newjey]

Перечитал, установил мод и сделал по переведённой выше инструкции. Но миниатюры не появились(.

[Tom]

Терпение и труд всё перетрут.я бы помог.Но это из области "хотелок",  а корпеть над чужим магазином воплощая чью то блаж....Я могу убить время и более безобидно.

[newjey]

Это понятно. Знать бы просто куда смотреть что бы подправить.

Или со стилями проблема или скрипт какой-то не подключен.

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

[Tom]

Консоль вам в помощь ....В ней всё как на ладони.

[newjey]

В slideshow.tpl указанно:

var pafinatorsLink = $('.owl-controls .item-link');
        
        $.each(this.owl.userItems, function (i) {

            $(pafinatorsLink[i])
                // i - counter
                // Give some styles and set background image for pagination item
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
                    '-webkit-background-size': 'cover',
                    '-moz-background-size': 'cover',
                    '-o-background-size': 'cover',
                    'background-size': 'cover'
                })
                // set Custom Event for pagination item
                .click(function () {
                    owl.trigger('owl.goTo', i);
                });

в стилях прописаны классы:

.owl-theme .owl-controls .item-link {
    position: relative;
    display: block;
    width: 100px;
    height: 40px;
    margin: 0 2px;
    border-bottom: 4px solid #ccc;
    outline: none;
}
 
.owl-theme .owl-controls .active .item-link {
    border-bottom: 4px solid #cc4895;
}

но не выводится ничего(

[Tom]

В slideshow.tpl указанно:

 

А модуль Слайдшоу здесь каким  боком , если всё время до этого шла речь о карточке товара ?

[newjey]

Теперь точно запутался.

[newjey]

нашёл вот такой ещё способ сайт. но он тоже не работает(

[Tom]

Я ж говорю,чистой воды блаж.....

[newjey]

Вас можно попросить платно сделать? Сколько это будет стоить?

[Tom]

Если честно в ближайших планах у меня водка и мандарины с оливье.

 

Модификатор который вы выложили (тот что в карусель собирает ) он подключает в карточку товара скрипт Owl Carousel,тот же самый скрипт что используется в слайдшоу.Я дал ссылку на решение для МОДУЛЯ,но это подсказка для реализации в карточке товара.Если не выходит то вот ещё вариант

 

https://github.com/gijsroge/OwlCarousel2-Thumbs

[newjey]

Не выходит вообщем ничего( наверное руки не из того места ростут. Получается или вывести доп изображения слайдером или основное без дополнительных изображений(