how-to [How-To] Прокрутка доп. изображений на странице Товара

[tim21701]

Объясню на примере шаблона "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 по умолчанию).

Всё. Открывает страницу с товаром (у которого белее трёх дополнительных изображений) и смотрим:
(обведено КРАСНЫМ цветом)


Открываем страницу источника и смотрим настройки скрипта...

Змінено 4 березня 2015 користувачем tim21701

[tim21701]

Добавляем автоматическую прокрутку для слайд-шоу "Производители" на главной странице.

1). Откройте файл catalog/view/theme/default/template/module/carousel.tpl и добавьте запятую в конце строки:

scroll: <?php echo $scroll; ?>

2). Перейдите на новую строку и добавите следующий код:

auto: 1,
animation: "slow",
wrap: "both"

P.S.

У Вас, должно получиться так:

<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?>,
auto: 1,
animation: "slow",
wrap: "both"
});
//--></script>

Всё.

Откройте главную страницу Вашего интернет-магазина и проверьте работу:

Змінено 24 березня 2013 користувачем tim21701

[Raensul]

С картинками в товаре все ок получилось, спасибо большое :) осталось с настройками разобраться, но не ссильен в англ, чтоб в источнике найти :))

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

[tim21701]

...как увеличить время между автоскролами?...

По умолчанию стоит одна секунда.

auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматическую прокрутку.

Поставьте 3, например, тогда изображения будут меняться каждые ТРИ секунды.

[Raensul]

спасибо :) я просто полез в jquery.jcarousel.min.js и начал там ковыряться :))))

[andrewich]

auto: 1,
animation: "slow",
wrap: "both"

 

какие еще варианты бывают анимации? и последнего?

[tim21701]

andrewich читайте внимательнее:

 

...
auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматичустую прокрутку.
animation: "slow", // Анимация "slow" или "fast" (быстрое или медленное переклюцение на следующее изображение)
wrap: "both" // при достижении последнего изображения - возвращаемся на первое. Или "circular" - прокрутка до бесконечности.
...

[Tom]

Tim21701  только сильно не пинай! Подскажи как сделать чтоб основная картинка была каруселью.Например так

http://www.eurohome.es/fichacasa.asp?ref=Ao1331ca

[tim21701]

Tom, он очень похож на обычный Слайдер - который у нас на главной странице... С отсутствием стрелок навигации и индикатора времени след. изображения... )))

Но, это довольно специфическая вещь и не для каждого интернет-магазина подождёт ИМХО... Вот для WordPress (для которого он и написан) в самый раз, но, не для просмотра ТОВАРА уж точно.

Смысла его "ковырять" (для всех) нет, если только "под заказ"...

 

Вот офф сайт.

 

исп.

jquery.flexslider-min.js

flexslider.css

 

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    controlNav: "false",
  });
});

[Tom]

Спасибо!

[IgorSK]

Спасибо!

[baxabit]

1.5.4.1 не сработало

[tim21701]

1.5.4.1 не сработало

Попробуйте в примере 1) - прописать строки к скрипту и стилю:

<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">

Не в файле header.tpl а напрямую в product.tpl перед строкой:

<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script>

Должно получиться... Отпишитесь потом.

 

P.S.

Проделал сейчас всё тоже самое, на "голом" 1.5.4.1

На нём лишь демонстрация модуля iLightBox установлена (замена стандартного preview товара), можете посмотреть результат - всё работает. )))

[tim21701]

Демонстрацию можно увидеть здесь.

[KOT1646]

Страно, поставил все работает. Но вот отображение картинок стало стандартным... Ну на большом изображение iLightBox   работает, а вот в карусельке по дефолту все. Вроде все изменил на шаблон который установлен. Что делать кто знает?

[Dionis]

Кто знает как поменять эти стрелочки на другие куда нужно лезть и что прописать?

[Dionis]

Pascha вот бы не подумал что с default а берет, везде смотрел кромя него  :-) , а как ее сделать радио? "при наведении меняет цвет"  картинку под нее переделал.

 

     

[Dionis]

...

при наведении кнопка исчезает а не меняет цвет, и в доп изображениях к товару слайдер растянуло и золазиет на описание

[Dionis]

покажи сайт, можно в личку

ты точно скопировал код?

размеры новых кнопок соблюдены?

вставляю свой код в демку...никаких косяков пр растягиванию/наползанию

 

 

сайт http://delcapitano.ru/index.php?route=product/product&path=20&product_id=40

 

 

   

[Dionis]

1. код не заменить, а добавить

2. у вас скобочка лишняя, не видите? 

3. разрежте картинки кнопок слайдера, так как я стиль прописывал для отдельных кнопок

 

код не заменял а добавил, скобочку заметил уже убрал не помогло, скобки щас разрежу

 

     

[Dionis]

от чего именно не помогло, я не в курсе, у меня карусель стала отображаться корректно (кроме двойных кнопок)

 

 

 

   при наведении кнопки исчезают а нужно чтобы они темнели

[maxi2013]

Подскажите пожалуйста. Каким образом можно прикрутить карусель к стандартным модулям вывода товаров "Хиты продаж", "Рекомендуемые", "Последние" и "Акции".

Буду очень благодарен...

[Tom]

https://opencartforum.com/topic/26213-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D0%B8-%D0%B2-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D0%B8-plus-%D0%B2%D1%81%D0%B5-%D0%B2-%D0%BE%D0%B4%D0%BD%D0%BE%D0%BC/

[maxi2013]

Надо именно к стандартным модулям прикрутить карусель. Другие модули-карусели не годятся. по той причине, что не выводятся стикеры  "Intelligent Product Labels & Images" в модулях каруселях. Поэтому проще переделать стандартные  "Хиты продаж", "Рекомендуемые", "Последние" и "Акции" под карусель где стикеры превосходно выводятся. И в итоге будут карусели со стикерами)

[Tom]

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

 

 

это кто так решил?