Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Zoom Addon

Would you like to provide your visitors the ability to zoom in on images in the lightbox? Envira’s Zoom Addon allows visitors to zoom in on any area on your lightbox images to enhance the viewing experience with several customizable options.


Please follow our instructions on how to install and activate addons.

In this instance, you’ll be activating the Envira Zoom Addon.


While editing your gallery, navigate to the Zoom tab to begin enabling the zoom effect for your gallery images in the lightbox view.

Configure your gallery zoom settings in the Zoom tab.

You’ll find the following options available when editing your galleries:

Enable Zoom Functionality?
Enables or disables displaying zoom functionality on each image in the lightbox view in the gallery.

If you enable this option you’ll have the zoom functionality in the gallery from the lightbox view.

zoom4

Zoom on Hover

Check this if you want the zoom effect shown when you hover over an image (desktop only), otherwise a zoom button will be added to the toolbar. Since no hover is available on most mobile devices, the zoom button will be added regardless of this setting. Please make sure you make your toolbar visible (from the Lightbox settings tab).

If you disable this box, you must set you ‘toolbar’ visible from within the Lightbox tab.

Enable the gallery toolbar if you're disabling the Zoom on Hover

Zoom Effect

You can have the lens fade in or out, or allow easing as the lens moves.

This option has 4 choices: No effect, Fade In, Fade Out and Easing

  • No effect – the zoom have no ‘effect’ on hover
  • Fade In – the zoom will ‘fade in’ on hover
  • Fade Out – the zoom will ‘fade out’ on hover
  • Easing – the zoom will ‘ease’ on hover

Zoom Type

Basic mode gives you a zoom preview window, or select from a full-inner or lens zooms.

This option has 3 choices: Basic, Inner and Lens

  • Basic – this option will open several other options that will be covered later in this documentation.  If you choose this option, you will have your ‘Lens’ view but also a Zoom Window, setting a ‘Tint’ color to dim (or brighten) the background of the rest of the image not currently being viewed by the zoom lens and the opactiy of that ‘Tint’ color.
  • Inner – when you zoom on your image, the inner setting will zoom in on the entire image, following your mouse pointer to focus on any particular area of the image being viewed
  • Lens – when you zoom on your image, you will have a lens to view the zoom through.

Zoom Window Position

This option only appears when you have selected ‘Basic’ from the ‘Zoom Type’. You can choose between 4 options: Upper Left, Upper Right, Lower Left and Lower Right.

This option controls where the ‘Zoom Window’ will appear on the image in the lightbox view.

zoom5

Zoom Window Size

This option is only available when you have selected “Basic” from the ‘Zoom Type’.  You can choose between 4 options: Small, Medium, Large and Extra Large.

Based on your ‘Zoom Window Position’ above, you can set how large that window should be with this setting.

Tint Color

This option is only available when you have selected “Basic” from the ‘Zoom Type’.

You can click ‘Select Color’ to set a color over the image that currently is not being viewed by the ‘Zoom Type’.  You can leave this blank if you do not wish to use this setting.

Here is an example of a ‘purple’ Tint Color set to 80 on the Tint Color Opacity:

Screen Shot 2016-06-01 at 12.17.25 PM

Screen-Shot-2016-06-01-at-12.17.13-PM

Tint Color Opacity

If you have selected a color from the ‘Tint Color’ above, then you can use this setting to ‘dim’ down the color.

For example, if you wanted your image to be ‘darkened’ slightly and have the color of the image from the zoom lens stand out, you could set your ‘Tint Color’ to #000000 and slide your ‘Tint Color Opacity’ bar to 50.

zoom3

Zoom Lens Shape

This option is available for all ‘Zoom Types’ and has 2 options: Square and Circle.

Note: older browsers might display a square, even if you select ‘circle’.

Enable Mousewheel Zoom

Check this to activate zoom on mouse scroll.

This will enable your visitors to use their mousewheel to zoom in and out of the lens.


Would you like to add the zoom effect on your gallery images? Take a look at our CSS tutorial on How to Zoom Thumbnail Images on Hover.

A: The Zoom Addon uses the original image size uploaded to your WordPress site as the zoom. If the original image size uploaded is the same size or only slightly larger than the displayed size of the image in gallery or lightbox view the zoom effect will be minimal or unnoticeable.

The greater the difference in size between the gallery or lightbox image size and the original image size uploaded, the greater the zoom effect will be.

For example, if the image is displayed at 500 x 500 pixels in lightbox view and the original image uploaded is 500 x 500 pixels, when using zoom there will be no noticeable zoom effect on the image.

However, if the image is displayed at 500 x 500 pixels in lightbox view and the original image uploaded is 1000 x 1000 pixels, when using zoom the image will be magnified by 2x.

These same principles are applied if zoom is enabled for the gallery view.


Changelog

1.3.0 (04-10-2018)

  • Added: Fancybox3 support.
  • Fix: Minor bug fixes.

1.2.0 (10-18-2017)

  • Fix: Compatibility with Albums
  • Fix: Mousewheel causing double zoom
  • Fix: Minor bug fixes

1.1.0 (08-11-2017)

  • Fix: Minor bug fixes

1.0.9 (05-16-2017)

  • Fix: Minor bug fixes

1.0.8 (04-13-2017)

  • Fix: Minor bug fixes

1.0.7 (03-08-2017)

  • Fix: Minor bug fixes

1.0.6 (02-15-2017)

  • Fix: Minor bug fixes

1.0.5 (2016-12-08)

  • Fix: Issue conflicting with supersize

1.0.4 (2016-11-07)

  • Fix: Various minor bugs.

1.0.3 (2016-11-03)

  • Added: Album Support.
  • Fix support for other addons buttons over Lightbox.
  • Fix zoom activating when window is resized.

1.0.2 (2016-10-04)

  • Fix: Removing slight "jump" on certain images in lightbox.

1.0.1 (2016-07-26)

  • Fix: Lightbox Toolbar Now Visible With Addon Activated

1.0.0

  • Initial release of the addon.