You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I like the simplicity of this library and was considering using it. But it is not the same technique that medium uses to zoom images. They use the lightbox technique which requires 2 versions of the same image; a scaled-down version which is loaded by default and zoomed to the full-size version that is loaded upon click. Like this:
<ahref="full.jpg"><imgsrc="thumb.jpg" />
</a>
In fact, a webpage using zoom.js will be penalized by google's search ranking algorithm for inefficiently formatting images.
Do you have plans to further develop this? I think it would be great it if had the ability to zoom from a scaled-down image to a full-size image. The API could stay the same:
zoom.setup(elem);
Where elem is either a normal img element, or it could be an anchor element wrapping an img element, as above. If an img element, it functions exactly as it does now. If an anchor element, it functions as a lightbox.
The text was updated successfully, but these errors were encountered:
I made a branch which uses srcset to choose the right image for thumbnail and zoomed state.
You define the different images and their width first with srcset.
The script then sets the sizes attribute accordingly to pick the right file after load. Starting with sizes="1px" assures that the smallest version is the default.
On click, the script will try to zoom to the biggest width available —taking pixel ratio and available viewport into account.
Thanks for the report. This is a late reply, and I sincerely apologize. This change is very useful; I'm happy to accept pull requests for this. I was not actively watching the package but from now onward will review + merge pull requests actively if any. :)
That said, my suggestion, considering this is a small package, would be start fresh without some of the design flaws of this package --- e.g. missing support for zooming div with background-image, not written in TypeScript / no type information, outdated build process, inability to disable zoom on an element after enabling, missing features such as the one mentioned in this issue.
I like the simplicity of this library and was considering using it. But it is not the same technique that medium uses to zoom images. They use the lightbox technique which requires 2 versions of the same image; a scaled-down version which is loaded by default and zoomed to the full-size version that is loaded upon click. Like this:
In fact, a webpage using zoom.js will be penalized by google's search ranking algorithm for inefficiently formatting images.
https://developers.google.com/speed/pagespeed/insights/?url=https://nishanths.github.io/zoom.js/
Do you have plans to further develop this? I think it would be great it if had the ability to zoom from a scaled-down image to a full-size image. The API could stay the same:
Where elem is either a normal img element, or it could be an anchor element wrapping an img element, as above. If an img element, it functions exactly as it does now. If an anchor element, it functions as a lightbox.
The text was updated successfully, but these errors were encountered: