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

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://opencart-forum.ru/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://opencart-forum.ru/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://opencart-forum.ru/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://opencart-forum.ru/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

Войти

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

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Ссылка на комменирий

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

Похожие публикации

Сейчас на страниэто 0 пользователей

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

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