Карусель дополнительных фотографий

alinalessioYandex · 13 серпня 2012

Привет всем.

Скажите пожалуйста, как на opencart 1.5.1.3 реализовать прокрутку маленьких фото, под основным изображением на странице продукта?

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

Нужно что-то вроде того как на фото внизу, но можно и без излишеств. Главное, чтобы можно было загружать много фотографий, но показывалось только три из них, в контейнере. При нажатии на стрелку, можно полистать оставшиеся фотографии.

Помогите пожалуйста, может кому попадалось готовое решение?

Спасибо.

Baco · 13 серпня 2012

Тут описывтся реализация...

Rustem · 31 серпня 2012

Вот тут именно та каруселька, которую вы привели в примере.

Скачивайте с этой страницы, там будут примеры в php-файлах, я надеюсь вы разберетесь.

zorkyglaiz · 1 вересня 2012

Да, мне тож нужен такой...

Tom · 1 вересня 2012

а можно выложить это в виде файла, я вот лично не силён в этом , но прочитал с интересом ! :-D

Rustem · 3 вересня 2012

Итак, делаем карусельку дополнительных изображений на Opencart 1.5.3.1

1. Скачать прикрепленный архив carousel.zip

2. Распаковать в директорию своего сайта.

3. Добавить в файл /catalog/view/theme/название вашей темы/template/common/header.tpl до закрывающегося тега head, следующий код:

<script type="text/javascript" src="../carousel/jquery.jcarousel.min.js"></script>

<link rel="stylesheet" type="text/css" href="../carousel/skins/tango/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
	jQuery('#mycarousel').jcarousel({
		wrap: 'circular'
	});
});
</script>

4. Идем в /catalog/view/theme/название вашей темы/template/product/product.tpl

Ищем:

<div class="image-additional">
		<?php foreach ($images as $image) { ?>
		<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>
		<?php } ?>
	  </div>

Меняем на:


<ul id="mycarousel" class="jcarousel-skin-tango">
	  <?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>

5. Радуемся карусельке такого вида:

Также можно поиграться со стилями в carousel/skins/tango/skin.css

В итоге на моем сайте получилась вот такая каруселька:

Для тех, кто шарит, дополнительные фишки и настройки смотреть здесь.

carousel.zip

Tom · 3 вересня 2012

Спасибо!! И респект!

SerginioWS · 5 вересня 2012

Большое спасибо - получилось очень красивенько :-)

Tom · 5 вересня 2012

Попробывал! Вот результат!

SerginioWS · 7 вересня 2012

У меня изначально тоже что-то в таком роде вышло, но потом перепроверил и всё получилось ти-топ.

Вот интересует такой вопрос - можно ли с помощью такой же карусели выводить фото товара из вкладки "Похожие товары".

Суть такова, что сделал дубль этой вкладки, одна будет вместо "Похожих товаров" к примеру "Цвет", а другая "Стиль".

Так вот товары из "Стиль" хотелось бы отображать с помощью такой же карусельки. Попробовал по аналогии - получилось как Том Сойера.

Rustem · 7 вересня 2012

У меня изначально тоже что-то в таком роде вышло, но потом перепроверил и всё получилось ти-топ.

Вот интересует такой вопрос - можно ли с помощью такой же карусели выводить фото товара из вкладки "Похожие товары".

Суть такова, что сделал дубль этой вкладки, одна будет вместо "Похожих товаров" к примеру "Цвет", а другая "Стиль".

Так вот товары из "Стиль" хотелось бы отображать с помощью такой же карусельки. Попробовал по аналогии - получилось как Том Сойера.

Посмотри как у меня на главной реализована каруселька для рекомендуемых товаров, ты это имеешь ввиду? http://maoshop.ru

Там нужно подключать другой скрипт и качать другие файлы, потому что эта карусель чисто для фоток.

Если надо, то я расскажу завтра как сделать также.

Попробывал! Вот результат!

Попробуй реально перепроверь все, возможно у тебя не подключены библиотеки jQuery, хотя должны быть по умолчанию.

Если так, то попробуй подключить ту, что идет в комплекте с каруселькой. Я не большой спец в этом, но у меня все стало без проблем.

SerginioWS · 7 вересня 2012

Посмотри как у меня на главной реализована каруселька для рекомендуемых товаров, ты это имеешь ввиду? http://maoshop.ru

