VM product image zoom and size

coleoptera
15 Posts
coleoptera posted this 06 May 2017

VirtueMart 3.X
1/ How disable ZOOM for product image ? (in Themler or VM)
2/ How set to show original size as MAX of product image?

originalsize.jpg
productimage.jpg

VirtueMart 3.X 1/ How disable ZOOM for product image ? (in Themler or VM) 2/ How set to show original size as MAX of product image? !originalsize.jpg!!productimage.jpg!
Vote to pay developers attention to this features or issue.
9 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 08 May 2017

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
coleoptera
15 Posts
coleoptera posted this 08 May 2017

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, > > 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?
Support Team
Support Team posted this 12 May 2017

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

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
contact272
10 Posts
contact272 posted this 17 December 2017

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 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!
Support Team
Support Team posted this 18 December 2017

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:

custom-product-image.png

Thank you,
Olivia

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: !custom-product-image.png! Thank you, Olivia
Giuma
86 Posts
Giuma posted this 21 December 2017

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:

&lt;div class&gt; .........
> `<?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

> 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: > > `&lt;div class&gt;` ......... &gt; `&lt;?php.......?&gt; .................. &gt; 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
Support Team
Support Team posted this 25 December 2017

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

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
Giuma
86 Posts
Giuma posted this 25 December 2017

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?

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

Support Team
Support Team posted this 27 December 2017

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

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
You must log in or register to leave comments