[Решено] Как менять основное изображение товара при нажатии/наведении курсора мыши на любое из дополнительных изображений

[yanos]

Ну собственно вопрос в названии темы.

 

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

Заранее спасибо

 

OpenCart 2.0.1. Тема по умолчанию.

 

[Tom]

Данный эффект называется обычно "image swap". Погуглите немного,явно найдётся десяток другой решений.

 

Вот к примеру

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=20363

[enstudio]

Я поставил себе вот такой слайдер вместо дефолтного.

http://www.twospy.com/galleriffic/example-2.html

Скачать полноценный пример тут: http://www.twospy.com/galleriffic/galleriffic-2.0.zip

 

 

Получилось у меня вот что: http://mario-berluchi.ru/index.php?route=product/product&path=67&product_id=148

 

 

Что делать:

в catalog/view/theme/тема/template/product в файле product.tpl

содержимое контейнера div class="left" (можете смело менять на то что я навоял)

<div class="left">
      <?php if ($thumb) { ?>
	  			<div id="gallery" class="content-slider">
				<div class="slideshow-container">
				<div id="slideshow-product" class="slideshow-product"></div>
				</div></div>
     <?php } ?>
      <?php if ($images) { ?>
      <div class="image-additional">
	  				<div id="thumbs" class="navigation">
					<ul class="thumbs noscript">	
					<?php foreach ($images as $image) { ?>
<li>
<a class="thumb" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>">
<img src="<?php echo $image['thumb']; ?>"/></a>
</li>
	<?php } ?>
					</ul>
					</div>

<script type="text/javascript">									
jQuery(document).ready(function($) {
$('div.navigation').css({'width' : '600px', 'float' : 'left'});
$('div.content-slider').css('display', 'block');
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity:   onMouseOutOpacity,
mouseOverOpacity:  1.0,
fadeSpeed:         'fast',
exemptionSelector: '.selected'
});
var gallery = $('#thumbs').galleriffic({
delay:                     500,
numThumbs:                 15,
preloadAhead:              10,
enableTopPager:            true,
enableBottomPager:         true,
maxPagesToShow:            7,
imageContainerSel:         '#slideshow-product',
controlsContainerSel:      '#controls',
captionContainerSel:       '#caption',
loadingContainerSel:       '#loading',
renderSSControls:          true,
renderNavControls:         true,
playLinkText:              'Play Slideshow',
pauseLinkText:             'Pause Slideshow',
prevLinkText:              '‹ Previous Photo',
nextLinkText:              'Next Photo ›',
nextPageLinkText:          'Next ›',
prevPageLinkText:          '‹ Prev',
enableHistory:             false,
autoStart:                 false,
syncTransitions:           true,
defaultTransitionDuration: 900,
onSlideChange:             function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut:       function(callback) {
this.fadeTo('fast', 0.0, callback);},
onPageTransitionIn:        function() {
this.fadeTo('fast', 1.0);}
});
}); </script>
      </div>

Далее: прописываем а файл header.tpl живущей на адресе catalog/view/theme/тема/template/common

<!--******Слайдер для товара*******-->
<link rel="stylesheet"href="/catalog/view/slider/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="/catalog/view/slider/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/catalog/view/slider/jquery.opacityrollover.js"></script>

<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');</script>
<!--********************************-->

Создаем папку /slider/ по пути /catalog/view/ и скидываем в нее три файла из скаченного примера:

galleriffic-2.css

jquery.galleriffic.js

jquery.opacityrollover.js

 

Дальше в стиле galleriffic-2.css правильно разместите блок большой картинки

div.slideshow-product {
  position: absolute;
  top: -500px;
  left: -80px;

И в админке: Система>Настройки>Изменить>Изображения 

Настройте "Размер большого изображения товара"

 

ВНИМАНИЕ ТОВАРИЩ: если у вас не подключена библа "jquery" ее надо подключить!

Если не заработало то попробуйте сами переписать все самостоятельно.

Ничего сложного нет.

 

 

:ugeek:фсё. 

[yanos]

Спасибо. Прикольный слайдер. Но сделал это с помощью

 

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10817&filter_search=product%20image%20swap&filter_license=0&filter_download_id=39