ZOOMLOOK popup image elements may be generated directly from ZOOMLOOK assets.
Bellow are examples of Photo, Animation, Gallery and Compare modules.
Embed Code
<div class="ZLContainer500">
<div id="item1" class="zl-item"></div>
</div>
<div class="ZLContainer500">
<div id="item2" class="zl-item"></div>
</div>
<div class="ZLContainer500">
<div id="item3" class="zl-item"></div>
</div>
<div class="ZLContainer500">
<div id="item4" class="zl-item"></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>
window.onload = () => {
const config1 = {
target: "item1",
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d/",
type: "photo",
uuid: "CSUEIP-725121",
crossCursor: true,
};
const config2 = {
target: "item2",
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLAnimation/",
uuid: "HFKKGt-334118",
autoplay: true,
fps: 5,
crossCursor: true,
};
const config3 = {
target: "item3",
showThumb: "all",
crossCursor: true,
swipeGallery:true,
galleryList: [
{
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 8,
autoplay: true,
uuid: "DPFvOc-566190",
},
{
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: true,
autoplay: true,
uuid: "QWicDx-170786",
},
{
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d/",
clickLoad: false,
type: "photo",
uuid: "CSUEIP-725121",
},
{
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 7,
uuid: "EdkNcN-781545",
},
{
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d/",
clickLoad: false,
type: "photo",
uuid: "GcrwFW-162365",
},
{
basePath:
"https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d/",
clickLoad: false,
type: "photo",
uuid: "qiOQsK-358813",
},
],
};
const compareConfig={
target: "item4",
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d/",
compare:{
beforeUuid:"hFTcYM-532991",
afterUuid: "IlhOBA-334425"
}
}
const configArray = [config1, config2, config3, compareConfig];
// Usage: createImageElements(configArray, popup , keepOnePlayer)
createImageElements(configArray, true);
};
</script>