https://github.com/kirlovon/zoomtastic

Tiny image viewer for web! 🔎
https://github.com/kirlovon/zoomtastic

browser image image-viewer javascript javascript-library js webpack

Last synced: 16 days ago
JSON representation

Tiny image viewer for web! 🔎

• Host: GitHub
• URL: https://github.com/kirlovon/zoomtastic
• Owner: Kirlovon
• License: mit
• Created: 2020-02-11T13:38:52.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T16:38:26.000Z (8 months ago)
• Last Synced: 2024-10-12T02:14:01.477Z (about 1 month ago)
• Topics: browser, image, image-viewer, javascript, javascript-library, js, webpack
• Language: JavaScript
• Homepage: https://kirlovon.dev/zoomtastic
• Size: 5.52 MB
• Stars: 23
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


	



Zoomtastic

Tiny image viewer for web!




	

	

	

	





  🔎 Demo



## Features

- 📊 Lightweight _(***1.2kb*** gzipped)_

- 🥂 Short and simple API

- 🎬 Different animations

- 📦 No dependencies




## Installation

Installation via [NPM](https://www.npmjs.com/package/zoomtastic) repository:

```bash

npm install zoomtastic --save

```

or via [CDN](https://unpkg.com/):

```html

```




## Example

API is so simple that you don't even need documentation, take a look at HTML example:

```html

	

	

	

	

	

		// 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();

	

```

Alternatively, you can use a bundlers like [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Parcel](https://parceljs.org/) or [Vite](https://vitejs.dev/):

```javascript

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](https://www.skypack.dev/):

```html

	import Zoomtastic from 'https://cdn.skypack.dev/zoomtastic';

	// Mount viewer elements

	Zoomtastic.mount();

```




## 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](https://github.com/Kirlovon/Zoomtastic/blob/master/LICENSE)