VM product image zoom and size

Hi,

Unfortunately Cloud Zoom effect is hardcoded and cannot be disabled.

Thank you,
Olivia

Hi,

Unfortunately Cloud Zoom effect is hardcoded and cannot be disabled.

Thank you,
Olivia

OK and 2/ How set to show original size as MAX of product image?

Hi,

Sorry for the delay.
Unfortunately this option is not supported too.

If you want, you can output default VM Product Image manually instead of the Themler product Image control. For this add CMS Code control to the place where you want to show the image and insert the following code:

<div class="vm-product-media-container">
<?php
if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>
<div class="main-image">
<?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
<div class="clear"></div>
</div>
<?php
}
?>
</div>

<div class="additional-images">
<?php
$start_image = VmConfig::get('add_img_main', 1) ? 0 : 1;
for ($i = $start_image; $i < count($this->product->images); $i++) {
$image = $this->product->images[$i];
?>
<div class="floatleft">
<?php
if(VmConfig::get('add_img_main', 1)) {
echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description);
echo '<a href="'. $image->file_url .'" class="product-image image-'. $i .'" style="display:none;" title="'. $image->file_meta .'" rel="vm-additional-images"></a>';
} else {
echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);
}
?>
</div>
<?php
}
?>
<div class="clear"></div>
</div>

Then insert the following js to the Themler Settings >> Additional HEAD HTML:

<script>
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});
jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
jQuery(".additional-images img.product-image").click(function() {
jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
jQuery(this).parent().children("a.product-image").removeAttr("rel");
var src = jQuery(this).parent().children("a.product-image").attr("href");
jQuery(".main-image img").attr("src",src);
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",src );
jQuery(".main-image a").attr("title",this.alt );
jQuery(".main-image .vm-img-desc").html(this.alt);
});
}
</script>

This is the code from VM component.
Please note that in this case you will not be able to edit the appearance of these images in Themler. But you will be able to configure them in the way you want manually.

Thank you,
Olivia

Hello support Team, I followed your advice step by step and it works like a charm. 1 question remains though, how can I change the size of the main image? I would like it slightly bigger. I've tried to change it in VM settings but with no result. Could you please help about this. Thanks very much and congratulation for your great work with themler!

Hello,

Themler does not control the size of the Product Image in this case. The size is defined in the following file:
/components/com_virtuemart/assets/css/vm-ltr-site.css

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

As alternative you can try to override these settings using default styling of the images in CMS Code control:

Thank you,
Olivia

Hi,

Sorry for the delay.
Unfortunately this option is not supported too.

If you want, you can output default VM Product Image manually instead of the Themler product Image control. For this add CMS Code control to the place where you want to show the image and insert the following code:

<div class> .........
> `<?php.......?> ..................
> Olivia

thanks so much for this

Please Have you got a soloution also to output the default add to cart popup of VM?

Please a need

Hello,

Please Have you got a soloution also to output the default add to cart popup of VM?

To display the VM add to cart popup the Themler Add To Cart button should be replaced with VM built in code for Add to cart button inside the CMS Code control. Unfortunately there is no other solution because Themler Add To Cart button does not support this VM popup.

Thank you,
Olivia

Thanks can you provide me the correct code for cms custom code?

Please Have you got a soloution also to output the default add to cart popup of VM?

To display the VM add to cart popup the Themler Add To Cart button should be replaced with VM built in code for Add to cart button inside the CMS Code control. Unfortunately there is no other solution because Themler Add To Cart button does not support this VM popup.

Thank you,
Olivia

Thanks can you provide me the correct code for cms custom code?

Last edited 25 December 2017 by Giuma

Hi,

As mentioned above you need the code from VirtueMart. The Product Details template is described here:
joomla\components\com_virtuemart\views\productdetails\tmpl\default.php
it calls the add to cart position and button from this file
joomla\components\com_virtuemart\sublayouts\sublayouts.php
by the following code:
echo shopFunctionsF::renderVmSubLayout('addtocart',array('product'=>$this->product));

The proper code is:
<?php ... line above... ?>

Please note that VM provides own styles like position for this block. In addition to them Themler applied theme styles to the button too. The button may not look good and you will need to adjust its appearance manually.

Thank you,
Olivia