Author: | cotton123236 |
---|---|
Views Total: | 290 views |
Official Page: | Go to website |
Last Update: | October 5, 2023 |
License: | MIT |
Preview:

Description:
zoomist.js is a tiny JavaScript library for zoom and panning images using the mouse wheel & drag. Also supports custom zoom controls like sliders and buttons.
The library allows users to interact with the content of the image by changing its magnification level. It does not require any external dependencies such as jQuery or other libraries that might conflict with your application codebase.
How to use it:
1. Install & download the package.
# NPM $ npm i zoomist
2. If you download the files via npm, you just need to import Zoomist in your own project :
// import Zoomist styles import 'zoomist/css' // import Zoomist import Zoomist from 'zoomist'
3. If you include the zoomist library with tag, you need to add CSS as well.
<link rel="stylesheet" src="zoomist.min.css"/> <script src="zoomist.min.js"></script>
4. Add your image to the zoomist container.
<!-- zoomist-container --> <div class="zoomist-container"> <!-- zoomist-wrapper is required --> <div class="zoomist-wrapper"> <!-- zoomist-image is required --> <div class="zoomist-image"> <!-- you can add anything you want to zoom here. --> <img src="..." /> </div> </div> </div>
5. Initialize the Zoomist on the container element.
new Zoomist('#zoomist')
// OR const zoomistElement = document.querySelector('#zoomist')
6. Add custom styles.
.zoomist-container { width: 100%; max-width: 600px; } .zoomist-image { width: 100%; aspect-ratio: 1; } .zoomist-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
7. All available parameters:
new Zoomist('#zoomist',{ // set is draggable or not draggable: true, // set is wheelable or not wheelable: true, // set is pinchable or not pinchable: true, // set image stuck on bounds bounds: true, // the ratio of zooming at one time zoomRatio: 0.1, // the max scale of zoomist-image (must be number larger then initScale) maxScale: 10, // the min scale of zoomist-image (must be number smaller then initScale) minScale: 1, // set initial scale of zoomist-image initScale: null, // zoomist slider module slider: { // the css selector string or a element of the slider el: null, // the direction of the slider 'horizontal' or 'vertical' direction: 'horizontal' }, // zoomer: { // the wrapper of all zoomer buttons el: null, // the css selector string or a element for in-zoomer inEl: null, // the css selector string or a element for out-zoomer outEl: null, // the css selector string or a element for reset-zoomer resetEl: null, // in zoomer and out zoomer will be disabled when image comes to maximin or minimum disabledClass: 'zoomist-zoomer-disabled' } })
8. API methods.
// Get the { width, height, aspectRatio } of the container zoomist.getContainerData(); // Get the { width, height, aspectRatio, top, left, naturalWidth, naturalHeight } of the image. zoomist.getImageData(); // Get the current value of the slider. zoomist.getSliderValue(); // Zoom the image zoomist.zoom(ratio); // Zoom the image with a absolute ratio. // ratio > 0 zoomist.zoomTo(ratio); // Slide to a specific value zoomist.slideTo(value, isOnlySlide); // Move the image zoomist.move(x, y) zoomist.moveTo(x, y) // Reset zoomist.reset(); // Update zoomist.update(); // Destroy zoomist.destroy(cleanStyle) zoomist.destroySlider() zoomist.destroyZoomer() zoomist.destroyModules()
9. Event handlers.
new Zoomist('#zoomist',{ on: { // invoked when zoomist instance ready ready(zoomist) {...}, // invoked when reset methods be used reset(zoomist) {...}, // invoked when image changes it's size resize(zoomist) {...}, // invoked before destroy methods be used beforeDestroy(zoomist) {...}, // invoked after destroy methods be used destroy(zoomist) {...}, // invoked before update methods be used beforeUpdate(zoomist) {...}, // invoked when update methods be used update(zoomist) {...}, // invoked when image is zooming zoom(zoomist, scale) {...}, // invoked when wheeling wheel(zoomist, scale, event) {...}, // invoked when mousedown on wrapper dragStart(zoomist, transform, event) {...}, // invoked when dragging the image drag(zoomist, transform, event) {...}, // invoked when mouseup on wrapper dragEnd(zoomist, transform, event) {...}, // invoked when mousedown on wrapper pinchStart(zoomist, scale, event) {...}, // invoked when pinching the image pinch(zoomist, scale, event) {...}, // invoked when mouseup on wrapper pinchEnd(zoomist, scale, event) {...}, // invoked when mousedown on slider slideStart(zoomist, value, event) {...}, // invoked when sliding the slider slide(zoomist, value, event) {...}, // invoked when mouseup on slider slideEnd(zoomist, value, event) {...} } })
Changelog:
v2.0.10 (10/05/2023)
- v2 released
v1.1.1 (03/29/2022)
- Fixed security problem.
v1.1.0 (03/27/2022)
- Added move and moveTo methods.
v1.0.1 (12/29/2021)
- support mobile devices
- fix pinch bug