Объясню на примере шаблона "default". Если установлен другой шаблон, меняем пути в соответствующих файлах и строках. Редактируемые файлы - 2: header.tpl product.tpl Подключаемые файлы - 2: (оба файла уже есть в сборке) carousel.css jquery.jcarousel.min.js ========================================================================= -----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!----------------- ========================================================================= 1). Открываем файл catalog/view/theme/default/template/common/header.tpl и перед </head> подключаем 2 файла:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" media="screen">
2). Открываем файл catalog/view/theme/default/template/product/product.tpl и находим строки: (В шаблоне по умолчанию, это строка 16 и 24)
<div class="image-additional">
...
...
...
<div class="right">
Между ними, удаляем код и вставляем этот:
<div id="carousel-p">
<ul class="jcarousel-skin-opencart">
<?php foreach ($images as $image) { ?>
<li>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
</li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
В этом же файле, (в самом конце) перед последней строкой:
<?php echo $footer; ?>
Добавляем код скрипта: (Добавил комментарии)
<script type="text/javascript"><!--
$('#carousel-p ul').jcarousel({
vertical: false,
visible: 3,
scroll: 1,
auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматичустую прокрутку.
animation: "slow", // Анимация "slow" или "fast" (быстрое или медленное переклюцение на следующее изображение)
wrap: "both" // при достижении последнего изображения - возвращаемся на первое. Или "circular" - прокрутка до бесконечности.
});
$(function () {
$("SELECT").selectBox();
});
//--></script>
3). Открываем файл catalog/view/theme/default/stylesheet/stylesheet.css и находим два блока:
.product-info > .left {
float: left;
margin-right: 15px;
}
.product-info > .left + .right {
margin-left: 265px;
}
Вставляем с заменой:
.product-info > .left {
float: left;
margin-right: 15px;
width: 45%;
position: relative;
}
.product-info > .right {
float: left;
width: 365px;
color: #333333;
position: relative;
}
Чуть ниже, (в этом же файле) находим блок:
.product-info .image-additional {
width: 260px;
;
clear: both;
overflow: hidden;
}
И меняем на этот:
.product-info .image-additional {
width: 100%;
clear: both;
overflow: hidden;
}
4). Заходим в панель Администратора: "Система" > "Настройки" > (Выбор магазина - "Изменить") и переходим на вкладку "Изображения". Меняем "Размер большого изображения товара:" на 328 (вместо 228 по умолчанию). Всё. Открывает страницу с товаром (у которого белее трёх дополнительных изображений) и смотрим: (обведено КРАСНЫМ цветом) Открываем страницу источника и смотрим настройки скрипта...