Zooming JS zoom only images that should be zoomed

Zooming is a library that allows images to zoom. But if you use it on many images that you have on the page with some common selector, probably you want to make it zoomable only for images that have less width than some value or something like this.

But the best choice I think will be detecting that image was downscaled in <img> tag, for this we can use naturalWidth and clientWidth of img DOM element, but to get correct values we need access to them only afterload (using onload callback).

So I changed listen function to next:

listen: function listen(el) {
if (typeof el === 'string') {
var els = document.querySelectorAll(el),
i = els.length;
while (i--) {
api.listen(els[i]);
}
return _this;
}
if (el.tagName !== 'IMG') return;
el.onload=function() {
if (el.naturalWidth <= el.clientWidth) {
return
}
el.style.cursor = style.cursor.zoomIn;
el.addEventListener('click', eventHandler.click);
if (options.preloadImage && el.hasAttribute('data-original')) {
loadImage(el.getAttribute('data-original'));
}
}
return _this;
},

Monkey-patched file attached: zooming.js

If you want and have time to contribute please make it an option and create a pull request to https://github.com/kingdido999/zooming

#js #frontend
0
Ivan Borshchov profile picture
Apr 06, 2017
by Ivan Borshchov
Did it help you?
Yes !
No

Best related