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
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[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 ?>
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');
?>
<?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>