当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Additional Image Zoom - Issue - Elevate Zoom script

问题描述:

I'm Using Joomla 3.4.3

and Virtuemart 3.0.9.4

On my product detail page, the main picture and the additional images will be displayed. If you click on an additional image changes accordingly the main picture. The zoom function works in the main picture and ready.

When I click on an additional image and the main image changes accordingly in eg a yellow fountain pen but still the default image (blue fountain pen) displayed in the Zoom window.

I guess that there is a problem are or the like with the allocation of the product-> images-> fileURL.

Here is a Link to my Website:

My Webseite - Productdetails - Zoom

Did any of you a proposed solution.

My default_images.php:

<?php

/**

*

* Show the product details page

*

* @package VirtueMart

* @subpackage

* @author Max Milbers, Valerie Isaksen

* @link http://www.virtuemart.net

* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.

* @license http://www.gnu.org/copyleft/gpl.html 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>

My default_images_additional.php:

<?php

/**

*

* Show the product details page

*

* @package VirtueMart

* @subpackage

* @author Max Milbers, Valerie Isaksen

* @link http://www.virtuemart.net

* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.

* @license http://www.gnu.org/copyleft/gpl.html 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:outside 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 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>

Thank You

Mike Buchholz

分享给朋友:
您可能感兴趣的文章:
随机阅读: