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