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):
<?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"> </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"> </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,
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.
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.
Quote from: dimitrijevuk on March 08, 2014, 19:02:08 PM
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.