HOMEPAGE ERSTELLUNG AUS LEIPZIG

Lupen - Script für die Produkte

Eine andere Möglichkeit ist einen Zoom für die Produkte zu integrieren.
Ich habe das JavaScript jquery.jqzoom-core-pack.js verwendet.
Man findet es unter anderen im Modul  LV Image Zoomer 2 .
Hier könnt Ihr euch das Scipt mit der zugehörigen  CSS-Datei downloaden: zoom.zip

Den Script in dem  Ordner js im Template Verzeichnis kopieren.
In deiner Overrides /templates/dein-template/html/com_virtuemart/category/
Die default.php öffnen.
Bei echo $edit_link; */ 
Den Pfad zum Script zufügen.
$document->addScript(JURI::base() . 'js/jquery.jqzoom-core-pack.js');  

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var jQQQ = jQuery.noConflict()

jQQQ(document).ready(function($){
var options = {
zoomType: 'standard',
zoomWidth: 300,
zoomHeight: 300,
xOffset: 5,
yOffset: 0,
position:'right',
preloadImages: false,
preloadText: false,
title: true,
lens: false,
imageOpacity: 0.6,
alwaysOn: false
};
jQQQ('.jqzoom_3').jqzoom(options);
});
/*]]>*/
</script>

Zusätzlich wird der Titel und das "alt" Attribut (Bildbeschreibung) für das jeweilige Produkt eingefügt.

<a class="jqzoom_3" rel='gal1' title="<?php echo JText::_ ($product->product_name); ?>" href="<?php echo $product->images[0]->file_url; ?>">
<img class="featuredProductImage" src="<?php echo $product->images[0]->file_url_thumb; ?>" alt="xml:lang="php"><?php echo JText::_ ($product->product_name); ?>"</a>


Nicht vergessen die CSS Anweisungen dem Stylesheet zufügen.

Veränderung auf der Produkt-Detailseite

Wenn du das kostenlose Plugin Cloud Zoom oder das jquery.jqzoom-core-pack.js  verwenden will,
musst du auf jedem Fall den oberen Script in deiner Overrides /templates/deintemplate/html/com_virtuemart/productdetails/default_images.php
löschen.
 vmJsApi::js( 'fancybox/jquery.fancybox-1.3.4.pack');
vmJsApi::css('jquery.fancybox-1.3.4');
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
jQuery("a[rel=vm-additional-images]").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});
jQuery(".additional-images .product-image").click(function() {
jQuery(".main-image img").attr("src",this.src );
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",this.src );
jQuery(".main-image a").attr("title",this.alt );
});
});
';

Nun kann man die Zeilen

if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>
<div class="main-image"> <<?php
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
?>
in

$document->addScript(JURI::base( $this->template) . 'js/jquery.jqzoom-core-pack.js'); if (!empty($this->product->images)) {
$image = $this->product->images[0];
?> <div class="main-image">
<a class="jqzoom_3" rel='gal1' title="<?php echo JText::_ ($this->product->product_name); ?>" href="/<?php echo $this->product->images[0]->file_url; ?>">
<img class="detail" title="<?php echo JText::_ ($this->product->product_name); ?>" src="/<?php echo $this->product->images[0]->file_url_thumb; ?>" alt="<?php echo JText::_ ($this->product->product_name); ?>" />
</a>
verändern.

Für eine größere Detailansicht:

<div class="main-image"> <a class="jqzoom_3" rel='gal1' title="<?php echo JText::_ ($this->product->product_name); ?>" href="/<?php echo $this->product->images[0]->file_url; ?>">
<img class="detail" width="300" title="<?php echo JText::_ ($this->product->product_name); ?>" src="/<?php echo $this->product->images[0]->file_url; ?>" alt="<?php echo JText::_ ($this->product->product_name); ?>" />
</a>

download: default_images.zip
   
   
Online-Shop Online-Shop