Image previews that do not hide the original link
Build a gallery where thumbnails, full-size images, and optional previews remain useful on touch screens and keyboards.
A hover preview can save a click, but it should not be the only way to inspect an image. The original imgPreview-style pattern is best treated as an enhancement to an ordinary image link.
This new guide preserves that purpose without requiring the historical jQuery plugin.
Begin with a linked thumbnail
<a href="/images/work-full.jpg">
<img src="/images/work-thumb.jpg"
width="320" height="200"
alt="A dashboard layout with a left navigation panel">
</a>Replace the example paths with actual images. Explicit dimensions reserve space while the thumbnail loads. The alternative text should describe what helps someone understand or choose the image, not merely say “thumbnail.”
Make previews optional
If you add a preview, offer an explicit activation control and use a native dialog for a larger view when appropriate. Retain the direct full-image destination as a fallback.
Do not load a large original for every thumbnail immediately. Select appropriately sized variants and load the larger file when it is needed. For responsive image selection, consult MDN’s responsive image guide.
Check the failure cases
Test a missing full-size image, a slow connection, a narrow screen, and keyboard-only use. Do not leave an empty popup covering the gallery when a request fails. Keep captions available as text rather than baking essential information into the image.
If migrating an old plugin, preserve the original link URLs and captions. The goal is to make the images easier to reach, not merely to reproduce a hover animation.