Перейти к содержанию
alinalessioYandex

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

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

Привет всем.

Скажите пожалуйста, как на opencart 1.5.1.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

Поделиться сообщением


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

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

Поделиться сообщением


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

А можно ли сделать так чтоб при нажатии на картинку она открывалась как 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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.