Productdetails Additional Images Zoom Funktion Problem

Guten Tag,

ich habe auf meiner Productdetails Seite eine Zoomfunktion mit dem Elevatorzoom eingebaut. Die Zoomfunktion ansich funktioniert soweit.
Links werden die Additional Images angezeigt und bei einem Klick auf eins von diesen ändert sich auch das Hauptbild dementsprechend.

Aber meine Zoomfunktion zoomt immer nur das Standardbild. Obwohl das Hauptbild z.B. grad einen roten Füller anzeigt.

Hier mal ein Link zu meiner Seite:
MKB-Bürokonzepte -Bürobedarf ist unser Konzept

Was müsste ich da im Code abändern damit immer das aktuell angezeigt Bild gezoomt wird?

Zitat

http://www.elevateweb.co.uk/image-zoom/examples

Meine default_images.php mit dem Zoom Aufruf:

Zitat

<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link VirtueMart: Free e-commerce solution
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license The GNU General Public License v3.0 - GNU Project - Free Software Foundation GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 8508 2014-10-22 18:57:14Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
if(VmConfig::get('usefancy',1)){
vmJsApi::addJScript( 'fancybox/jquery.fancybox-1.3.4.pack', false);
vmJsApi::css('jquery.fancybox-1.3.4');
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});

jQuery(".additional-images a.cms-additional-images").removeAttr("rel");
jQuery(".additional-images img.cms-image-hover").click(function() {
jQuery(".additional-images a.cms-additional-images").attr("rel","vm-additional-images" );
jQuery(this).parent().children("a.cms-additional-images").removeAttr("rel");
var src = jQuery(this).parent().children("a.cms-additional-images").attr("href");
jQuery(".main-image img").attr("src",src);
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",src );
jQuery(".main-image a").attr("title",this.alt );
jQuery(".main-image .vm-img-desc").html(this.alt);
});
}
';
} else {
vmJsApi::addJScript( 'facebox',false );
vmJsApi::css( 'facebox' );
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").facebox();
var imgtitle = jQuery("span.vm-img-desc").text();
jQuery("#facebox span").html(imgtitle);
}
';
}
vmJsApi::addJScript('imagepopup',$imageJS);

if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>

<div class="main-image">

<meta itemprop="image" content="<?php echo JURI::base().$this->product->images[0]->file_url_thumb; ?>">
<?php echo $image->displayMediaFull("id='zoom_01'",true,"rel='vm-additional-images'"); ?>

</div>
<?php
}
?>

<script type="text/javascript">

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_01").elevateZoom({gallery : "gal1", galleryActiveClass: "active", zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, tint:true, tintColour:'#083B6A', tintOpacity:0.5 });
$("#zoom_01").bind("click", function(e) { var ez = $('#zoom_01').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; });
</script>

Alles anzeigen

Meine default_images_additional.php:

Zitat

<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link VirtueMart: Free e-commerce solution
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license The GNU General Public License v3.0 - GNU Project - Free Software Foundation GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 7784 2014-03-25 00:18:44Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
?>

<div class="additional-images floatleft" style="width:80px; margin: 0;">
<div id="mkb_jcarousel" class="jcarousel-skin-cmsmart">
<div class="jcarousel-container jcarousel-container-vertical" style="position: relative; display: block;">
<div id="gal1" class="jcarousel-clip jcarousel-clip-vertical" style="position: relative;height: 350px;overflow:hidden; width:80px;">

<?php
$start_image = VmConfig::get('add_img_main', 1) ? 0 : 1;
for ($i = $start_image; $i < count($this->product->images); $i++) {
$image = $this->product->images[$i];
?>
<ul id="CMS-images" class="jcarousel-list" style="position: relative; overflow: hidden;">
<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" style="float:left; list-style:none">
<?php
if(VmConfig::get('add_img_main', 1)) {
echo $image->displayMediaThumb('class="cms-image-hover" height="auto" width="70px" style="cursor: pointer"',false,$image->file_description);
echo '<a href="'. $image->file_url .'" class="cms-additional-images image-'. $i .'" title="'. $image->file_meta .'"></a>';
} else {
echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);
}
?>
</li>
</ul>
<?php
}
?>

</div>
</div>
</div>
<div class="clear"></div>
</div>

Alles anzeigen

Das Zoom Problem habe ich von selber gelöst.

Nach langen rumprobieren und Codeschnipsel eines VM2 Plugins habe ich es gelsöt.

