I want to show only the resized images in the product details page to cut down on page loading. Show the original ONLY when clicked.
I tried to modify the codes but it is not working. Here's the full code taken from:
components/com_virtuemart/views/productdetails/tmpl/default_images.php
<?php
defined('_JEXEC') or die('Restricted access');
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 );
});
});
';
$document->addScriptDeclaration ($imageJS);
if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>
<div class="main-image">
<?php
echo $image->displayMediaThumb("",true,"rel='vm-additional-images'");
?>
<div class="clear"></div>
</div>
<?php
$count_images = count ($this->product->images);
if ($count_images > 1) {
?>
<div class="additional-images">
<?php
for ($i = 0; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
<div class="floatleft">
<?php
echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,"");
?>
</div>
<?php
}
?>
<div class="clear"></div>
</div>
<?php
}
}
// Showing The Additional Images END ?>
I changed it for next version.