Zoom In To Product Images
The image zoom occurs on hover when the page is viewed on computers. On mobile devices like the iPad and iPhone, a fingertip is held down on the image and dragged around.
A thumbnail and a large image are required for each view. They should be cropped to the same size and aspect ratio.
The thumbnails can be around 200px wide or smaller depending on the number of images per row.
The magnification depends on the size of the large image relative to the size of the placeholder. In this example, the widget is set to a maximum width of 800px and the large images are 1600px wide. This gives a 2X magnification on hover.
There are a controls for setting the number of thumbnail images per row and to space them out if required.
The "magnify" icon in the top right corner is optional.
On page load, only the thumbnails and the first full size images are downloaded. The other large images are then downloaded on demand when the visitor selects a thumbnail and hovers or touches the image placeholder.
The container can be made responsive by checking the Full Width box in the Metrics inspector and setting a maximum width. The optional footer is 100% wide and has options for auto update of the copyright year and a smooth scroll, back to the top chevron.