Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

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

Объясню на примере шаблона "default".
Если установлен другой шаблон, меняем пути в соответствующих файлах и строках.

4365213.png

Редактируемые файлы - 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 по умолчанию).

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

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

Изменено пользователем tim21701
  • +1 13
Ссылка на комментарий
Поделиться на других сайтах

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

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>

Всё.

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

4359893.png

Изменено пользователем tim21701
  • +1 4
Ссылка на комментарий
Поделиться на других сайтах

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

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

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


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

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

auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматическую прокрутку.
Поставьте 3, например, тогда изображения будут меняться каждые ТРИ секунды.
  • +1 3
Ссылка на комментарий
Поделиться на других сайтах

  • 3 недели спустя...
  • 1 месяц спустя...

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

 

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

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

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

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

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

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

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

 

Вот офф сайт.

 

исп.

jquery.flexslider-min.js

flexslider.css

 

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    controlNav: "false",
  });
});
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

  • 3 недели спустя...

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 товара), можете посмотреть результат - всё работает. )))

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

  • 2 недели спустя...
  • 3 месяца спустя...

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

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


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

 

     post-673842-0-88398200-1382937835.png

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


...

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

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


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

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

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

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

 

 

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

 

 

   Снимок.PNG

Снимок.PNG

Снимок.PNG

post-673842-0-08751000-1382939301_thumb.png

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


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

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

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

 

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

 

     post-673842-0-40861100-1382939772_thumb.png

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


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

 

 

 

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

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


  • 1 месяц спустя...

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

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

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


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

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


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

 

 

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

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

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.