Flexible DOM Element Zooming – ZoomAny.js

Category: Javascript , Zoom | July 8, 2024
Author:BenHerbst
Views Total:24 views
Official Page:Go to website
Last Update:July 8, 2024
License:MIT

Preview:

Flexible DOM Element Zooming – ZoomAny.js

Description:

ZoomAny.js is a lightweight Vanilla JavaScript library for zooming DOM elements using the mouse wheel. Ideal for interactive interfaces, image galleries, or data visualizations where users need to examine details closely.

It supports TypeScript and allows developers to make any HTML element interactive by enabling zoom capabilities, not just images.

How to use it:

1. Install the ZoomAny.js package with NPM and import the necessary files into your project.

# NPM
$ npm install zoom-any-js
import ZoomAnyJs from "zoom-any-js";
import "zoom-any-js/dist/zoom-any-js.css";

2. Apply the CSS class ‘zoomable’ to any element you want to enable zooming on:

<img class="zoomable" src="zoomable.png">

3. Create a new instance of the ZoomAnyJs. That’s it.

// ZoomAnyJs(selector)
const zoom = new ZoomAnyJs();

4. Define the minimum and maximum zoom factors.

<img
  class="zoomable"
  src="zoomable.png"
  data-max-zoom="2000"
  data-min-zoom="20">

5. Control whether the zoomed element should stay within the bounds of its parent or the window.

<img
  class="zoomable"
  src="zoomable.png"
  data-bounds>

6. Determine if the offset parent should serve as the origin for calculating boundaries.

<img
  class="zoomable"
  src="zoomable.png"
  data-origin-parent>

7. Manipulate the zoom behavior programmatically.

// Positions the element at the center of its boundary origin.
zoom.center();
// Ensures the element fits within its defined boundaries.
zoom.fitToBounds();
// Zooms the element to a specific amplitude at a given position.
zoom.zoomAt(amplitudenumber, pos{xnumber, ynumber});
// Attaches event listeners for zoom interactions.
zoom.addListeners();
// Detaches event listeners.
zoom.removeListeners();
// Updates the view to reflect changes made using the API.
zoom.apply();
// Resets the element to its pre-zoom state.
zoom.destroy();
// Resets the element's position and zoom level to default values.
zoom.reset();
// Returns the current zoom level.
zoom.getZoom();
// Sets a new zoom level.
zoom.setZoom(valuenumber);
// Returns the element's current position.
zoom.getPos();
// Sets a new position for the element.
zoom.setPos(value{xnumber, ynumber});

You Might Be Interested In:


Leave a Reply