Cleanest way to deactivate zoom?

English forums
1

Title says it all. The article image zoom code is quite ingrained in the template. Whats the best technique to remove this feature?

2

Simply remove that if/else statement so we’re just left with <div class=“picture”>?

[{block name=“details_productmain_zoom”}]
[{if $oView->showZoomPics()}]
[{oxscript include=“js/widgets/oxmodalpopup.js” priority=10 }]
[{oxscript add=“$(‘#zoomTrigger’).oxModalPopup({target:‘#zoomModal’});”}]
<a id=“zoomTrigger” rel=“nofollow” href=“#”>Zoom</a>
[{oxscript include=“js/libs/cloudzoom.js” priority=10}]
[{oxscript add=“$(‘.cloud-zoom, .cloud-zoom-gallery’).CloudZoom();”}]
<div class=“picture”>
<a href=“[{$oPictureProduct->getMasterZoomPictureUrl(1)}]” class=“cloud-zoom” id=“zoom1” rel=“adjustY:-2, zoomWidth:‘354’, fixZoomWindow:‘390’, trImg:‘[{$oViewConf->getImageUrl(‘dot.png’)}]’, loadingText:‘[{oxmultilang ident=“PAGE_DETAILS_ZOOM_LOADING”}]’”>
<img itemprop=“image” src=“[{$oView->getActPicture()}]” alt=“[{$oPictureProduct->oxarticles__oxtitle->value|strip_tags}] [{$oPictureProduct->oxarticles__oxvarselect->value|strip_tags}]”>
</a>
</div>
[{else}]
<div class=“picture”>
<img itemprop=“image” src=“[{$oView->getActPicture()}]” alt=“[{$oPictureProduct->oxarticles__oxtitle->value|strip_tags}] [{$oPictureProduct->oxarticles__oxvarselect->value|strip_tags}]”>
</div>
[{/if}]
[{/block}]

3

I also want to remove the zoom function. But its hard to remove! It seems that the variants selector is connected to some functions from cloudzoom.

Simply removing the mentioned part does not work! The variants are not selectable anymore.

Simply removing the JS lines don’t work either:


[{oxscript include="js/libs/cloudzoom.js" priority=10}]
[{oxscript add="$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();"}]

So how to remove this function?

EDIT////
One quick&dirty solution:
Simply add to oxid.css:


div.mousetrap {display:none;}

This hack works for me…

4

i kind of likeimage zoom in c# function. when i click, it directly zoom in and out for me. anyway it is difficult to remove.

5

Dear morfer,

Thanks for the easy css workaround.

Here are some additions w/o hover on main Image and w/o bugs in devtool up to current Oxid 487 Azure Theme.
[B]
(1) oxid.css: added this to drop the cloud[/B]

div.mousetrap {display:none;}

[B] (2) productmain.tpl block: changed the <a> to <tag> this turns off hover[/B]

[{block name="details_productmain_zoom"}]
    [{oxscript include="js/libs/cloudzoom.js" priority=10}]
    [{if $oView-&gt;showZoomPics()}]
        [{oxscript include="js/widgets/oxmodalpopup.js" priority=10 }]
        [{oxscript add="$('#zoomTrigger').oxModalPopup({target:'#zoomModal'});"}]
        &lt;a id="zoomTrigger" rel="nofollow" href="#"&gt;Zoom&lt;/a&gt;
        [{oxscript add="$('#zoom1').attr( 'rel', $('#zoom1').attr('data-zoomparams'));"}]
        [{oxscript add="$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();"}]
        &lt;div class="picture"&gt;

[B] <tag[/B] href="[{$oPictureProduct->getMasterZoomPictureUrl(1)}]" class=“cloud-zoom” id=“zoom1” rel=’’ data-zoomparams=“adjustY:-2, zoomWidth:‘354’, fixZoomWindow:‘390’, trImg:’[{$oViewConf->getImageUrl(‘dot.png’)}]’, loadingText:’[{oxmultilang ident=“LOADING”}]’”>
<img src="[{$oView->getActPicture()}]" alt="[{$oPictureProduct->oxarticles__oxtitle->value|strip_tags}] [{$oPictureProduct->oxarticles__oxvarselect->value|strip_tags}]">
[B] </tag>[/B]
</div>
[{else}]
<div class=“picture”>
<img src="[{$oView->getActPicture()}]" alt="[{$oPictureProduct->oxarticles__oxtitle->value|strip_tags}] [{$oPictureProduct->oxarticles__oxvarselect->value|strip_tags}]">
</div>
[{/if}]
[{/block}]

[B] (3) cloudzoom.js: uncommented this function to drop “loading” indicator[/B]

/*
setTimeout(function () {
// <img src="/images/loading.gif"/>
if ($mouseTrap === null) {
var w = jWin.width();
var tagetW = sImg.width()+“px”;
var targetH = sImg.height()+“px”;
var targetLeft = sImg.position().left+“px”;
var targetTop = sImg.position().top+“px”;
jWin.parent().append(format(’<div style=“width:’+tagetW+’;height:’+targetH+’;position:absolute;top:’+targetTop+’;left:’+targetLeft+’;text-align:center” class=“cloud-zoom-loading” >’+opts.loadingText+’</div>’, w / 3, (w / 2) - (w / 6))).find(’:last’).css(‘opacity’, 0.5);
}
}, 200);
*/

Hope this helps some other guys to get completely rid of the cloud.