zoo

zoomtastic

Tiny image zoomer for web! πŸ”Ž

Showing:

Popularity

Downloads/wk

48

GitHub Stars

11

Maintenance

Last Commit

2mos ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Zoomtastic Logo

Zoomtastic

Tiny image zoomer for web!

License Last commit NPM version Types

πŸ”Ž Demo

Features

  • πŸ“Š Lightweight (Around 1.5kb gzipped)
  • πŸ₯‚ Short and simple API
  • 🎬 Different animations
  • πŸ“¦ No dependencies
  • 🌐 IE11 Support

Installation

Installation via NPM repository:

npm install zoomtastic --save

or via CDN:

<script src="https://unpkg.com/zoomtastic@2.1.0"></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 elements
        Zoomtastic.mount({
            size: '95%',
            easing: 'ease',
            duration: 500,
            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 or Parcel:

import Zoomtastic from 'zoomtastic';

// Mount viewer elements
Zoomtastic.mount();

// Show image viewer manually
Zoomtastic.show('https://via.placeholder.com/600');

// Hide image viewer
Zoomtastic.hide();

Or you can import module using Skypack:

<script type="module">
    import Zoomtastic from 'https://cdn.skypack.dev/zoomtastic@2.1.0';

    // 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: 500)
  • 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100