Single Image Zoom

Image zoom is supported for those use cases where we need to offer a lot of detail. For example, zooming in on a Sonos product during the buying process will allow our users to see details a lot more clearly. We use a paid plugin, Cloud Zoom because it gives us a lot of options, was relatively inexpensive, is actively maintained and most importantly, takes the work of developing this functionality in-house off of our plates.

In order to use the zoom plugin, we require very little code. Below is an example. Please note: Your regular image should be the same ratio as your large image, otherwise weirdness can happen.

PLAY:1 Front View

<img src="/images/suit/zoom/play1-front.jpg" alt="PLAY:1 Front View" data-cloudzoom="zoomImage:'/images/suit/zoom/play1-front-big.jpg'" />

Gallery Image Zoom

This is just an example of how the image zoom works in conjunction with a gallery of images. This example is not indicative of what is on Live.

By using something like the markup below, you automatically get gallery support in conjunction with image zoom. For the thumbnails, we have color classes that match the product brand colors. For this example, you can see the .play1 class in the markup.

We also have support for switching galleries via the color switcher. You can simply hook that up by having a color box and a data attribute on the box that points to a unique gallery name.

We also have support for videos.