Get started with medium-zoom CDN

MIT licensed

Lightweight library: Medium-Zoom. Magnifies content, responsive, customizable image and zooming.

Tags:
  • medium
  • image
  • zoom
  • picture
  • lightbox
  • click
  • scroll
  • pure
  • plain
  • vanilla
  • javascript
  • ux
  • performance
  • event
  • medium-zoom
  • zoomable

Stable version

Copied!

How to start using medium-zoom CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with medium-zoom CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.1.0/medium-zoom.css" />
  <script src="https://cdn.cdnhub.io/medium-zoom/1.1.0/medium-zoom.min.js"></script>
</head>
<body>
  <button id="zoom-button">Zoom In</button>
  <img id="zoom-image" src="path/to/your/image.jpg" alt="Zoom Image" />

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const zoomButton = document.getElementById('zoom-button');
      const zoomImage = document.getElementById('zoom-image');

      zoomButton.addEventListener('click', function() {
        MediumZoom.show(zoomImage);
      });

      MediumZoom.init();
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions