Virtuemart Expert

Peter van Westen / Nonumber.nl has released a new plugin these days: "Tooltip". It is still beta, but already works very well. This plugin allows to add tooltips to content very easy - and it is also possible to add image-tooltips. This is what this tip is about:

Use Nonumbers Tooltip plugin to show the product-full-image in Virtuemart

It is very easy to add a simple image-zoom with this plugin. Open the templatefile of your theme where you want to use the plugin - e.g. /components/com_virtuemart/themes/default/templates/product_details/flypage.tpl.php. Find the place where the thumb-image is displayed. Here it is

<?php echo $product_image ?>

Enclose this PHP-block with the tooltip plugin tag and add the full-image-url. In our example, it could look like this:

{tip <img src="<?php echo IMAGEURL.'product/'.ps_product::get_field($product_id,'product_full_image'); ?>" class="vmxtooltipimage">}<?php echo $product_image ?>{/tip}

This should be enough to display the full-image when you move the mouse over the thumb. Example:

BTW: if you sometimes have very large full-images, you can also add the full-image with virtuemarts resize-tool (show_img_in_imagetag). If you don't want to do this, there is a CSS trick to scale images: max-height: 300px;max-width: 300px; This will scale the image proportional to a max of 300px on each side. It works in most modern browsers. (The full image is still loaded. It will just be displayed smaller. This is no way to save bandwidth.)

TrackBack URI for this entry

Comments (6)