Tiny image viewer for web!
- 📊 Lightweight (1.2kb gzipped)
- 🥂 Short and simple API
- 🎬 Different animations
- 📦 No dependencies
Installation via NPM repository:
npm install zoomtastic --saveor via CDN:
<script src="https://unpkg.com/[email protected]"></script>API is so simple that you don't even need documentation, take a look at HTML example:
<body>
<img zoomtastic src="https://via.placeholder.com/100" />
<img zoomtastic src="https://via.placeholder.com/200" />
<img zoomtastic src="https://via.placeholder.com/300" />
<script src="https://unpkg.com/zoomtastic"></script>
<script>
// Mount viewer element
Zoomtastic.mount({
size: '95%',
easing: 'ease',
duration: 300,
background: 'rgba(0, 0, 0, 0.9)',
filter: 'drop-shadow(0 2px 16px rgba(0, 0, 0, 0.3))',
animation: 'slide' // Can be slide, fade, zoom or drop
});
// Listen for an elements that contains "zoomtastic" attribute, and use "src" attribute as image source
Zoomtastic.listen('[zoomtastic]', 'src');
// Show image manually
Zoomtastic.show('https://via.placeholder.com/600');
// Hide image
Zoomtastic.hide();
</script>
</body>Alternatively, you can use a bundlers like Webpack, Rollup, Parcel or Vite:
import Zoomtastic from 'zoomtastic';
// Mount viewer elements
Zoomtastic.mount();
// Show image viewer manually
Zoomtastic.show('https://via.placeholder.com/256');
// Hide image viewer
Zoomtastic.hide();Or you can import module using Skypack:
<script type="module">
import Zoomtastic from 'https://cdn.skypack.dev/zoomtastic';
// Mount viewer elements
Zoomtastic.mount();
</script>This function creates and mounts to the page the necessary Zoomtastic elements. If you call this function again, the elements will be recreated.
The configuration is optional, and has these parameters:
- size - Image size. (Default:
95%) - ease - Timing function. (Default:
ease) - duration - Animations duration. (Default:
300) - background - Viewer background. (Default:
rgba(0, 0, 0, 0.9)) - filter - CSS filter applied to image. (Default:
drop-shadow(0 2px 16px rgba(0, 0, 0, 0.3))) - animation - Animation type. Can be
slide,fade,zoomordrop. (Default:slide)
Add click event listener to the image elements. By default, it listens to all elements with the attribute zoomtastic and takes the image from the src attribute.
The target should be a CSS selector, an element or an array of elements.
The source argument must be the name of the attribute from which URL to the image will be taken.
Show image viewer. The url argument must be link to the image.
Hide image viewer.