Lena82

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

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

Lena82    14

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

 

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

<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 фото и что бы она была горизонтальной, так как сейчас ломает шаблон и встает туда где по умолчанию в шаблоне.

 

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

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


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

Выше приведённый код xml файла работает на вашем шаблоне? И, наверное, не горизонтальную, а вертикальную карусель надо? если да, то замени цифру 2 на 6 в двух местах  (строки 5 и 11) - количество для отображения, и после строки со  scroll: 1, вставьте vertical: true,

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


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

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

 

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

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


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

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

.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');

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


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

Дело скорее всего в том, что в опенкарт (по крайней мере в дефолтном шаблоне) из carousel.css вырезаны все стили, отвечающие за отображение вертикальной карусели.

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


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

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

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


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

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

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

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


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

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

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

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

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

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

Войти

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

Войти


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

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