Hallo,
ich möchte euch heute zeigen wie Ihr mit [B]NUR[/B] zwei kleineren veränderungen ein besseres Popup Fenster im Shop (Azure Template) bekommt.
Dabei werden die Zoom Bilder beim Klick auf das Artikelbild vergrößert (Produktdetailseite) und alle Popup Fenster im Shop werden beim Klick außerhalb der Popup Fenster geschloßen.
[B]Schritt 1.[/B]
Shop[B][I]/application/views/azure/tpl/page/details/inc/productmain.tpl[/I][/B]
Suchen:
[{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">
Ersetzen:
[{oxscript add="$('#zoomTrigger').oxModalPopup({target:'#zoomModal'});"}]
[{oxscript add="$('#zoomTriggerDiv').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 id="zoomTriggerDiv" class="picture">
[B]Schritt 2.[/B]
Shop[B][I]/out/azure/src/js/widgets/oxmodalpopup.js[/I][/B]
Suchen:
} else {
el.click(function(){
if (options.loadUrl){
$(options.target).load(options.loadUrl);
}
self.openDialog(options.target, options);
return false;
});
}
Ersetzen:
} else {
$('body').click(function(e) {
if ($(options.target).is(':visible') && !$(e.target).closest('.ui-dialog').length){
$( options.target ).dialog("close");
return false;
}
});
el.click(function(){
if (options.loadUrl){
$(options.target).load(options.loadUrl);
}
self.openDialog(options.target, options);
return false;
});
}
Grüße
Rafig