Keep the subject in view.
Bounded pan and normalized centers keep the image reachable as its container changes.
A CLOSER LOOK, WITHOUT THE COMPLEXITY
Make every detail
worth exploring.
Turn a large image into a smooth, embeddable viewer.
Upload, explore, and take the whole experience with you.
↗ One image.
Room to explore.
Room to explore.
Harbor Works site guide
Loading image…Go closer. Click the image, then scroll to zoom. Drag to explore.
+ − zoom ←→ pan F fit 1 actual pixels
Saved inspection views Optional · up to 6
Zoom and pan to a detail, name it, then save its position. Your HTML visitors can jump straight to these details.
Your image stays on this device.
Integrate the jQuery component
Copy app/ and vendor/ into your site. Load the stylesheet, jQuery, geometry.js, then detaildrift.js. Give your container a height and initialize:
jQuery('#my-image').detaildrift({
src: 'your-image.jpg',
alt: 'Describe the image',
maxZoom: 8
});Use the README for API, multiple instances, cleanup, and accessibility notes.
A viewer in one file.
Your HTML export includes the image and runtime. Share or embed it without a service account.
Fits your existing site.
A real jQuery component with methods, events, independent instances and a clean destroy.