ZOOMLOOK Galleries are the most versatile and powerful presentation tool for e-commerce. Popup and configure for full screen viewing of any PDP image layout. Or simply use the viewer as your webpage hero, delighting your customers as they break the fifth wall with an immersive deep dive into new realities…. HyperReality!
Embed Code
<div id="zoom" style="width: 100%; height: 500px"></div>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script>
window.onload = () => {
const config = {
showThumb: "all",
startItem: 2,
galleryThumbs:{
align: "left",
scale: 1.0,
roundEdge: 50,
bgcolor: "#cccccc",
activeOutlineWidth: 2,
activeOutlineColor: "#ffffff",
},
crossCursor: true,
swipeGallery: true
};
const configList = [
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 8,
uuid: "ITAXfv-746089",
previewMode: "image",
autoplay:true
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: false,
spinReverse: true,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "CpjJgf-559330",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
clickLoad: false,
type: "photo",
uuid: "QoiUFC-743147",
},
{
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",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
compare:{
beforeUuid:"QLEMRB-759860",
afterUuid: "MJjFxT-710005"
}
},
{
type:"iframe",
iframe: {
url: "https://fluid.felixmartinez.dev/",
thumbImage: "https://zoomlook.com/wp-content/uploads/2024/09/FluidDynamics-scaled.jpg"
}
}
];
const ZL = new ZLPlayer();
ZL.loadZLGallery(config, "zoom", configList);
};
</script>
### load gallery
* ZL.loadZLGallery(config, target, configList);
* config: gallery configuration.
* showThumb: Show thumbnails. Available values: ["all", "desktop", "mobile", false]. Default: "all".
* thumbFit: It's used to specify how an image should be resized to fit its container. Available values: ["fill", "contain", "cover"]. Default: "contain".
* startItem: The first gallery item to be displayed on start. Default: 0. 0 is the first one in the configList, and so on.
* target: The container id of the gallery.
* configList: List of contents configuration.
* [config, config, ...].
* config items same as ZLPlayer.
* galleryThumbs：Customize thumbnails styles.
* align:
* On desktop: Available values: ["left", "right", "top", "bottom"]. Default: "right".
* On mobile: Available values: ["top", "bottom"]. Default: "bottom".
* scale: Set the thumbnail size. Default: 1.0.
* roundEdge: The rounded value of the thumbnail. Default: 0.
* bgColor: The background color of the thumbnails. Default: "#ffffff".
* activeOutlineWidth: The width of the active outline. Default: 1. 0 is disabled.
* activeOutlineColor: The color of the active outline. Default: "#000000".
---
const config = {
showThumb: "desktop",
startItem: 2,
galleryThumbs: {
align: "right",
scale: 1,
roundEdge: 0,
bgcolor: "#ffffff",
activeOutlineWidth: 1,
activeOutlineColor: "#000000",
}
};
const configList = [{
basePath: "/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 8,
uuid: "LOOK06",
fullscreenMode: "page"
},
{
basePath: "/zoomlook/pix/ZLGLGallery/",
clickLoad: false,
type: "photo",
uuid: "LOOK01",
},
{
basePath: "/zoomlook/pix/ZLGLGallery/",
clickLoad: false,
type: "photo",
uuid: "LOOK02",
},
{
basePath: "/zoomlook/pix/ZLGLGallery/",
clickLoad: false,
type: "photo",
uuid: "LOOK03",
},
{
basePath: "/zoomlook/pix/ZLGLGallery/",
clickLoad: false,
type: "photo",
uuid: "LOOK04",
}];
const ZL = new ZLPlayer();
ZL.loadZLGallery(config, "zoom", configList);
Gallery usage:
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
};
const configList = [
{
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 8,
uuid: "LOOK06",
},
{
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: true,
fps: 24,
uuid: "ZLV-ixIHVi-177212",
},
{
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLGallery/",
clickLoad: false,
type: "photo",
uuid: "LOOK01",
},
];
ZL.openPopup(config, configList);