Shopping Basket


Cart empty

Log In

Find Us Elsewhere


Forum Search


This article describes how to use the Image Zoomer for Virtuemart plugin.

Quick Start Guide - Using the Zoomer as a Content Plugin

This should be very quick indeed. Install the package called 'pkg_spiral_imagezoomer', then go to the Joomla plugin manager and enable the plugin called 'Spiral Image Zoomer System Plugin'. If you look at a Virtuemart product in the front end of your site you should now see the Zoomer displayed.

If you do not, remember that there is an option in the Virtuemart configuration to enable Joomla plugins, make sure that this option is turned on, it will not render without it.

plugin manager 2

It probably will not be exactly where you want though, so you may want to edit some plugin options to move it. If you want the Zoomer to replace the main product image you can try enabling the option 'Replace Virtuemart Images' (on the layout tab), this option uses javascript to automatically replace the image. See more about this here.

options system 3

 If you don't want to do this, the plugin offers a choice of content positions: the top or bottom of the product description content, after the title, before the content display, and after the content display. Try these to see the effect: the exact effect will depend on your template.

options system 1

Quick Start Guide - Using the Zoomer as a Virtuemart Custom Field

This method is most useful when you only want to apply the Zoomer to selected products, then you can attach it as a Virtuemart custom field.

Install the plugin as normal using the Joomla installer. Once it is uploaded open the Joomla plugin manager, find the plugin (it is of type 'vmcustom'), and enable it. Once you have done this you will do everything further through Virtuemart, so click on Virtuemart->Products on the Joomla admin menu. Click on custom fields under the 'products heading'. You are going to use the plugin to create a new custom field type, so click the 'New' button. Now you will see the custom field editor (shown below).


Give it a title that will help you remember what the field is, eg 'Image Zoomer', then set the type to 'plugins'. Lower down the page you should see the 'select a plugin' box appear. You should see 'Image Zoomer plugin for Virtuemart' appear in the list of plugins. Select this. You should see the list of options for the zoomer appear. For the moment we don't need to worry about them though, the plugin uses sensible default values for all this, so you should just be able to hit the 'Save and Close' button here. You only need to do all this once. Your new custom field type is now set up.

Adding the Zoomer to your Products

So you can now start adding the zoomer field  to your products. You can add your single custom field type to as many products as you want. Open your selected product in the Virtuemart product editor, and click on the custom fields tab. In the custom field type select box, select the new Image Zoomer field type that you have just created:-


When you have done this you should see the field options appear, which consist of an image browser, and a box for the image title:-


By default the plugin is set up to use the existing product images for the zoomer, so if that is all that you want, then you can just click 'save' here, and you are finished.

Alternatively you can use the image browser to upload a new image here. You just upload the large size image for use in the zoomer, the medium and thumb images will be automatically generated. If you want to show more than one image in the zoomer, select the Image Zoomer again in custom field type select box, and a second image browser should appear, allowing you to upload another image.

 Now remember to click 'Save' or 'Save and Close'. The image zoomer is now set up for your product. Repeat for as many products as you want.

Image Zoomer Options

You may want to customize the appearance of the zoomer. If so you can go back to the global parameters for the custom field, which are accessed through the products->custom fields Virtuemart menu item. Click on the Image Zoomer title to open its editor. The options are shown below:-


You can set the sizes for the large, medium and thumbnail images. It is best to have the same aspect ratio for all your images, and set the image dimensions here to match these. Often square images work well.

If you want to set the zoomer size you will need to change the zoomer size option to 'fixed' and specify the values for width and height, otherwise it will automatically match the medium image size.

The zoomer type option has several values: standard, reverse, inner zoom, drag and always on. The best thing is to experiment with this option to see which version you like, or look at out examples.

Layout Positions

 Virtuemart defines several different positions for displaying custom fields, which controls where they will display on your product page.  The predefined ones are: normal, ontop, onbot, addtocart. If you do not specify a layout position in the global custom field options then the 'normal' one is assumed, but you can assign an alternative position using the layout position option in the global parameters. In another article we describe how you can also create your own custom layout positions and use them to replace the main Virtuemart product image.


Donate to Us

If you like our extensions, consider making a donation to say thanks.


Support Forum