This pop up example is important in regard to complex PDP layouts. Any image on a PDP will often open full screen with a gallery of images within a full screen slider component. Similarly the ZL WebGL Player has slider / gallery functions. Opening up to the correct image or asset clicked and keeping the flow of product media is important. ZOOMLOOK makes this easy to accomplish from the front end.
Embed Code
<button onclick="popupGallery(1)">
popupGallery1
</button>
<button onclick="popupGallery(2)">
popupGallery2
</button>
<button onclick="popupGallery(3)">
popupGallery3
</button>
<button onclick="popupGallery(4)">
popupGallery4
</button>
<button onclick="popupGallery(5)">
popupGallery5
</button>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.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",
autoplay: true,
fps: 8,
uuid: "ITAXfv-746089",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: false,
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/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "XWRhiJ-476357",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "DHQkmu-827001",
},
],
};
const popupGallery = (n = 1) => {
const ZL = new ZLPlayer();
const config={
...galleryConfig,
startItem: n -1
}
ZL.openPopup(config);
};
</script>