Там нужно подключать другой скрипт и качать другие файлы, потому что эта карусель чисто для фоток.

Если надо, то я расскажу завтра как сделать также.

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

Rustem · 8 вересня 2012

Делаем горизонтальную карусельку для товаров.

Ее можно воткнуть в любой модуль или использовать для дополнительных товаров.

1. Скачиваем и закидываем в директорию нашего сайта папку carousel

2. Идем в catalog/view/theme/ваша_тема/template/common/header.tpl и добавляем следующий код до закрывающегося тега </head>:

<script type="text/javascript" src="carousel/js/jquery.jcarousel.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
	// Initialise the first and second carousel by class selector.
	// Note that they use both the same configuration options (none in this case).
	jQuery('.d-carousel .carousel').jcarousel({
		scroll: 5
	});
});
</script>

3. На этом этапе вам необходимо найти расположение изменяемого вами модуля.

Для связанных или дополнительных товаров идем в catalog/view/theme/ваша_тема/template/product/product.tpl

Для изменения какого-либо модуля идем в catalog/view/theme/ваша_тема/template/module/

В любом случае, ищем то место, где отображается товар, и меняем:

<div class="box-product">
	  <?php foreach ($products as $product) { ?>
		<div>

На:

<div class="box-product">
	   <div id="wrapper">
		  <div class="d-carousel">
			 <ul class="carousel">
   			  <?php foreach ($products as $product) { ?>
				   <li><div>

И в конце:

</div>
	  <?php } ?>
	</div>
  </div>

Меняем на:

</div>
		</li>
		<?php } ?>
	  </ul>
	</div>
	<div class="clear"></div>
  </div>

!Тут будьте внимательны, смотрите чтобы соблюдалась структура и все дивы закрывались, потому что в разных модулях могут быть маленькие отличия!

4. Добавление стилей в stylesheet.css (catalog/view/theme/ваша_тема/stylesheet/stylesheet.css/)

#wrapper .d-carousel ul li {

border: 1px solid #DBDEE1;

background: none;

background-color: #FFF;

padding: 0px 6px 0px 6px;

width: 160px;

height: 245px;

}

.jcarousel-direction-rtl {

direction: rtl;

}

.d-carousel h4 {

margin: 5px 0 5px 0;

}

.d-carousel .jcarousel-container {

display: block;

overflow: hidden;

margin-bottom: 0px;

}

.d-carousel .jcarousel-item {

background: none repeat scroll 0 0 #FFFFFF;

height: 245px;

padding: 0 6px;

width: 160px;

}

.d-carousel .jcarousel-container-horizontal {

width: 931px;

height: 251px;

padding: 0 5px;

margin: 0px 0px 0px 7px;

}

.d-carousel .jcarousel-item-horizontal {

margin-left: 3px;

margin-bottom: 3px;

margin-top: 3px;

margin-right: 11px;

}

.d-carousel .jcarousel-next-horizontal {

position: absolute;

top: 114px;

right: 0;

margin-right: 0px;

width: 25px;

height: 25px;

cursor: pointer;

background: transparent url(carousel/image/right.png);

}

.d-carousel .jcarousel-direction-rtl .jcarousel-next-horizontal {

left: 5px;

right: auto;

}

.d-carousel .jcarousel-next-horizontal:hover {

background-position: bottom right;

}

.d-carousel .jcarousel-prev-horizontal {

position: absolute;

top: 114px;

left: 0px;

margin-left: 0px;

width: 25px;

height: 25px;

cursor: pointer;

background: transparent url(carousel/image/left.png);

}

.d-carousel .jcarousel-direction-rtl .jcarousel-prev-horizontal {

left: auto;

right: 5px;

}

.d-carousel .jcarousel-prev-horizontal:hover {

background-position: bottom left;

}

Это также важный эпап, без которого все будет отображаться криво.

!ВНИМАНИЕ! Тщательно проверяйте все пути в таблице стилей, возможно потребуется прописать прямой путь вида:

http://ваш_сайт/carousel/image/left.png

5. Получилась каруселька вида:

Которая пролистывает сразу по 5 товаров.

Дублируем карусельку для других модулей:

1. Если вы уже настроили одну карусельку и вам нужна точно такая же для другого модуля, то тут все просто. Необходимо проделать ШАГ 3 из предыдущего спойлера.

2. Если же вам необходима каруселька с другими настройками и стилями, то делаем следующее:

