Image Zooming with Adobe Dynamic Media
Do you want to provide your users the ability to get a closer up view of images on your website? One solution could be Adobe's Dynamic Media. Sure you have to subscribe to Adobe Experience Manager to make use of it, but for companies that do, they are allotted a full range of options for interactive display of their media in ways that result in fast sales.
Below I highlight two Dymanic Media viewers, both of which allow users to easily zoom in to larger version of the main image so they can fully inspect the product without needing to download the full-size iamge to their hard drive or to a separate browser tab.
Inline Zoom
Image Set / Swatch Set
See the code!
- Step 1: Add references to the Adobe Assets code for the JavaScript for the viewers you want to implement.
<script src="js/ZoomViewer.js"></script> <script src="js/FlyoutViewer.js"></script> - Step 2: Configure the viewer settings initialize them.
window.adobeViewers = {} window.adobeViewers["s7zoomviewer"] = new s7viewers.ZoomViewer({ "containerId" : "s7zoom_div", "params" : { "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image", "contenturl" : "https://demos-pub.assetsadobe.com/", "config" : "/etc/dam/presets/viewer/ImageSet_light", "asset" : "/content/dam/dm-public-facing-live-demo-page/09_09_living-room_image_set_swatch_set/09_living_room_imagesetswatchset" } }).init(); window.adobeViewers["s7flyoutviewer1"] = new s7viewers.FlyoutViewer({ "containerId" : "s7flyout_div", "params" : { "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image", "contenturl" : "https://demos-pub.assetsadobe.com/", "config" : "/etc/dam/presets/viewer/InlineZoom", "asset" : "/content/dam/dm-public-facing-live-demo-page/08_mug_inline_zoom/mug_inline_zoom" } }).init();