Installation

Install the extension using standard Joomla! installation procedure (Extensions -> Install/Uninstall).

Setup

Steps to work with the module:

• After you install the extension you can adjust the settings in Extensions -> Module Manager -> Art ZoomIn

• If you would like to show single image with zoom in effect you can specify Small Image and Big Image like on the following screenshot:
  
  
  
  Small image is the thumbnail, big image is full size image

• To build a gallery you need to several images: Small Image, Big Image and Tiny Image like like on the following screenshot:
  
  

• You can leave other settings untouched or customize them for your needs

Steps to work with the plugin:

• Plugin should be installed and enabled in Extensions -> Plugin Manager -> Art ZoomIn

• Show zoom effect for single image:
  {artzoomin smallImage="images/1.jpg" bigImage="images/2.jpg"/}

• Show gallery of 3 images with zoom effect:
  {artzoomin smallImage="images/small1.jpg,images/small2.jpg,images/small3.jpg" bigImage="images/big1.jpg,images/big2.jpg,images/big3.jpg" tinyImage="images/tiny1.jpg,images/tiny2.jpg,images/tiny3.jpg"/}

• Plugin attributes:

  • zoomWidth - The width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image
  • zoomHeight - The height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image
  • position - Zoom window position. Possible values: left, right, top, bottom, inside
  • adjustX, adjustY - Allows you to fine tune the x-position and y-position of the zoom window in pixels
  • tint - Specifies a tint color which will cover the small image. Colors should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus. Default value: false
  • tintOpacity, lensOpacity, titleOpacity - Opacity. Default value: 0.5
  • softFocus - Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint
  • smoothMove - Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing. Default value: 3
  • thumbsPosition - Position of thumbnails. Possible values: top, bottom

Add zoom effect to Virtue Mart, Hikashop, JoomShopping, DJCatalog2, K2, Zoo Product Catalog:

• The module package comes with the folder: mod_artzoomin\flypages

• This folder contains flypages/templates for appropriate extension

• It's needed to place appropriate flypage to the folder where extension uses flypages from:

  • For Hikashop this usually is file components\com_hikashop\views\product\tmpl\show_block_img.php
  • For DJ Catalog2 this usually is file components\com_djcatalog2\views\item\tmpl\default.php
  • For Zoo Product Catalog this usually is file plugins\system\item\widgetkit_zoo\elements\image\tmpl\image.php
  • For JoomShopping this usually is file components\com_jshopping\templates\default\product\product_default.php
  • For K2 this usually is file components\com_k2\templates\default\item.php

• Steps to add zoom effect to Virtue Mart 2.x product view page:

  • 1. Install Art Zoom In module via standard Joomla! installation procedure in Extensions -> Extensions manager. Then you can follow either step 2a or 2b
  • 2a. Copy flypage_2.0_art_zoomin.tpl.php file from mod_artzoomin folder of module installation package to components/com_virtuemart/views/productdetails/tmpl folder. Go to Components -> Virtue Mart -> Product Categories -> Select Category -> Default Product Details Page -> Select flypage_2.0_art_zoomin.tpl.php in drop-down and make sure to save it as product details page for this category. Depending on your exact Virtue Mart version, installed Virtue Mart extensions, server configuration and settings this may or may not work for you - i. e. on some systems it is not possible to change default flypage this way. If so, please place both files from free/joomla/new.zip archive to components/com_virtuemart/views/productdetails/tmpl folder and select new as default flypage in category setting
  • 2b. Go to components/com_virtuemart/views/productdetails/tmpl and replace the content of default.php with the content of flypage_2.0_art_zoomin.tpl.php
  • 3. Go to product from selected category to view it on front-end

Please feel free to contact us by email This email address is being protected from spambots. You need JavaScript enabled to view it.This email address is being protected from spambots. You need JavaScript enabled to view it. if any assistance is needed to set this up and running, we are always ready to help.