Generate thumbnails and load on click the ZOOMLOOK Player into containers.
Notice how only one ZL WebGL player is active at any one time? This is in consideration for very old devices with limited memory.
Embed Code
<div id="item1" class="zl-item" style="width:100%; height:500px;"></div>
<div id="item2" class="zl-item" style="width:100%; height:500px;"></div>
<div id="item3" class="zl-item" style="width:100%; height:500px;"></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>
window.onload = () => {
const config1 = {
target: "item1",
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
type: "photo",
uuid: "CpjJgf-559330",
};
const config2 = {
target: "item2",
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
uuid: "tIKoXX-433591",
fps: 5,
autoplay: true,
};
const config3 = {
target: "item3",
showThumb: "all",
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",
autoplay: true,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 6,
uuid: "FqNtFG-498222",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "DHQkmu-827001",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "vxDveY-506708",
},
{
basePath:
"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "nFCjhY-260482",
},
],
};
const configArray = [config1, config2, config3];
// Usage: createImageElements(configArray, popup , keepOnePlayer)
createImageElements(configArray, false);
};
</script>