2.1. В catalog/view/theme/ваша_тема/template/common/header.tpl Сразу же после предыдущего кода добавляем:

<script type="text/javascript" src="carousel/js/jquery.jcarousel1.js"></script>

<script type="text/javascript">
	jQuery(document).ready(function() {
	// Initialise the first and second carousel by class selector.
	// Note that they use both the same configuration options (none in this case).
	jQuery('.d-carousel1 .carousel1').jcarousel({
		scroll: 5
	});
});
</script>

Причем scroll: 5 - это количество прокручиваемых за раз товаров, можете поставить 3, например.

2.2. Идем в требуемый нам модуль и меняем по аналогии с ШАГОМ 3, предыдущего спойлера. Только на этот раз дивы имеют вид:

	<div id="wrapper1">
	<div class="d-carousel1">
	  <ul class="carousel1">

Остальная структура остается прежней, то есть повторяйте ШАГ 3

2.3. Добавляем стили в stylesheet.css

#wrapper1 .d-carousel1 ul li {

border: 1px solid #DBDEE1;

background: none;

background-color: #FFF;

padding: 0px 6px 0px 6px;

width: 160px;

height: 245px;

}

.jcarousel1-direction-rtl {

direction: rtl;

}

.d-carousel1 h4 {

margin: 5px 0 5px 0;

}

.d-carousel1 .jcarousel1-container {

display: block;

overflow: hidden;

margin-bottom: 0px;

}

.d-carousel1 .jcarousel1-item {

background: none repeat scroll 0 0 #FFFFFF;

height: 245px;

padding: 0 6px;

width: 160px;

}

.d-carousel1 .jcarousel1-container-horizontal {

width: 555px;

height: 251px;

padding: 0 5px;

margin: 0px 0px 0px 7px;

}

.d-carousel1 .jcarousel1-item-horizontal {

margin-left: 3px;

margin-bottom: 3px;

margin-top: 3px;

margin-right: 11px;

}

.d-carousel1 .jcarousel1-next-horizontal {

position: absolute;

top: 114px;

right: 0;

margin-right: 0px;

width: 25px;

height: 25px;

cursor: pointer;

background: transparent url(carousel/image/right.png);

}

.d-carousel1 .jcarousel1-direction-rtl .jcarousel1-next-horizontal {

left: 5px;

right: auto;

}

.d-carousel1 .jcarousel1-next-horizontal:hover {

background-position: bottom right;

}

.d-carousel1 .jcarousel1-prev-horizontal {

position: absolute;

top: 114px;

left: 0px;

margin-left: 0px;

width: 25px;

height: 25px;

cursor: pointer;

background: transparent url(carousel/image/left.png);

}

.d-carousel1 .jcarousel1-direction-rtl .jcarousel1-prev-horizontal {

left: auto;

right: 5px;

}

.d-carousel1 .jcarousel1-prev-horizontal:hover {

background-position: bottom left;

}

Вот и все. Если уж вам понадобится каруселька с еще одним стилем, то необходимо менять файл jquery.jcarousel1.js, тупо добавляя цифру 2 в названиях дивов, вместо 1 на конце :)

carousel.zip

SerginioWS · 8 вересня 2012

Rustem огромное Вам спасибо за помощь! Всё получилось, пришлось лишь немного со стилями поиграться, а то моя иконка Sale терялась на акционных товарах, но с этим разобрался без особых проблем.

Если не затруднит, то подскажите ещё такой момент: у Вас на сайте модули Акция дня и Последние установлены табами. Как это реализовать? А то хочется сэкономить место на странице, а не заставлять посетителя скроллить сайт как потерпевшего.

И ещё последний вопросик, чтоб сильно Вас не дёргать по пустякам - подписка на рассылку новостей сайта у Вас на сайте - как сделать? Есть специальный модуль или надо самостоятельно делать?

Rustem · 8 вересня 2012

Рад что все получилось)

Для реализации формы подписки я использовал модуль html: https://opencartforum.com/files/file/162-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-html-%D0%B4%D0%BB%D1%8F/

И сервис http://www.unisender.com/ru/, также можно использовать smartresponder.ru

Для табов есть модуль: https://opencartforum.com/files/file/506-%D0%BD%D0%B0%D1%88%D0%B0-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4-%D0%B2-1-%D0%BD%D0%B0-%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B9-%D0%B1%D0%B5%D0%B7-qvmod-%D0%B4%D0%BB%D1%8F-opencart-v150-v1501-v1502-v1503/

