Integrating Medium Style Image Zoom
I'm sure you already know about Medium, a widely used and popular publishing platform to share, articles, important stores over the internet.
Medium is an online publishing platform developed by Evan Williams, and launched in August 2012. It is owned by A Medium Corporation
Here I'm going to show how I implemented a medium style clean image zoom-in, zoom-out feature for your website. If you would like to see the medium style image zoom-in, out feature on my blog that I implemented recently with the new design published last week, visit some articles to try out the feature. for example: here is a post with few images, have a look at this blog post.
The package is available on the npm registry, with no dependencies.
- Responsive — scale on mobile and desktop.
- Performant and lightweight — should be able to reach 60 fps.
- High definition support — load the HD version of your image on zoom.
- Image selection — apply the zoom to a selection of images.
- Mouse, keyboard, and gesture friendly — click anywhere, press a key or scroll away to dismiss the zoom.
- Event handling — trigger events when the zoom enters a new state.
- Customization — set your own margin, background, and scroll offset.
- Custom templates — extend the default look to match your UI.
- Link support — open the link to the image in a new tab when a meta key is held (⌘ or Ctrl)
- Image opener — when no link, open the image source in a new tab when a meta key is held (⌘ or Ctrl)
npm install --save medium-zoom # or yarn add medium-zoom
Or, If you want to use the CDN version:
Import the script:
Or, using the module syntax or imports:
const mediumZoom = require('medium-zoom') // or import mediumZoom from 'medium-zoom'
You don't need to worry about the CSS styling imports.
In my case, I wanted to use medium style zoom, in-out feature for every image I add to the blog post. i.e It is only applied to the post detail page, where the user wants to view the image in zoom, in-out mode. I wanted my readers to enjoy the view of images without having to open it on a new tab to understand it clearly.
By default, the zoom is applied to all scaled images (with HTML or CSS properties). You can specify the zoomable images with a CSS selector and add options.
Additionally, you can pass an HTML Element, a NodeList, an HTMLCollection or an array of images to the plugin.
// CSS selector mediumZoom('#cover') // HTML Element mediumZoom(document.getElementById('cover')) // NodeList mediumZoom(document.querySelectorAll('[data-action="zoom"]')) // HTMLCollection mediumZoom(document.images) // Array const imagesToZoom = [ document.querySelector('#cover'), ...document.querySelectorAll('[data-action="zoom"]') ] mediumZoom(imagesToZoom)
Open up the github repo and go through the API options available if you wish to add the customized feature for your web application.
Go through the examples section if you wish to understand the complete possible features provided by the package.
Thanks for reading this article up to the end. If you have any feedback or the article was really useful to you please leave your comments below. Feel free to share with friends if you like it.