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

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


Recommended Posts

Привет всем.

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

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

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

Изображение

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

Спасибо.

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


  • 3 weeks later...

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

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

  • +1 2
Надіслати
Поділитися на інших сайтах


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

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

Итак, делаем карусельку дополнительных изображений на 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

  • +1 6
Надіслати
Поділитися на інших сайтах


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

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


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

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

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

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

post-21984-0-01520400-1347029710_thumb.jpg

post-21984-0-93824800-1347029998_thumb.jpg

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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;

background-image: url(carousel/image/blog-arrows.jpg);

}

.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;

background-image: url(carousel/image/blog-arrows.jpg);

}

.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;

background-image: url(carousel/image/blog-arrows.jpg);

}

.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;

background-image: url(carousel/image/blog-arrows.jpg);

}

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

background-position: bottom left;

}

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

carousel.zip

  • +1 3
Надіслати
Поділитися на інших сайтах


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

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

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

post-21984-0-60046700-1347105855_thumb.jpg

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


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

Для реализации формы подписки я использовал модуль 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/

Удачи!)

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


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

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

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

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

Удачи!)

Ещё раз большое человеческое Вам спасибо! Удачи Вам и Вашим проектам!!!))
Надіслати
Поділитися на інших сайтах


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

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

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


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

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

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

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


вот мой хидер

<head>

<title><?php echo $title; ?></title>

<base href="<?php echo $base; ?>" />

<?php if ($description) { ?>

<meta name="description" content="<?php echo $description; ?>" />

<?php } ?>

<?php if ($keywords) { ?>

<meta name="keywords" content="<?php echo $keywords; ?>" />

<?php } ?>

<?php if ($icon) { ?>

<link href="<?php echo $icon; ?>" rel="icon" />

<?php } ?>

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

<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />

<?php } ?>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/modnoikrasivo/stylesheet/stylesheet.css" />

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

<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />

<?php } ?>

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />

<script type="text/javascript" src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>

<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />

<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

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

<script type="text/javascript" src="<?php echo $script; ?>"></script>

<?php } ?>

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />

<![endif]-->

<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />

<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>

<script type="text/javascript">

DD_belatedPNG.fix('#logo img');

</script>

<![endif]-->

<?php echo $google_analytics; ?>

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

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


вот мой featured.tpl

<div class="box">

<div class="box-heading"><?php echo $heading_title; ?></div>

<div class="box-content">

<div class="box-product">

<div id="wrapper">

<div class="d-carousel">

<ul class="carousel">

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

<li><div>

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

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

<?php } ?>

<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>

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

<div class="price">

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

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

<?php } else { ?>

<span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>

<?php } ?>

</div>

<?php } ?>

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

<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>

<?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><!--comment 1 div -->

</ul>

</div>

<div class="clear"></div>

</div>

</div>

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


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


  • 1 month later...

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

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

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


Там все и должно открываться подобным образом, только через 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

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


Гість
Ця тема закрита для публікації повідомлень.
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

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