Minimal Inline Image Zoom In JavaScript – Amplify

Preview:

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">
  ...