Skip to content

Latest commit

 

History

History
131 lines (97 loc) · 3.8 KB

README.md

File metadata and controls

131 lines (97 loc) · 3.8 KB
Raw

Zoomtastic Logo

Zoomtastic

Tiny image viewer for web!

License Last commit NPM version Types

🔎 Demo

Features

  • 📊 Lightweight (1.2kb gzipped)
  • 🥂 Short and simple API
  • 🎬 Different animations
  • 📦 No dependencies

Installation

Installation via NPM repository:

npm install zoomtastic --save

or via CDN:

<script src="https://unpkg.com/[email protected]"></script>

Example

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>

API

Zoomtastic.mount(config)

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, zoom or drop. (Default: slide)

Zoomtastic.listen(target, source)

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.

Zoomtastic.show(url)

Show image viewer. The url argument must be link to the image.

Zoomtastic.hide()

Hide image viewer.


License

MIT