Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Объясню на примере шаблона "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 weeks later...
  • 1 month later...

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 weeks later...

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 weeks later...
  • 3 months later...

Страно, поставил все работает. Но вот отображение картинок стало стандартным... Ну на большом изображение 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 month later...

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

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

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах


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

 

 

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.