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

[Решено] Карусель дополнительных изображений в карточке товара

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

Помогите пожалуйста решить вот такую задачу:

 

Добавил карусель в карточку товара дополнительных изображений. 

 

в  шаблона product.tpl перед строкой:  <?php echo $footer; ?>

 

вставил вот такой скрипт:

 

<?php if (count($images) > 2) { ?>
<?php $add_height = $this->config->get('config_image_additional_height'); ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
<script type="text/javascript"><!--
$(function() {
var visible = 2;
var thumb_width = $('.product-info .left').outerWidth(true);
$('.image-additional a').wrap('<li />');
$('.image-additional li').wrapAll('<ul class="jcarousel-skin-opencart" />');
$('.image-additional').width(thumb_width);
$('.product-info > .left + .right').css('margin-left', thumb_width + 'px');
$('.jcarousel-skin-opencart').jcarousel({
auto: 50,
scroll: 1,
visible: visible
});
$('.jcarousel-prev,.jcarousel-next').css('top',parseInt((<?php echo $add_height; ?>-$('.jcarousel-prev').height())/2)+'px');
$('.jcarousel-prev').css('left','5px');
});
//--></script>
<?php } ?>

 

 

Карусель работает:

 

GkaP-u5lYX4.jpg

 

Но, если обновить страницу раз 5-10 она слетает:

 

 

3uHnDW5U6Z8.jpg

 

Как сделать, чтоб карусель не слетала и отображала 4 изображения?

 

uEAt7hWdZP8.jpg

 

Думаю, что проблема скорее всего в скрипте, но найти причину не получается. 

сайт

 

P.S. ставил на чистый ocstore 1.5.5.1.2 такая же проблема. 

Изменено пользователем Electr0n

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


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

у Вас прописано
 

var visible = 2;

замените на 4

 

это что касается количества изображений. Другую проблему не понял

Изменено пользователем Einshtein

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


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

у Вас прописано

 

var visible = 2;

замените на 4

 

это что касается количества изображений. Другую проблему не понял

Заменил. С количеством теперь все хорошо:

ENJ2y3yPOTg.jpg

 

 

 

Но проблема с "съезжанием" осталась:

 

uXIV5_uUI8Q.jpg

 

Чтоб это увидеть нужно обновить страницу примерно раз 5

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


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

обновил раз 20 - проблему не увидел

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


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

обновил раз 20 - проблему не увидел

Странно. может это касается определенных браузеров.

С google chrome смотрел 

Изменено пользователем Electr0n

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


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

Проблема действительно. В браузерах

Firefox отображает корректно

 

В Opera и Google Chrome слетает. 

 

Не могу понять в чем проблема. 

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


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

смотрел в хроме, опере, мазиле - везде корректно. Проблема видимо в конкретной версии браузера

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


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

смотрел в хроме, опере, мазиле - везде корректно. Проблема видимо в конкретной версии браузера

Не знаете случайно как это адаптировать ? 

 

Или возможно есть другие варианты, наподобие моего? 

 

Ставил вот это , но не совсем то что нужно. Так как стрелки всегда активны. 

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


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

смотрел в хроме, опере, мазиле - везде корректно. Проблема видимо в конкретной версии браузера

В общем разобрался. Проблема была в верстке правого блока карточки товара. 

 

Значение    margin-left: 425px;

Не известно откуда берется, в product.tpl его нет.

 

Добавил в: product-info > .right {

 

Вот это: margin-left: 25px !important;

 

Скорее всего это не совсем правильно, так как лучше бы margin-left: 425px; совсем убрать.

 

Но не знаю где. Возможно в js это прописано. 

 

OmgDGLULpAA.jpg

Изменено пользователем Electr0n

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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