Oxid: Entfernen des Zoom

Das Oxid-Standard Theme "Azure" bringt viele nützliche Funktionen mit, wie zum Beispiel einen mouse-over-Zoom.
Doch ist dieses Features leider nicht immer zu gebrauchen.

Da die entsprechenden Includes im Template etwas schwer ausfindig zu machen sind, gibt es hier eine kleine Hilfestellung um den so genannten CloudZoom im Oxid Azure Theme zu entfernen und statt dessen den ZoomTrigger (Lightbox-Popup) zu verwenden.

Datei: out/azure/tpl/page/details/inc/productmain.tpl (Oxid Version 4.6.1 - ab Zeile 36)

        [{block name="details_productmain_zoom"}]
    [{oxscript include="js/libs/cloudzoom.js" priority=10}]
    [{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 add="$('#zoom1').attr( 'rel', $('#zoom1').attr('data-zoomparams'));"}]
        [{oxscript add="$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();"}]
        <div class="picture">
            <a 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="PAGE_DETAILS_ZOOM_LOADING"}]'">
                <img src="[{$oView->getActPicture()}]" alt="[{$oPictureProduct->oxarticles__oxtitle->value|strip_tags}] [{$oPictureProduct->oxarticles__oxvarselect->value|strip_tags}]">
            </a>
        </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}]

durch

        [{block name="details_productmain_zoom"}]
	[{*oxscript include="js/libs/cloudzoom.js" priority=10*}]
	[{if $oView->showZoomPics()}]
		[{oxscript include="js/widgets/oxmodalpopup.js" priority=10}]
		[{oxscript add="$('#zoomTrigger').oxModalPopup({target:'#zoomModal'});"}]
		[{*oxscript add="$('#zoom1').attr( 'rel', $('#zoom1').attr('data-zoomparams'));"*}]
		[{*oxscript add="$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();"*}]
		<div class="picture">
			<a id="zoomTrigger" rel="nofollow" href="#">
				<img src="[{$oView->getActPicture()}]" alt="[{$oPictureProduct->oxarticles__oxtitle->value|strip_tags}] [{$oPictureProduct->oxarticles__oxvarselect->value|strip_tags}]">
			</a>
		</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}]

ersetzen.

Die auskommentierten Includes und oxscript-Anweisungen können, ebenso wie die eigentlichen Dateien (cloudzoom.js) entfernt werden.

Danach muss man nur noch die entsprechende css Klasse in der oxid.css anpassen. (#zoomTrigger)

Datei: out/azure/src/css/oxid.css

        #zoomTrigger {
    position: absolute;
    width: 18px;
    height: 18px;
    display: block;
    text-indent: -9999px;
    position: absolute;
    top: 10px;
    left: 10px;
    float: left;
    z-index: 1000;
    background: url(../../img/zoom.png) no-repeat 0 0;
}

ersetzten mit:

        #zoomTrigger {
    display: block;
}