Magnify Zoom for ZOO

1. Getting started

ZOO Magnify Zoom is a element for ZOO extension (CCK for Joomla!) which allow to organize a small gallery with zoom effect visualisation that enrich the product page and make it looks professional. The element takes images from specified folder and display them in gallery mode in article at front-end side. When visitor move mouse cursor on middle image, a nice magnify zoom visual effect works on. The element can be used in any ZOO contetn item and application.

In this tutorial you’ll discover step-by-step how to install and configure this element for using it in best way.

2. Installation

ZOO Magnify Zoom can be installed as usual Joomla! extension through Back-end > Extension manager > Install extension. Since it’s a ZOO element, it’s assumed you’re familiar with this CCK. If no, please get started with ZOO documentation.

Once you installed the element, it’s time to assign it to your application. Click on Application manager icon and choose application you’d like to use the element in. Let it be standard blog for expample. We choose Blog and see list of application types. Let’s open current template layout for edit. (i.e. article > default > full) At the right side you’ll find Custom elements. Push on Magnify Zoom element and drag it to the left side as the last element. Here you also may change order of the elements as you need using drag’n’drop mode. Click on Save button. Now the new element has been added to your template layout. Now let’s go to element edit mode and examine all available params. See also:

If you are not familiar how to manage ZOO elements, here is a guide: Assigning ZOO elements to Apps.

3. Configuration

At previous step we’ve installed and assigned ZOO Magnify Zoom element to template layout. Now it’s time to examine params and play with its configuration. Here is a list of params:

ZOO Magnify Zoom element settings
ZOO Magnify Zoom element settings
  • Show label - Show or Hidden Label
  • Alternative label - You Must rename label
  • Enable Jquery - Option to include Jquery 2.1.1 library
  • Include CSS (Yes / No) - This param includes default CSS. Default is yes. If you would prefer to customize styles of the element within assigned Joomla! template, you may disable this param.
  • Style (Box / Inline) - Styles of gallery layout. Box - thumbnails has margins. Inline - thumbnails without margins.
  • Zoom Type - (Lens / Window / Inner) - Format of zoom appearace. Lens - zoom box inside of and within the image. Window - zoom appears in a box from the right side of the image. Inner - the image turns on box with magnified result.
  • Scroll Zoom (No / Yes) - Enable or disable zoom on mousewheel
  • Easing (No / Yes) - Enable or Disable Easing
  • Contain Lens Zoom - Enable or disable Contain Lens Zoom. The Lens type shoule be enabled.
  • Lens size - The size of the zoom box. The param is for Lens type only.
  • Lens shape (Square / Round) - The shape of lens have two mode: square and round.
  • Window position - Position for window. Window type should be enabled.
  • Cursor (Default / Crosshair / Move / Pointer / Zoom-In) - Icon of the cursor. Only for ‘Lens’ or ‘Windlow’ type of zoom.
  • Custom Window position - Here you may select ID for
  • element. zoomdivid is default value.
  • Thumbnail ordering (Ascending / Descending / Random) - Format of thumbnails ordering accoridng the names of files from assigned folder.
  • Show Lens - Enable / Disable Lens box when hovering the image.
  • Lens Border Size (px) - Border size of lens in px.
  • Lens Border color - Lens Border color (hex: #333)
  • Zoom Window Border Size (px) - border for zoom window in px
  • Zoom Window Border Color - color for border zoom window (hex: #333)
  • Zoom Window Width (px)
  • Zoom Window Height (px)
  • Tent (Yes / No) - Adding tent effect on image. When you move cursor on image, it became darker a a bit fuzzy except Lens area.
  • Tint Color - Tint Color: (hex: #333)
  • Tint Opacity - Opacity of tint from 0 to 1. Default value is 0.4
  • Lens Color - Lens Color (Hex: #333)
  • Lens Opacity - Opacity of Lens from 0 to 1. Default value is 0.4. Tint type should be is enabled
  • Thumbnail width (px) - Width of Thumbnail in px.
  • Thumbnail height (px) - Height of Thumbnail in px. Recommended value is 0.
  • Thumbnail Count - Count of thumbails. It’s suitable param if you’d like to limit thumnails and display only specified value. (i.e. image folder have 100 files, but we use only 9-12 images). Default value is 0.
  • Only one Image (No /Yes) - Ability to disable additional thumbnails and display the only image.
  • Title for Thumbnails (No / Yes) - Title for thumbnails link attribute.
  • Lens FadeIn (No / Yes) - Lens FadeIn effect
  • Lens FadeOut (No / Yes) - Enable Lens FadeOut effect
  • Zoom Window FadeIn (No / Yes) - Zoom Window FadeIn effect
  • Zoom Window FadeOut (No / Yes) - Zoom Window FadeOut effect
  • Zoom Tint FadeIn (No / Yes) - Zoom Tint FadeIn effect
  • Zoom Tint FadeOut (No / Yes) - Zoom Tint FadeOut effect
  • Image Cross Fade - Image Cross Fade Switching effect.

4. Conclusion

This element is flexible and might be used multiple time within the same template layout, so you may display galleries with different params within one article if it’s needed. Recommended mode is using one element per tempate layout.