Full Width Responsive Zoom Slider

This slideshow has an image zoom function. When viewed on computers, the zoom in/out controls appear at the top right of the image. When viewed on a tablet device, the finger sized zoom controls appear below the slider and to right.
On computer devices, hover the image and the zoom in symbol appears. Click and the grab hand appears to allow dragging the image around.
Tapping the image on a touch device zooms the image but, obviously, there's no dragging funtion.

EverWeb zoom sliderfull width sliderzoom sliderzoom in & outfixed screen heightadjustable thumbnail size

Image Preparation

To allow for zooming, the full size images need have a width which is greater than the maximum width set for the slider container.
The images in this example are 1600px wide so, along with the 1200px max width for the slider, it allows for a reasonable amount of zoom in. The larger the image width in relation to the maximum width - the more it will zoom in but the longer it will take to download.
NOTE: Although the slider will accomodate up to 16 images the actual file size of the images needs to be taken into account before deciding how many slides can be inserted without compromising the page download time too much.

Full Width Thumbnal Gallery Slider Widget
Full Width Zoom Slider


The thumbnails should be cropped out at a suitable size for the thumbnail grid. Around 120px x 90px should be OK in most situations. The thumbnail height setting will decide the actual size of the thumbs in the grid.

Image Height Setting

The images have a fixed height so this has to be set so that the image fills the slider height on the narrowest viewing device.
Assuming the page content width has been set to 800px or less so that the design performs well on a tablet device, set the widget to this width after inserting the first three images and either publish to a local folder or use the Preview button to view it in the browser. If the image fills the height of the slider screen then all is well. Otherwise, experiment with different heights until the desired result is achieved.
After checking the "Full Width" box in the Metrics inspector, test again in the browser to make sure the maximum width setting is such that the images have enough size to allow zoom.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width