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 – Read, write and share stories that matter.

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.

Before diving into the code, I would like to say big thanks to the package creator @francoischalifour, who built this awesome package as open source.

The package is available on the npm registry, with no dependencies.

Features

• 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)

Installation

npm install --save medium-zoom

# or

yarn add medium-zoom

Or, If you want to use the CDN version:

<script src="https://unpkg.com/medium-zoom@0/dist/medium-zoom.min.js"></script>

Usage

Import the script:

<script src="node_modules/medium-zoom/dist/medium-zoom.min.js"></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.

Integration

mediumZoom(<selector>, <options>)

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.

mediumZoom('.post__container img');

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)

API

Options can be passed via a JavaScript object through the mediumZoom call.

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.

Conclusion

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.

Happy Coding!