Folgender Code:

default_images.php

Zitat

<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link VirtueMart: Free e-commerce solution
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license The GNU General Public License v3.0 - GNU Project - Free Software Foundation GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 8508 2014-10-22 18:57:14Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
if(VmConfig::get('usefancy',1)){
vmJsApi::addJScript( 'fancybox/jquery.fancybox-1.3.4.pack', false);
vmJsApi::css('jquery.fancybox-1.3.4');
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});

jQuery(".additional-images a.cms-additional-images").removeAttr("rel");
jQuery(".additional-images img.cms-image-hover").click(function() {
jQuery(".additional-images a.cms-additional-images").attr("rel","vm-additional-images" );
jQuery(this).parent().children("a.cms-additional-images").removeAttr("rel");
var src = jQuery(this).parent().children("a.cms-additional-images").attr("href");
jQuery(".main-image img").attr("src",src);
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",src );
jQuery(".main-image a").attr("title",this.alt );
jQuery(".main-image .vm-img-desc").html(this.alt);
});
}
';
} else {
vmJsApi::addJScript( 'facebox',false );
vmJsApi::css( 'facebox' );
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").facebox();
var imgtitle = jQuery("span.vm-img-desc").text();
jQuery("#facebox span").html(imgtitle);
}
';
}
vmJsApi::addJScript('imagepopup',$imageJS);

if (!empty($this->product->images[0]->file_url_thumb)) {
//$image = $this->product->images[0];

$g= "/";
$img = JURI::root().$this->product->images[0]->file_url;


$imgu = $g.$img;

?>

<div class="main-image">

<a class="fancybox2" href="<?php echo JURI::root().$this->product->images[0]->file_url;?>" title="<?php echo $this->product->product_name ?>" > <img src="<?php echo JURI::root().$this->product->images[0]->file_url;?>" id="zoom_01" <?php if (count($this->product->images) > 1 ) echo 'class="FlexibleGallery"'; ?> data-zoom-image="<?php echo JURI::root().$this->product->images[0]->file_url;?>" alt="<?php echo $this->product->product_name ?>" /> </a>

<div class="clear"></div>
</div>

<?php

?>

<?php } else { // or show the "picture not available" image
echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true);
} // Product Main Image END ?>

Alles anzeigen

default_images_additional.php

Zitat

<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link VirtueMart: Free e-commerce solution
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license The GNU General Public License v3.0 - GNU Project - Free Software Foundation GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 7784 2014-03-25 00:18:44Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
?>
<?php // Showing The Additional Images
if(!empty($this->product->images) && count($this->product->images)>1) {

// if additional images are greater than "visible thumbnail" number you set through module parameters, then below will be visible
?>

<div class="additional-images floatleft" style="width:80px; margin: 0;">
<div id="mkb_jcarousel" class="jcarousel-skin-cmsmart">
<div class="jcarousel-container jcarousel-container-vertical" style="position: relative; display: block;">
<div id="gallery_01" class="jcarousel-clip jcarousel-clip-vertical" style="position: relative;height: 350px;overflow:hidden; width:80px;">
<ul id="CMS-images" class="jcarousel-list" style="position: relative; overflow: hidden;">
<?php
//$start_image = VmConfig::get('add_img_main', 1) ? 0 : 1;
//for ($i = $start_image; $i < count($this->product->images); $i++) {
//$image = $this->product->images[$i];
//$count_images = count ($this->product->images);
$i = 0;
foreach ($this->product->images as $image) {
$ImageId = $i++;

?>
<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" style="float:left; list-style:outside none"> <a href="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" rel="<?php echo $this->product->images[$ImageId]->file_description;?>" title="<?php echo $this->product->images[$ImageId]->file_meta;?>" data-image="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" data-zoom-image="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" class="<?php if ($i=='1') echo 'active';?>"> <span><img src="<?php echo JURI::root().$this->product->images[$ImageId]->file_url_thumb;?>" alt="<?php echo $this->product->images[$ImageId]->file_meta;?>" />

</span> </a> </li>
<?php
}
?>

</ul>
<?php
}
?>

<!--<div class="jcarousel-prev jcarousel-prev-vertical"></div>
<div class="jcarousel-prev jcarousel-next-vertical"></div>-->
</div>
</div>
</div>
<div class="clear"></div>
</div>

<div class="clear"></div>

Alles anzeigen