Thumbnail in Product Details page - Not working

[sumanguj]

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

Code Select Expand

<?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 ?>

[K&K media production]

I changed it for next version.