How is this zoom-in image gallery created?

Question

Stumbled on the redesigned rijks museum site and they've got some amazing features here. One in particular is the image zoom. Would love to do something like this for one of my projects, but can't seem to dissect it.

Any ideas on how they did it or what plug-in was used? Would greatly appreciate any insight.

https://www.rijksmuseum.nl/en/explore-the-collection/overview/rembrandt-harmensz-van-rijn/objects#/SK-C-597,3

https://www.rijksmuseum.nl

Thank you! Danny

Answer 1

There are multiple jquery libraries/plugins which can assist you to achieve the same.

You can look at this post

Answer 2

Most, if not all JQuery image zoom libraries load an additional, large image in the background and and display a small portion of it upon hover. This does not scale well – if you want to zoom in very close, you'd need to preload a multi-megapixel image.

What the Rijksmuseum (as well as the aforementioned JSfiddle) does is sometimes referred to as deep zooming: It applies the concept of online map navigation (e.g. GoogleMaps) to non-geographic imagery.

Unfortunately, this method requires some extra work: The original image needs to be split into tiles at different zoom levels beforehand, and these files then need to be associated to a pixel coordinate system. See this instruction for a script-based approach with Leaflet.js.