Enhance to function as a lightbox

[evoyy]

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:

    <a href="full.jpg">
        <img src="thumb.jpg" />
    </a>

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:

    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.

[willemvb]

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.

<img src="img/trees-1280.jpg" srcset="img/trees-1280.jpg 1280w, img/trees-640.jpg 640w" sizes="1px" data-action="zoom" class="pull-left">

If useful, this could be a PR.

[nishanths]

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.