Author: | tomik23 |
---|---|
Views Total: | 845 views |
Official Page: | Go to website |
Last Update: | September 8, 2020 |
License: | MIT |
Preview:

Description:
Just another JavaScript image zoom plugin that zooms and displays images in an overlay covering the whole page. Inspired by Medium.com.
The zoomed image will auto dismiss when you scroll the webpage or swipe the screen.
How to use it:
Place the Stylesheet zooom.css
and JavaScript zooom.js
in the html page.
<link href="./zooom.css" rel="stylesheet"> <script src="./zooom.js"></script>
Initialize the ZOOOM.js with the following options.
- element: element to zoom
- padding: padding in pixels
- animationTime: duration in ms
- in / out: custom cursors
- color: overlay color
- opacity: Overlay layer opacity. 0-100.
- zIndex: z-index property
window.addEventListener('load', function () { new Zooom('img-zoom', { padding: 80, zIndex: 1, animationTime: 300, cursor: { in: 'zoom-in', out: 'zoom-out' }, overlay: { color: '#fff', opacity: 100, }, }); })
Callback functions.
new Zooom('img-zoom', { onLoaded: function(element) { // do something }, onCleared: function(element) { // do something }, });
Changelog:
v1.0.8 (09/08/2020)
- Update
v1.0.7 (09/07/2020)
- Fixed Lightbox animation not always appearing
v1.0.6 (09/05/2020)
- added debounce to resize window
- added two helpers functions onLoaded, onCleared
- changed fade(in/out) from js to css
08/25/2020
- v1.0.5: small improvements
06/26/2020
- v1.0.4: refactor
05/04/2020
- v1.0.3: added more options
04/26/2020
- v1.0.1
04/24/2020
- fixed fadeIn/fadeOut
04/23/2020
- refactor
04/18/2020
- refactor
04/04/2020
- update
11/15/2019
- delete log
11/12/2019
- allows to close the modal window by clicking on body
11/07/2019
- refactoring
10/29/2019
- Update options
06/07/2019
- checking if the object exists
06/06/2019
- removing necessary elements from object
Like Medium.com but it works on older browsers including in it IE10+
doesnt work with bootstrap carousel
It already works, now it can be used anywhere, regardless of whether it is in an overflow element