Jump to content
Sign in to follow this  
yanos

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

Recommended Posts

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

 

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

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

 

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

 

Share this post


Link to post
Share on other sites

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

 

Вот к примеру

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

Share this post


Link to post
Share on other sites

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

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:фсё. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.