Original size of image in product page not displaying

[dimitrijevuk]

Hello,

Please help me with the following issue:

After updating Virtuemart to version 2.0.26d, on Joomla 2.5.16, main image in product page starts displaying as a thumb, instead as usually original size.
After hours and hours trying to fix the problem (with default-images.php file) nothing helped.

Please, I need your quick help.

Example product page: http://pixiekid.hr/mei-tai-nosiljke/mei-tai-nosiljka-elephantel-detail

This is my default-images.php file, from template/html directory (after Virutemart update):

Code Select Expand

<?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 5406 2012-02-09 12:22:33Z alatak $
 */
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

//jimport( 'joomla.html.parameter' );
//jimport( 'joomla.application.module.helper' );
//$module = JModuleHelper::getModule('vm_flexible_zoom_effect');
//$moduleParams = new JRegistry();
//$moduleParams->loadString($module->params);
//$visibleSlide2 = $params->get('visibleSlide');
jimport( 'joomla.html.parameter' );
jimport( 'joomla.application.module.helper' );
$module = JModuleHelper::getModule( 'vm_flexible_zoom_effect' );
$params = new JParameter( $module->params ); 
$visibleSlide = $params->get('visibleSlide');
//echo '<pre>';
//print_r( $module );
//echo '</pre>';

?>
<!-- Flexible Web Design Zoom Effect START -->


<?php // Product Main Image
if (!empty($this->product->images[0]->file_url_thumb)) { ?>

<div class="main-image"> <a href="<?php echo $this->product->images[0]->file_url;?>" class = 'flexible-zoom' id='zoom1' title="<?php echo $this->product->product_name ?>" ><img src="<?php echo $this->product->images[0]->file_url;?>" alt="<?php echo $this->product->product_name ?>" class="product-image" /></a> </div>
<div class="flexible-zoom-magnify"><a id="flexible_lightbox" class="flexibleGallery" href="<?php echo $this->product->images[0]->file_url;?>"><span class="flexible-zoom-magnify"></span> <span class="flexible-zoom-magnify-text"></span> </a></div>
<?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 ?>
<?php // Showing The Additional Images
if(!empty($this->product->images) && count($this->product->images)>1) { 
if (count($this->product->images) > $visibleSlide) { 
// if additional images are greater than "visible thumbnail" number you set through module parameters, then below will be visible
?>
<center>
<div id="flexible-zoom-additionalImagesWrap" class="flexible-zoom-additionalImagesWrap">
  <div style="cursor: pointer;" class="more-views-arrow prev">&nbsp;</div>
  <div class="flexible-zoom-additionalImages">
    <ul class="additionalImagesslider" style="position: relative;overflow: hidden; height:72px;">
      <?php // List all Images
$i = 0;
foreach ($this->product->images as $image) {
$ImageId = $i++;
?>
      <li class="flexible-zoom-additionalImages-slide" style="height:72px; width:72px;"> <a href="<?php echo $this->product->images[$ImageId]->file_url;?>" name="<?php echo JURI::root(); ?><?php echo $this->product->images[$ImageId]->file_url;?>" class="flexible-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo JURI::root(); ?><?php echo $this->product->images[$ImageId]->file_url;?>'"><img src="<?php echo $this->product->images[$ImageId]->file_url_thumb;?>" class="zoom-tiny-image-additional" style="max-height: 70px;max-width: 70px;"  /></a> <a  class="flexibleGallery" href="<?php echo $this->product->images[$ImageId]->file_url;?>"></a> </li>
      <?php } ?>
    </ul>
  </div>
  <div style="cursor: pointer;" class="more-views-arrow next">&nbsp;</div>
</div>
</center>
<?php
} else {  
// if additional images are less than "visible thumbnails" you set through module parameters, then below will be visible
?>
<div id="additionalImagesNoScroll">
<ul id="noScrolling" class="additionalImagesslider">
      <?php // List all Images
$i = 0;
foreach ($this->product->images as $image) {
$ImageId = $i++;
?>
      <li class="flexible-zoom-additionalImages-slide" style="height:72px; width:72px;"> <a href="<?php echo $this->product->images[$ImageId]->file_url;?>" name="<?php echo JURI::root(); ?><?php echo $this->product->images[$ImageId]->file_url;?>" class="flexible-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo JURI::root(); ?><?php echo $this->product->images[$ImageId]->file_url;?>'"><img src="<?php echo $this->product->images[$ImageId]->file_url_thumb;?>" class="zoom-tiny-image-additional" style="max-height: 70px;max-width: 70px;"  /></a> <a  class="flexibleGallery" href="<?php echo $this->product->images[$ImageId]->file_url;?>"></a> </li>
      <?php } ?>
    </ul>
    </div>
<?php }
 } // Showing The Additional Images END 
?>
<!-- Flexible Web Design Zoom Effect END -->



Thank you for your help.
Best regards,

[Eugen S.]

Please open:
http://pixiekid.hr/components/com_virtuemart/assets/css/vmsite-ltr.css

and edit line 164 where you see this:

.main-image img {
    max-height: 260px;
    max-width: 100%;
}


Remove the "max-height:...;" statement or increase the value to your needs.

[dimitrijevuk]

Thanks Eugen.
Meanwhile I solve the problem using Flexible Zoom module css. file:
Virtuemart (with Vm2.0.26d) puts a "max-height" CSS rule for the product pictures to limit its size (btw, I can not see the appropriate reason for that).
I just needed to disable that and I managed to do it with flexible-zoom.css file by adding div.main-image img { max-height:none;} at the end of that file.

[Eugen S.]

Thanks Eugen.
Meanwhile I solve the problem using Flexible Zoom module css. file:
Virtuemart (with Vm2.0.26d) puts a "max-height" CSS rule for the product pictures to limit its size (btw, I can not see the appropriate reason for that).
I just needed to disable that and I managed to do it with flexible-zoom.css file by adding div.main-image img { max-height:none;} at the end of that file.

Yes - you basically overwrote the VirtueMart css statement.

Thats also a solution.