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

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


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

Привет всем.

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

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

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

Изображение

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

Спасибо.

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


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

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

Скачивайте с этой страницы, там будут примеры в 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 месяц спустя...

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

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

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

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