Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Image Zoom

The image zoom plugin works by assigning attributes to an ordinary anchor element that links to a large image. By applying a data-enlarge attribute to the link, with a value matching the ID of an img element on the page, that link will become a zoom toggle for that referenced image element, zooming it on click or tap and swapping its src. For browsers that support responsive images, clicking the anchor will also toggle the image's sizes attribute to match the anchor's data-sizes attribute, causing the browser to reevaluate its srcset list for a more appropriate source.

See also the carousel with image zoom component and the responsive images notes.