Installation
VJ Zoom is installed using standard Joomla! installation procedure in Joomla! back-end: Extensions -> Extension Manager -> Upload Package File. Both plugin and module are installed.
VJ Zoom module can be configured in Extensions -> Module Manager -> VJ Zoom and can be used to place image/gallery with zoom effect in module positions or articles.
VJ Zoom plugin can be enabled in Extensions -> Plugin Manager -> VJ Zoom and can be used to place image/gallery with zoom effect in articles by using plugin code.
Module Usage
Displaying module
Module Class Suffix indicates specifies CSS class to be applied to this module instance.
Module Assignment in Menu Assignment tab allows to assign module to the pages to be displayed on.
Position in Details tab allows to set module position to render module in.
To place the module in an article assign some unique position to it like pos1, publish module and assign it to all pages. Then place {loadposition pos1} code into article to show the module in it.
It's possible to create many instances of the module in Module Manager by copying it or creating new one.
Single image
To show single image with zoom effect, Small Image and Big Image options should specify the location of small and big image respectively. The locations are relative, i. e. images/1.jpg indicates the image located in JOOMLA_DIR/images/1.jpg.
When the module is published it appears on front-end in a specified module position on specified pages.
Multiple images/gallery
To show gallery of images, Small Image and Big Image options should specify multiple images each located on a new string. Number of small iamges should be the same as number of big images.
On front-end specified images are organized in a gallery.
Module options
Load jQuery option specifies whether jQuery javascript library should be loaded or not. If you use other jQuery instance on the site please turn this off.
Load script option indicates whether JS script for zoom effect should be added to the top or to the bottom of the page. In case of any JS issues try to disable jQuery load and load script on the bottom of the page.
Tint option indicates whether tint should be used or not.
Tint color and Tint opacity specify the styling for the tint (if it's enabled).
Zoom window position indicates where to display zoom window. Lens will display round lens, inner will show zoom effect inside the image. Other positions are indicated below.
Fade in/dafe out zoom window, Easing for zoom window, Responsive zoom configure zoom window effects.
Mousewheel zoom will enable to change the size of zoom effect using mouse scroll.
Cursor specifies how mouse cursor looks like when hovering the image.
Zoom window width and Zoom window height options allow to specify the dimensions for zoom window.
Loading Icon specifies icon to show when big images take too long to load. Default: modules/mod_vjzoom/css/ajax-loader.gif
Plugin Usage
Enabling plugin
In order to use plugin it's necessary to enable VJ Zoom plugin in Extensions -> Plugin Manager -> VJ Zoom.
Using plugin code
To place image/gallery with zoom effect in an article it's needed to place plugin code in article. This plugin code will be automatically replaced with image or gallery.
Single image with zoom effect plugin code example:
{vjzoom smallImage="images/small.jpg" bigImage="images/big.jpg" /}
Image gallery with zoom effect plugin code example:
{vjzoom smallImage="images/small1.jpg,images/small2.jpg,images/small3.jpg" bigImage="images/big1.jpg,images/big2.jpg,images/big3.jpg" /}
Plugin attributes
loadJ option specifies whether jQuery javascript library should be loaded or not. If you use other jQuery instance on the site please turn this off. Default: true.
loadScript option indicates whether JS script for zoom effect should be added to the top or to the bottom of the page. In case of any JS issues try to disable jQuery load and load script on the bottom of the page. Default: bottom. Possible values: bottom, top.
tint option indicates whether tint should be used or not. Default: false.
tintColour and tintOpacity specify the styling for the tint (if it's enabled). Default: #333 and 0.4 respectively.
zoomWindowPosition indicates where to display zoom window. lens will display round lens, inner will show zoom effect inside the image. Other positions are indicated below. Default: 1.
fade, easing, responsive configure zoom window effects. Default: false.
mouseWheelZoom will enable to change the size of zoom effect using mouse scroll. Default: false.
cursor specifies how mouse cursor looks like when hovering the image. Default: default. Possible values: default, cursor, crosshair.
zoomWindowWidth and zoomWindowHeight options allow to specify the dimensions for zoom window. Default: EMPTY.
lensSize specifies the size of the lens (if applicable). Default: 200.
title specifies the title to show for single image.
titleColor specifies the color of the title. Example: black.
loadingIcon specifies icon to show when big images take too long to load. Default: modules/mod_vjzoom/css/ajax-loader.gif
Flypages for Virtue Mart, JoomShopping, HikaShop
VJ Zoom comes with flypages/templates to add zoom effect for Virtue Mart, JoomShopping, Hikashop.
Virtue Mart
If you use default Virtue Mart flypage/template please backup components\com_virtuemart\views\productdetails\tmpl\default_images.php file and place mod_vjzoom\flypages\VirtueMart\default_images.php to this folder.
JoomShopping
If you use default JoomShopping flypage/template please backup components\com_jshopping\templates\default\product\product_default.php file and place mod_vjzoom\flypages\JoomShopping\product_default.php to this folder.
HikaShop
If you use default HikaShop flypage/template please backup components\com_hikashop\views\product\tmpl\show_block_img.php file and place mod_vjzoom\flypages\HikaShop\show_block_img.php to this folder.