Draggable Fullscreen Image Viewer – TinyZoom.js

Preview:

Description:

TinyZoom.js is a simple, lightweight JavaScript library to provide an interactive and fullscreen image viewing experience on your webpage.

Users can zoom in/out and pan the enlarged images with click, mouse wheel, and drag events.

How to use it:

1. Add the CSS class ‘TinyZoom’ to your images.

<img src="/path/to/image/" class="TinyZoom" alt="Click To Enlarge" />

2. Download and place the TinyZoom.js library in your document.

<script src="TinyZoom.js"></script>

3. Customize the background overlay.

.fullscreen-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(5px);
}