ElevateZoom Plus

Integrates ElevateZoom Plus with Splide/ Slick and lightboxes.

Requirements

1. • D7: Slick 3.x
   • D8: Blazy 2.5+ with Splide 1.x or Slick 2.x since 8.x-1.4+
2. ElevateZoomPlus library:
   Extract it as is, rename it to elevatezoom-plus, so the assets are at:

   /sites/../libraries/elevatezoom-plus/src/jquery.ez-plus.js

   If using Composer it will be:

   /sites/../libraries/ez-plus/src/jquery.ez-plus.js

   Both are supported.
   Remove the /sites/.. part for D8.

3. If using Splide/ Slick with asNavFor, any lightbox for Media switcher. If not, requires Image to Elevatezoomplus.
4. A theme which doesn't modify field--commerce-product-variation-FIELD_NAME.html.twig template for its own particular goal. Meaning this module will not work with default Belgrade theme, since it modifies that field template for its own specific theme goal. Solutions: use another field name if you want Belgrade, and deleting the twig is not possible.

Usages

1. Install ElevateZoomPlus UI, visit /admin/config/media/elevatezoomplus.
2. Use blazy-related formatters: Blazy, Slick, GridStack, etc.
3. Add an ElevateZoomPlus optionset, image styles and a lightbox.

Usages variants

1. Splide/ Slick with asNavFor with any lightbox, recommended.
2. Splide/ Slick without asNavFor require:
   • Splide perPage > 1, or Slick slidesToShow > 1.
   • Image to ElevateZoomPlus under Media switcher
3. Blazy Grid, Gridstack, etc. require:
   • Image to ElevateZoomPlus under Media switcher

With Image to ElevateZoomPlus, no lightbox behavior, just a full screen video if available.

Image styles

We don't add more image styles, instead re-using existing ones regardless names:

1. Splide/ Slick with asNavFor:
   1. Image style for the main preview image (visible one at a time).
   2. Thumbnail style for the gallery thumbnails (visible multiple).
2. Splide/ Slick without asNavFor, Blazy Grid, Gridstack, etc.:
   1. Image style for the gallery thumbnails (visible multiple).
   2. Thumbnail style for the main preview image (visible one at a time).

And both uses Lightbox image style for the largest zoomed image.
Note:
visible one at a time: Splide perPage = 1, or Slick slidesToShow = 1.
visible multiple: Splide perPage > 3, or Slick slidesToShow > 3.

Important!

If using Splide/ Slick with asNavFor, you can choose any lightbox.
If not, just a static stage, be sure to choose Image to ElevateZoomPlus
to sync the main preview and its thumbnails.

For the library usages, please consult their documentations. This module only
provides and facilitates integrations.

Features

• Has no formatter, instead integrated into Media switcher option as seen at Blazy, Slick, Gridstack formatters.
• Thumbnail gallery thanks to Slick.
• Supports video as a full screen video, if using Image to ElevateZoomPlus.
• Integrates with any lightbox supported by Blazy if using Slick with asNavFor.
• Not compatible with default Belgrade theme due to highly customized field
  templates, theme-specific goals, please start with core Bartik for initial debug works instead.

Known issues/ Limitations/ Troubleshootings

• ElevateZoomPlus is not a lightbox, but treated so at Blazy internally. Do not expect regular lightbox features like captions, etc.
• Not tested with all blazy-related features/ formatters, yet.
• Best with similar aspect ratio.
• Use Blazy lazyload for Splide/ Slick, if any issue.
• Known Slick library version which doesn't behave with count 1 is Slick 1.6.0.

Similar modules

• Imagezoom
  The main difference is it has nothing to do with Slick/ blazy-related modules,
  and has its own gallery. While this module makes use of Splide/ Slick.