Click image elements derived from ZOOMLOOK assets and popup full screen into a gallery slider with ZOOMLOOK with multiple formats.
The front end integration logic is simple making any PDP layout intuitive and immersive. Don’t worry about the click to open button disappearing. Clicking or tapping anywhere on the image will suffice.
Embed Code
<div class="ZLContainer500">
<div id="item0" class="zl-item" startItem="0"></div>
</div>
<div class="ZLContainer500">
<div id="item1" class="zl-item" startItem="1"></div>
</div>
<div class="ZLContainer500">
<div id="item2" class="zl-item" startItem="2"></div>
</div>
<div class="ZLContainer500">
<div id="item3" class="zl-item" startItem="3"></div>
</div>
<div class="ZLContainer500">
<div id="item4" class="zl-item" startItem="4"></div>
</div>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script src="/zoomlook/assets/utils/page.js"></script>
<script>
const galleryConfig = {
showThumb: "all",
crossCursor: true,
swipeGallery:true,
galleryList: [
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 8,
autoplay: true,
uuid: "ITAXfv-746089",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: true,
autoplay: true,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "nFCjhY-260482",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 6,
autoplay: true,
uuid: "tIKoXX-433591",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "vxDveY-506708",
},
],
};
window.onload = () => {
const elements = document.getElementsByClassName("zl-item");
const elementArray = Array.from(elements);
const configArray = elementArray.map((element) => {
const id = element.getAttribute('id');
const startItem = element.getAttribute('startItem');
return {...galleryConfig,target:id,startItem:startItem}
})
// Usage: createImageElements(configArray, popup , keepOnePlayer)
createImageElements(configArray, true);
};
</script>