Jump to content
Sign in to follow this  
Electr0n

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

Recommended Posts

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

 

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

 

в  шаблона 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 такая же проблема. 

Edited by Electr0n

Share this post


Link to post
Share on other sites

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

var visible = 2;

замените на 4

 

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

Edited by Einshtein

Share this post


Link to post
Share on other sites

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

 

var visible = 2;

замените на 4

 

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

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

ENJ2y3yPOTg.jpg

 

 

 

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

 

uXIV5_uUI8Q.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

С google chrome смотрел 

Edited by Electr0n

Share this post


Link to post
Share on other sites

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

 

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

 

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

 

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

 

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

 

OmgDGLULpAA.jpg

Edited by Electr0n

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.