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

[Lena82]

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

 

Вот что получилось в коде:

<div class="product-info">
<?php if ($thumb || $images) { ?>
<div class="left">
    <?php if ($thumb) { ?>
    <div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img
                    src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>"
                    alt="<?php echo $heading_title; ?>" id="image"/></a></div>
    <?php } ?>
    <?php if ($images) { ?>
    <div class="image-additional">
        <?php foreach ($images as $image) { ?>
        <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img
                    src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>"
                    alt="<?php echo $heading_title; ?>"/></a>
        <?php } ?>
    </div>
    <?php } ?>
</div>
<?php } ?>

есть vqmod

<file name="catalog/view/theme/тема/template/product/product.tpl">
		<operation>
			<search position="before"><![CDATA[<?php echo $footer; ?>]]></search>
			<add><![CDATA[<!-- BOF om_jcarousel_additional.xml -->
<?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/тема/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',(<?php echo $add_height; ?> - $('.jcarousel-prev').height())/2 + 'px');
	$('.jcarousel-prev').css('left', '5px');
});
//--></script>
<?php } ?>
<!-- EOF om_jcarousel_additional.xml -->]]></add>
		</operation>
	</file>

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

 

Заранее спасибо)

[Lena82]

да работает, да выходит вертикальную)

 

количество помогло настроить. а вот картинки сложились горизонтально в кучку без карусели, а если написать horizontal: true тогда они встают горизонтально и есть катруселька, как их сделать вертикально?

[Lena82]

я немного изменила стиль до этого

.product-info .image-additional {
width: 80px;
clear: right;
float: right;
overflow: hidden;

.product-info > .left {
float: left;
margin-right: 15px; 

может в этой строке загвоздка?

 

16 

$('.product-info > .left + .right').css('margin-left', thumb_width + 'px');

не так?

$('.product-info > .left').css('margin-right', thumb_width + 'px');

[Lena82]

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

[ambalocha69]

для вертикальной карусели нужно сделать свой скин, тогда все будет работать нормально. Пример:

http://igg-eco.ru/allsliderv.html

у меня css формируется динамически (все параметры слайдер задаются в админке), но в коде странице вы можете найти полностью сформированный скин.