Zooming

Provides a simple integration with Zooming. Image zoom that makes sense.

Requirements

• Zooming library:
  • Download Zooming archive from Zooming
  • Extract it as is, rename zooming-master to zooming (manually type it if an issue), so the asset is available at: /sites/../libraries/zooming/build/zooming.min.js
• Blazy (>= 2.16) since Zooming:8.x-1.2.

Installation

Install the module as usual, more info can be found on:
Drupal 7

Usage/ Configuration

Enable this module and its dependency, core image and Blazy modules.

Field formatters

• Visit /admin/config/people/accounts/fields, or /admin/structure/types, or any fieldable entity, click Manage display.
• Under Format, choose blazy-related formatters: Blazy, Slick carousel, etc. for image field.
• Click the Configure icon.
• Under Media switcher, choose Image to Zooming. Adjust the rest.

Blazy filter

• Visit /admin/config/content/formats/full_html, etc.
• Enable Blazy Filter.
• Under Media switcher, choose Image to Zooming.

Features

• Has no formatter, instead integrated into **Media switcher** option as seen at Blazy/ Slick formatters, including Blazy Views fields for File Entity and Media, and also Blazy Filter for inline images.

Known issues

• For the best result, the hi-res image should have the exact same aspect ratio as your regular image. Reasonable as it zooms in and out images must stick to a single aspect ratio, otherwise squeezing.
• The zoomed image requires its parent containers to not have CSS rule `overflow: hidden` as otherwise it is cropped/ hidden when being zoomed in.
• Tested with Blazy Grid, and inline images. Not working with Slick carousel, yet.

Solution:
Use the provided `is-zooming` class (on body element) to temporarily override.

See `css/zooming.css` for samples with Blazy grids.

Similar modules

Intense