Product Images Inner Zoom

Inner zoom on a selection of images using hover on computers and stab and drag on touch devices like the iPad and iPhone. This requires three images - one for the thumbnail, one to be shown in the viewbox and another larger one for zooming in.
The widget can accept between two and eight images. There is an optional spyglass icon which appears at the top right of the image when implemented to give visitors a clue that the image can be magnified.
Images
The images should be cropped and correctly size before importing in to EverWeb. The thumnail image needs to be only the width that it will be displayed at - about 200px wide is enough.
The medium image that appear in the viewbox should be cropped to a width equal to the widget's maximum width setting.
The large images should be about twice as wide as the medium images. This will give a magnification of 2 X.
Thumbnail Grid
The number of images per row in the thumbnail grid can be set. Normally, this value would be equal to the number of images so that they fill a single row.
Styles
The thumbnails can be spaced out if required. This will reveal the background color which can create a contrasting separator. The item can also have padding and a box shadow and/or a border if required.