Minimal Inline Image Zoom In JavaScript – Amplify

Category: Image , Javascript , Zoom | September 21, 2017
Author: charlestati
Views Total: 194
Official Page: Go to website
Last Update: September 21, 2017
License: MIT

Preview:

Minimal Inline Image Zoom In JavaScript – Amplify

Description:

Amplify is a lightweight inline image zoom library which allows users to increase the size of images in their original positions. Press on the Enter and Space keys to close the enlarged images.

How to use it:

Include both JavaScript ‘amplify.js’ and stylesheet ‘amplify.css’ on the web page.

<link rel="stylesheet" href="amplify.css">
<script src="amplify.js" defer></script>

Just add the CSS class ‘js-amplify’ to the target images and the library will do the rest.

<img class="js-amplify" src="photo-1.jpg">
  ...
<img class="js-amplify" src="photo-2.jpg">
  ...
<img class="js-amplify" src="photo-3.jpg">
  ...