Author: | AntCMS-org |
---|---|
Views Total: | 543 views |
Official Page: | Go to website |
Last Update: | April 7, 2023 |
License: | MIT |
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); }