More ways to popup ZOOMLOOK.
Embed Code
<button onclick="popupCompare(compareConfig)">Compare</button>
<button onclick="popupPhoto('page','nFCjhY-260482')">popup Photo 1</button>
<button onclick="popupPhoto('page','vxDveY-506708')">popup Photo 2</button>
<button onclick="popupPhoto('page','ITAXfv-746089 ')">popup Photo 3</button>
<button onclick="popupAnimation('page','ITAXfv-746089')">popup Animation 1</button>
<button onclick="popupAnimation('page','ITAXfv-746089')">popup Animation 2</button>
<button onclick="popupAnimation('page','FqNtFG-498222')">popup Animation 3</button>
<button onclick="popupAnimation('page','tIKoXX-433591')">popup Animation 4</button>
<button onclick="popupGallery('page',config1)">popupGallery1</button>
<button onclick="popupGallery('page',config2)">popupGallery2</button>
<button onclick="popupGallery('page',config3)">popupGallery3</button>
<button onclick="popupGallery('page',config4)">popupGallery4</button>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script>
const config1 = [
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
autoplay: true,
fps: 8,
bounce: true,
uuid: "tIKoXX-433591",
previewMode: "image",
},
{
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/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 6,
autoplay: true,
uuid: "ITAXfv-746089",
previewMode: "image",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 6,
autoplay: true,
uuid: "JDlDKb-138388",
previewMode: "image",
},
{
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: "DHQkmu-827001",
},
];
const config2 = [
{
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: false,
autoplay: true,
fps: 24,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "nFCjhY-260482",
}
];
const config3 = [
{
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: false,
autoplay: true,
fps: 24,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "nFCjhY-260482",
}
];
const config4 = [
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: false,
autoplay: true,
fps: 24,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "nFCjhY-260482",
}
];
const compareConfig={
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
compare:{
beforeUuid:"QLEMRB-759860",
afterUuid: "MJjFxT-710005"
}
}
// Animation
const popupAnimation = (type, uuid) => {
const ZL = new ZLPlayer();
ZL.openPopup({
uuid: uuid,
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
autoplay: true,
fps: 5,
fullscreenMode: type,
});
};
// Photo
const popupPhoto = (type, uuid) => {
const ZL = new ZLPlayer();
ZL.openPopup({
uuid: uuid,
type: "photo",
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
fullscreenMode: type,
});
};
// Gallery
const popupGallery = (type, configList) => {
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
};
ZL.openPopup(config, configList);
};
// Compare
const popupCompare = (config) => {
const ZL = new ZLPlayer();
ZL.openPopup(config);
};
</script>