ZOOMLOOK supports multiple viewers on a page. Each instance needs its own unique ID. In consideration for users with much older devices we recommend dynamically loading ZOOMLOOK in one container at a time. See Create Image Elements up next…
Embed Code
<div id="zoom1" style="width:100%; height:500px;"></div>
<div id="zoom2" style="width:100%; height:500px;"></div>
<div id="zoom3" style="width:100%; height:500px;"></div>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script>
window.onload = () => {
const ZL1 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
fullscreenMode: 'page',
type: "photo"
});
ZL1.loadZLView("CpjJgf-559330", "zoom1");
const ZL2 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fullscreenMode: 'page',
autoplay: true,
fps: 8
});
ZL2.loadZLView("ITAXfv-746089", "zoom2");
const ZL3 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
fullscreenMode: 'page',
spinReverse: true,
autoplay: true,
});
ZL3.loadZLView("STegyw-601336", "zoom3");
};
</script>