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 по умолчанию).

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


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

Edited March 4, 2015 by 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>

Всё.

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

Edited March 24, 2013 by 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://opencart-forum.ru/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]

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

 

 

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