THEMETRIAL

Medium.com Image Zoom Effect With Vanilla JavaScript – Mango

Author:marlospomin
Views Total:0 views
Official Page:Go to website
Last Update:August 2, 2020
License:MIT

Preview:

Medium.com Image Zoom Effect With Vanilla JavaScript – Mango

Description:

Mango is a lightweight, blazing fast image zoom library used to overlay your images on the top of the webpage just you seen on Medium.com. You can close the image zoom popup by clicking on the screen or scrolling the web page.

How to use it:

Install the Mango library.

# Yarn
$ yarn add mango-js

# NPM
$ npm install mango-js --save

Import the Mango.

// ES 6
import mango from 'mango-js';

// CommonJS:
const mango = require('mango-js');

Add the ‘data-mango’ attribute to the target images.

<figure>
  <img data-mango src="https://www.cssscript.com/1.jpg" alt="">
</figure>
<figure>
  <img data-mango src="2.jpg" alt="">
</figure>
<figure>
  <img data-mango src="3.jpg" alt="">
</figure>
...

Activate the Mango and done.

mango();

Don’t forget to import the ‘Mango.css’ into your document.

.mango-overlay {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease;
}

.mango-image--open {
  position: relative;
  cursor: zoom-out !important;
}

.mango--open .mango-overlay {
  cursor: zoom-out;
  opacity: 1;
}

.mango-image {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

Changelog:

08/02/2020


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.