Author: | francoischalifour |
---|---|
Views Total: | 1,924 views |
Official Page: | Go to website |
Last Update: | November 16, 2022 |
License: | MIT |
Preview:

Description:
medium-zoom is a lightweight and dependency-free JavaScript library used for creating a responsive, user-friendly image zoom/lightbox effect as seen on Medium.com pages.
Basic usage:
Download and put the medium-zoom’s JS & CSS files in the html page.
<link href="src/medium-zoom.css" rel="stylesheet"> <script src="src/medium-zoom.js"></script>
Add the zoom effect to your images.
mediumZoom('.container img')
Apply the following options to the zoom effect.
mediumZoom('.container img',{ // Space outside the zoomed image margin: 0, // Color of the overlay background: "#fff", // Number of pixels to scroll to dismiss the zoom scrollOffset: 48, // Enables the action on meta click (opens the link / image source) metaClick: true, // Custom template template: '' })
API methods.
const myZoom = mediumZoom('.container img') // show the zoom effect myZoom.show() // hide the zoom effect myZoom.hide() // toggle the zoom effect myZoom.toggle() // release the images related to the zoom from the plugin myZoom.detach() // update the options myZoom.update({ // options here }) // register the specified listener on each target of the zoom myZoom.addEventListeners('hidden', () => { // do something... })
Events.
- show: Fired when the show instance method is called
- shown: Fired when the zoom has finished being animated
- hide: Fired when the hide instance method is called
- hidden: Fired when the zoom out has finished being animated
- detach: Fired when the detach instance method is called
Changelog:
v1.1.0 (11/16/2022)
- Introduce pure bundle (JS and CSS separated)
v1.0.7 (11/15/2022)
- Ensure zooming out doesn’t happen
- Remove loading attribute on HD target
v1.0.6 (07/11/2020)
- refactor: remove `loading` attribute when zooming
v1.0.5 (12/14/2019)
- Give zoom transition higher priority
v1.0.4 (04/06/2019)
- Bring SSR compatibility by not using window outside of main function
v1.0.3 (01/20/2019)
- JS update
v1.0.2 (11/05/2018)
- fix: use document viewport size
v1.0.0 (08/29/2018)
- feat(api): Rename getZoomedTarget() to getZoomedImage()
v0.4.0 (07/31/2018)
- Added more options, methods, and events.