0
{% FOR goods_images %}
<li><a href="#" data-image="{goods_images.LARGE}" title="{goods_images.NAME}" data="{goods_images.ID}" class="thumblisticon"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
{% ENDFOR %}
замените на
{% FOR goods_images %}
<li data-id="{goods_images.ID}"><a href="{goods_images.LARGE}" title="{goods_images.NAME}" data="{goods_images.ID}" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage:'{goods_images.LARGE}'"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
{% ENDFOR %}
найдите
<div class="product-image">
<a class="general-img" data-id="{GOODS_IMAGE_ID}" href="{GOODS_IMAGE_LARGE}" id="zoom1" title="Увеличить {GOODS_NAME}" itemprop="image">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" />
{% IF GOODS_IS_NEW %}
<span class="ico-new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-sale">Скидка</span>
{% ENDIF %}
</a>
<div class="goodsImageZoom" data="{GOODS_IMAGE_ID}" style="display: none;"><a href="#" title="Увеличить изображение"></a></div>
{% IFNOT goods_images_empty %}
<div class="goodsImageList" style="display: none;">
{% FOR goods_images %}
<div class="thumblist__item" data-id="{goods_images.ID}"><a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a></div>
{% ENDFOR %}
</div>
{% ENDIF %}
</div>
замените на
<div class="product-image" data-id="{GOODS_IMAGE_ID}">
<div class="general-img">
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1" rel="position:'inside',adjustX:0,adjustY:0" title="Увеличить {GOODS_NAME}" itemprop="image">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" />
</a>
{% IFNOT goods_images_empty %}
<div class="goodsImageZoom" data="{GOODS_IMAGE_ID}" style="display: none;"><a href="#" title="Увеличить изображение"></a></div>
<div class="goodsImageList" style="display: none;">
{% FOR goods_images %}
<div class="thumblist__item" data-id="{goods_images.ID}"><a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a></div>
{% ENDFOR %}
</div>
{% ENDIF %}
</div>
</div>
В шаблоне main.js найдите
// Увеличение изображения при нажатии изображение
$(function() {
$('a[rel="gallery"]').fancybox();
// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .thumblist a').click(function(){
if($(this).closest('.thumblist').length) {
$('.goodsImageZoom').attr('data', $(this).attr('data'));
return(true);
}
$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
return(false);
});
// Увеличение при нажатии на кнопку
$("#zoom1").click(function(event){
event.preventDefault();
$(".goodsImageZoom a").click();
});
});
замените на
// Увеличение изображения в карточке товара при наведении если ширина экрана больше 992px
$(window).load(function(){
$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();
});
// Увеличение изображения при нажатии изображение
$(function() {
$('a[rel="gallery"]').fancybox();
// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .thumblist a').click(function(){
if($(this).closest('.thumblist').length) {
$('.goodsImageZoom').attr('data', $(this).attr('data'));
return(true);
}
$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
return(false);
});
// Увеличение при нажатии на кнопку
$("#zoom1").click(function(event){
event.preventDefault();
$(".goodsImageZoom a").click();
});
// Фикс для увеличения изображения при нажатии на изображение
$("#wrap").on('click', '.mousetrap', function(){
$(this).prev().trigger('click');
});
});
В шаблоне main.css в самый низ добавьте
/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {border: 4px solid #888;margin:-4px;background-color:#fff;cursor:move;}
/* This is for the title text. */
.cloud-zoom-title {position: absolute;background-color: #000;color: #fff;padding: 3px;width: 100%;text-align: center;font-size: 12px;top: 0px;max-height: 40px;overflow: hidden;}
.cloud-zoom-big {overflow:hidden;}
/* This is the loading message. */
.cloud-zoom-loading {color:white;background:#222;padding:3px;border:1px solid #000;}
найдите
.product-view .product-img-box .product-image .general-img {position: relative;text-align: center;min-height: 200px;}
замените на
.product-view .product-img-box .product-image .general-img {position: relative;text-align: center;min-height: 200px;overflow: hidden;}
В шаблоне forall.js в самый низ добавьте
/*!
* Cloud Zoom V1.0.3
* Увеличение товара при наведении
* (c) 2010-2012 by R Cecco. <http://www.professorcloud.com>
*/
(function($){var scripts=document.getElementsByTagName("script");var last=scripts[scripts.length-1].src.lastIndexOf("/");var scriptPath=scripts[scripts.length-1].src.slice(0,last);function format(str){for(var i=1;i<arguments.length;i++){str=str.replace("%"+(i-1),arguments[i])}return str}function CloudZoom(jWin,opts){var sImg=$("img",jWin);var img1;var img2;var zoomDiv=null;var $mouseTrap=null;var lens=null;var $tint=null;var softFocus=null;var $ie6Fix=null;var zoomImage;var controlTimer=0;var cw,ch;var destU=0;var destV=0;var currV=0;var currU=0;var filesLoaded=0;var mx,my;var ctx=this,zw;setTimeout(function(){if($mouseTrap===null){var w=jWin.width();jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>',w/3,(w/2)-(w/6)));$("cloud-zoom-loading",jWin.parent()).css("opacity",0.5)}},200);var ie6FixRemove=function(){if($ie6Fix!==null){$ie6Fix.remove();$ie6Fix=null}};this.removeBits=function(){if(lens){lens.remove();lens=null}if($tint){$tint.remove();$tint=null}if(softFocus){softFocus.remove();softFocus=null}ie6FixRemove();$(".cloud-zoom-loading",jWin.parent()).remove()};this.destroy=function(){jWin.data("zoom",null);if($mouseTrap){$mouseTrap.unbind();$mouseTrap.remove();$mouseTrap=null}if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.fadedOut=function(){if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.controlLoop=function(){if(lens){var x=(mx-sImg.offset().left-(cw*0.5))>>0;var y=(my-sImg.offset().top-(ch*0.5))>>0;if(x<0){x=0}else{if(x>(sImg.outerWidth()-cw)){x=(sImg.outerWidth()-cw)}}if(y<0){y=0}else{if(y>(sImg.outerHeight()-ch)){y=(sImg.outerHeight()-ch)}}lens.css({left:x,top:y});lens.css("background-position",(-x)+"px "+(-y)+"px");destU=(((x)/sImg.outerWidth())*zoomImage.width)>>0;destV=(((y)/sImg.outerHeight())*zoomImage.height)>>0;currU+=(destU-currU)/opts.smoothMove;currV+=(destV-currV)/opts.smoothMove;zoomDiv.css("background-position",(-(currU>>0)+"px ")+(-(currV>>0)+"px"))}controlTimer=setTimeout(function(){ctx.controlLoop()},30)};this.init2=function(img,id){filesLoaded++;if(id===1){zoomImage=img}if(filesLoaded===2){this.init()}};this.init=function(){$(".cloud-zoom-loading",jWin.parent()).remove();$mouseTrap=$(".mousetrap",jWin.parent());if(!$mouseTrap.length){var $m=$("<div class='mousetrap' style='background-image:url(\""+scriptPath+"/blank.png\")'></div>");$mouseTrap=jWin.parent().append($m).find(":last");$mouseTrap=$(".mousetrap",jWin.parent())}$mouseTrap.css({width:sImg.outerWidth(),height:sImg.outerHeight(),top:0,left:0,position:"absolute",zIndex:9999});$mouseTrap.bind("mousemove",this,function(event){mx=event.pageX;my=event.pageY});$mouseTrap.bind("mouseleave",this,function(event){clearTimeout(controlTimer);if(lens){lens.fadeOut(299)}if($tint){$tint.fadeOut(299)}if(softFocus){softFocus.fadeOut(299)}zoomDiv.fadeOut(300,function(){ctx.fadedOut()});return false});$mouseTrap.bind("mouseenter",this,function(event){mx=event.pageX;my=event.pageY;zw=event.data;if(zoomDiv){zoomDiv.stop(true,false);zoomDiv.remove()}var xPos=opts.adjustX,yPos=opts.adjustY;var siw=sImg.outerWidth();var sih=sImg.outerHeight();var w=opts.zoomWidth;var h=opts.zoomHeight;if(opts.zoomWidth=="auto"){w=siw}if(opts.zoomHeight=="auto"){h=sih}var appendTo=jWin.parent();switch(opts.position){case"top":yPos-=h;break;case"right":xPos+=siw;break;case"bottom":yPos+=sih;break;case"left":xPos-=w;break;case"inside":w=siw;h=sih;break;default:appendTo=$("#"+opts.position);if(!appendTo.length){appendTo=jWin;xPos+=siw;yPos+=sih}else{w=appendTo.innerWidth();h=appendTo.innerHeight()}}zoomDiv=$(".cloud-zoom-big",appendTo);if(zoomDiv.length){zoomDiv.replaceWith(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(":last")}else{zoomDiv=appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(":last")}zoomDiv=$(".cloud-zoom-big",appendTo);if(sImg.attr("title")&&opts.showTitle){zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>',sImg.attr("title")));$(".cloud-zoom-title",zoomDiv).css("opacity",opts.titleOpacity)}if($.browser&&$.browser.msie&&$.browser.version<7){$ie6Fix=$('<iframe frameborder="0" src="#"></iframe>').css({position:"absolute",left:xPos,top:yPos,zIndex:99,width:w,height:h}).insertBefore(zoomDiv)}zoomDiv.fadeIn(500);if(lens){lens.remove();lens=null}cw=(sImg.outerWidth()/zoomImage.width)*zoomDiv.width();ch=(sImg.outerHeight()/zoomImage.height)*zoomDiv.height();lens=$(".cloud-zoom-lens",jWin);if(lens.length){lens.replaceWith(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(":last")}else{lens=jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(":last")}lens=$(".cloud-zoom-lens",jWin);$mouseTrap.css("cursor",lens.css("cursor"));var noTrans=false;if(opts.tint){lens.css("background",'url("'+sImg.attr("src")+'")');$tint=jWin.append(format('<div class="cloud-zoom-tint" style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />',sImg.outerWidth(),sImg.outerHeight(),opts.tint)).find(":last");$tint=$(".cloud-zoom-tint",jWin);$tint.css("opacity",opts.tintOpacity);noTrans=true;$tint.fadeIn(500)}if(opts.softFocus){lens.css("background",'url("'+sImg.attr("src")+'")');jWin.append(format('<div class="cloud-zoom-soft" style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />',sImg.outerWidth()-2,sImg.outerHeight()-2,opts.tint));softFocus=$(".cloud-zoom-soft",jWin);softFocus.css("background",'url("'+sImg.attr("src")+'")');softFocus.css("opacity",0.5);noTrans=true;softFocus.fadeIn(500)}if(!noTrans){lens.css("opacity",opts.lensOpacity)}if(opts.position!=="inside"){lens.fadeIn(500)}zw.controlLoop();return})};img1=new Image();$(img1).load(function(){ctx.init2(this,0)});img1.src=sImg.attr("src");img2=new Image();$(img2).load(function(){ctx.init2(this,1)});img2.src=jWin.attr("href")}$.fn.CloudZoom=function(options){try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}this.each(function(){var relOpts,opts;eval("var a = {"+$(this).attr("rel")+"}");relOpts=a;if($(this).is(".cloud-zoom")){$(this).css({position:"relative",display:"inline-block"});$("img",$(this)).css({display:"block"});if($(this).parent().attr("id")!="wrap"){$(this).wrap('<div id="wrap" style="top:0px;z-index: 7;position:relative;"></div>')}opts=$.extend({},$.fn.CloudZoom.defaults,options);opts=$.extend({},opts,relOpts);$(this).data("zoom",new CloudZoom($(this),opts))}else{if($(this).is(".cloud-zoom-gallery")){opts=$.extend({},relOpts,options);$(this).data("relOpts",opts);$(this).bind("click",$(this),function(event){var data=event.data.data("relOpts");$("#"+data.useZoom).data("zoom").destroy();$("#"+data.useZoom).attr("href",event.data.attr("href"));$("#"+data.useZoom+" img").attr("src",event.data.data("relOpts").smallImage);$("#"+event.data.data("relOpts").useZoom).CloudZoom();return false})}}});return this};$.fn.CloudZoom.defaults={zoomWidth:"auto",zoomHeight:"auto",position:"right",tint:false,tintOpacity:0.5,lensOpacity:0.5,softFocus:false,smoothMove:3,showTitle:true,titleOpacity:0.5,adjustX:0,adjustY:0}})(jQuery);
Далее чтобы исправить ошибку в мобильной версии нужно заменить в main.js у данного кода loop: true, на loop: false, у слайдеров "Сопутствующие товары" и "С этим товаром смотрят"
loop - параметр зацикливания слайдера
В шаблоне main.js найдите
// Сопутствующие товары
jQuery(function($) {
var owl = $('.related-goods .products-grid');
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items < size){
$('.related-goods .navigation').hide();
} else {
$('.related-goods .navigation').show();
}
});
// Запуск слайдера
owl.owlCarousel({
responsiveClass:true,
responsive:{
0:{items:1},
480:{items:1},
641:{items:2},
991:{items:3},
1400:{items:4}
},
loop: true,
lazyLoad: false,
pagination: false,
touchDrag: false,
mouseDrag: false,
autoplay: false,
autoplayHoverPause: true,
autoHeight: true
});
// Кнопки навигации
$('.related-goods .navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.related-goods .navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
});
замените на
// Сопутствующие товары
jQuery(function($) {
var owl = $('.related-goods .products-grid');
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items < size){
$('.related-goods .navigation').hide();
} else {
$('.related-goods .navigation').show();
}
});
// Запуск слайдера
owl.owlCarousel({
responsiveClass:true,
responsive:{
0:{items:1},
480:{items:1},
641:{items:2},
991:{items:3},
1400:{items:4}
},
loop: false,
lazyLoad: false,
pagination: false,
touchDrag: false,
mouseDrag: false,
autoplay: false,
autoplayHoverPause: true,
autoHeight: true
});
// Кнопки навигации
$('.related-goods .navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.related-goods .navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
});
найдите
// С этим товаром смотрят
jQuery(function($) {
var owl = $('.related-views .products-grid');
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items < size){
$('.related-views .navigation').hide();
} else {
$('.related-views .navigation').show();
}
});
// Запуск слайдера
owl.owlCarousel({
responsiveClass:true,
responsive:{
0:{items:1},
480:{items:1},
641:{items:2},
991:{items:3},
1400:{items:4}
},
loop: true,
lazyLoad: false,
pagination: false,
touchDrag: false,
mouseDrag: false,
autoplay: false,
autoplayHoverPause: true,
autoHeight: true
});
// Кнопки навигации
$('.related-views .navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.related-views .navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
});
замените на
// С этим товаром смотрят
jQuery(function($) {
var owl = $('.related-views .products-grid');
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items < size){
$('.related-views .navigation').hide();
} else {
$('.related-views .navigation').show();
}
});
// Запуск слайдера
owl.owlCarousel({
responsiveClass:true,
responsive:{
0:{items:1},
480:{items:1},
641:{items:2},
991:{items:3},
1400:{items:4}
},
loop: false,
lazyLoad: false,
pagination: false,
touchDrag: false,
mouseDrag: false,
autoplay: false,
autoplayHoverPause: true,
autoHeight: true
});
// Кнопки навигации
$('.related-views .navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.related-views .navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
});
