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
Meine default_images.php mit dem Zoom Aufruf:
ZitatAlles anzeigen<?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>
Meine default_images_additional.php:
ZitatAlles anzeigen<?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>