Zooming
112 sites
Security covered
This module provides image zooming functionality by integrating with the Zooming library. It offers image zoom options through Blazy formatters and filters, allowing for enhanced image viewing experiences on your site.
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.