Удачи!)

SerginioWS · 8 вересня 2012

Рад что все получилось)

Для реализации формы подписки я использовал модуль html: http://opencartforum...B4%D0%BB%D1%8F/

И сервис http://www.unisender.com/ru/, также можно использовать smartresponder.ru

Для табов есть модуль: http://opencartforum...01-v1502-v1503/

Удачи!)

Ещё раз большое человеческое Вам спасибо! Удачи Вам и Вашим проектам!!!))

seriyy · 15 вересня 2012

Добрый день! подскажите пожалуйста. Всё сделал в точности как вы объяснили.. карусель получилась, но вылез баг перестал работать слайдер на главной странице и появилась проблемма с полями при оформлении заказа (шаги) они тупо не разъезжаются, видимо гдето происходит конфликт на уровне классов родной карусели продуктов и ещё одной которую я установил.. подскажите как поправить.

Заранее благодарен. Сергей

Rustem · 16 вересня 2012

Добрый день! подскажите пожалуйста. Всё сделал в точности как вы объяснили.. карусель получилась, но вылез баг перестал работать слайдер на главной странице и появилась проблемма с полями при оформлении заказа (шаги) они тупо не разъезжаются, видимо гдето происходит конфликт на уровне классов родной карусели продуктов и ещё одной которую я установил.. подскажите как поправить.

Заранее благодарен. Сергей

Попробуйте сразу делать дубль карусельки, возможно конфликт идет из-за класса .carousel

seriyy · 16 вересня 2012

Немного не понял что вы имеете ввиду? Пожалуйта, можете немного конкретнее объямнить?

seriyy · 16 вересня 2012

вот мой хидер

<head>

<?php if ($description) { ?>

<?php } ?>

<?php if ($keywords) { ?>

<?php } ?>

<?php if ($icon) { ?>

<?php } ?>

<?php foreach ($links as $link) { ?>

<?php } ?>

<?php foreach ($styles as $style) { ?>

<?php } ?>

<?php foreach ($scripts as $script) { ?>

<?php } ?>

<!--[if IE 7]>

<![endif]-->

<!--[if lt IE 7]>

DD_belatedPNG.fix('#logo img');

</script>

<![endif]-->

<?php echo $google_analytics; ?>

jQuery(document).ready(function() {

// Initialise the first and second carousel by class selector.

// Note that they use both the same configuration options (none in this case).

jQuery('.d-carousel .carousel').jcarousel({

scroll: 5

});

</script>

seriyy · 16 вересня 2012

вот мой featured.tpl

<?php foreach ($products as $product) { ?>

<?php if ($product['thumb']) { ?>

<?php } ?>

<?php if ($product['price']) { ?>

<?php if (!$product['special']) { ?>

<?php echo $product['price']; ?>

<?php } else { ?>

<?php } ?>

</div>

<?php } ?>

<?php if ($product['rating']) { ?>

<?php } ?>

<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>

</div>

</li>

<?php } ?></div>

</ul>

</div>

</div>

Rustem · 16 вересня 2012

https://opencartforum.com/topic/11477-%d0%ba%d0%b0%d1%80%d1%83%d1%81%d0%b5%d0%bb%d1%8c-%d0%b4%d0%be%d0%bf%d0%be%d0%bb%d0%bd%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d1%8b%d1%85-%d1%84%d0%be%d1%82%d0%be%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%b9/page__view__findpost__p__79175

Смотрите спойлер "Дублируем карусельку для других модулей", все должно работать в этом случае.

seriyy · 17 вересня 2012

Получилось, проблемма была в ошибке имен библиотеки.. Огромное спасибо

fjeka · 17 жовтня 2012

А можно ли сделать так чтоб при нажатии на картинку она открывалась как fancybox ?

То есть чтоб также при нажатии картинка увеличивалась и их можно было просматривать по очереди увеличенными.

Rustem · 17 жовтня 2012

Там все и должно открываться подобным образом, только через colorbox для 1.5.3.1

Смотри реализацию в этом посте: https://opencartforum.com/topic/11477-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D1%85-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%B9/page__p__77925#entry77925

Вот пример на моем сайте: http://maoshop.ru/index.php?route=product/product&path=59_60&product_id=67

Вхід

Карусель дополнительных фотографий

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information