Installation via NPM repository:
npm install zoomtastic --save
or 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:
95%
)
ease
)
300
)
rgba(0, 0, 0, 0.9)
)
drop-shadow(0 2px 16px rgba(0, 0, 0, 0.3))
)
slide
, fade
, zoom
or drop
. (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.