Draggable Fullscreen Image Viewer – TinyZoom.js

Category: Image , Javascript | April 7, 2023
Author:AntCMS-org
Views Total:696 views
Official Page:Go to website
Last Update:April 7, 2023
License:MIT

Preview:

Draggable Fullscreen Image Viewer – TinyZoom.js

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);
}

You Might Be Interested In:


Leave a Reply