Я поставил себе вот такой слайдер вместо дефолтного.
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:фсё.