Here is the ready file set for VM 2.0.2
http://forum.virtuemart.net/index.php?topic=97365.msg325332#msg325332The text below is outdated, but can help with understanding what is going on.
In VM 2.0.2 images section is separated in the
default_images.php file.
It's improper to resize images with CSS. Then the larger image is downloaded (over bandwidth use, you download a huge image) and is scaled by browser (you loose image quality if you look at it).
Here is my fix, which corrects the image size and adds prev-next buttons to all images. The main image now popups.
VM 2.0.1.e
J2.5.1
So the problem was after VM update from 2.0.0

The problem is here:
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>The quickest way is to replace the
displayMediaFull with
displayMediaThumb, but it's a poor solution. I have a better one.
So copy
components/com_virtuemart/views/productdetails/tmpl/default.phpto
templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.phpFind code in line about 138
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>
</div>
<?php } // Product Main Image END ?>
<?php // Showing The Additional Images
// if(!empty($this->product->images) && count($this->product->images)>1) {
if(!empty($this->product->images) ) { ?>
<div class="additional-images">
<?php // List all Images
if(count($this->product->images) >0){
foreach ($this->product->images as $image) {
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true).'</div>'; //'class="modal"'
and replace this with code
<?php /*##mygruz20120209121837 {
It was:
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>
It became:*/
//Enable FancyBox plugin
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/fancybox/jquery.fancybox-1.3.4.css');
$document->addScript($front.'js/fancybox/jquery.fancybox-1.3.4.pack.js');
$js = 'jQuery(document).ready(function($) { $("a.gallery").fancybox(); });';
$document->addScriptDeclaration($js);
//output thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true);
//unset first image not to be show amont additional ones
unset ($this->product->images[0]);
/*##mygruz20120209121837 } */?>
</div>
<?php } // Product Main Image END ?>
<?php // Showing The Additional Images
// if(!empty($this->product->images) && count($this->product->images)>1) {
if(!empty($this->product->images) ) { ?>
<div class="additional-images">
<?php // List all Images
if(count($this->product->images) >0){
foreach ($this->product->images as $image) {
/*##mygruz20120209120919 {
It was:
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true).'</div>'; //'class="modal"'
It became:*/
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true).'</div>'; //'class="modal"'
/*##mygruz20120209120919 } */
This will add FancyBox popup to the main image, show it's thumbnail instaed of full size and add next-prev buttons to list the images.


The fixed file is attached, must be unzipped and placed here: templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php
But be carefull! VM is updated often now, so newer version may have some template fixes, which will bit not reflected in the file. So it's better to reapply the code to the latest components/com_virtuemart/views/productdetails/tmpl/default.php after the VM update. I mean till VM is activelty developed.
[attachment cleanup by admin]