POPUP MORE
Popup More
Embed Code
<button onclick="popupAnimation('page','LOOK01')">
popupAnimation1
</button>
<button onclick="popupAnimation('page','LOOK02')">
popupAnimation2
</button>
<button onclick="popupAnimation('page','LOOK03')">
popupAnimation3
</button>
<button onclick="popupAnimation('page','LOOK06')">
popupAnimation4
</button>
<button onclick="popupGalleryLeft('page',config1)">popup Gallery 1 Left</button>
<button onclick="popupGalleryRight('page',config2)">popup Gallery 2 Right</button>
<button onclick="popupGalleryTop('page',config3)">popup Gallery 3 Top</button>
<button onclick="popupGalleryBottom('page',config4)">popup Gallery 4 Bottom</button>
<button onclick="popupPhoto('page','LOOK01')">popupPhoto1</button>
<button onclick="popupPhoto('page','LOOK02')">popupPhoto2</button>
<button onclick="popupPhoto('page','LOOK03')">popupPhoto3</button>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script>
const config1 = [
{
basePath: "/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fps: 8,
bounce: true,
autoplay: true,
uuid: "LOOK06",
},
{
basePath: "/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
inertia: true,
fps: 24,
autoplay: true,
spinReverse: true,
uuid: "ZLV-LOOK07",
},
{
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",
},
];
// Animation
const popupAnimation = (type, uuid) => {
const ZL = new ZLPlayer();
ZL.openPopup({
uuid: uuid,
basePath: "/zoomlook/pix/ZLGLAnimation/",
autoplay: true,
fps: 8,
fullscreenMode: type,
});
};
// Photo
const popupPhoto = (type, uuid) => {
const ZL = new ZLPlayer();
ZL.openPopup({
uuid: uuid,
type: "photo",
basePath: "/zoomlook/pix/ZLGLGallery/",
fullscreenMode: type,
});
};
// Gallery
const popupGallery = (type, configList) => {
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
};
ZL.openPopup(config, configList);
};
const popupGalleryLeft = (type, configList) => {
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
galleryThumbs:{
align: "left",
scale: 1.0,
roundEdge: 10,
bgcolor: "#000000",
activeOutlineWidth: 2,
activeOutlineColor: "#ff5a00",
}
};
ZL.openPopup(config, configList);
};
const popupGalleryRight = (type, configList) => {
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
galleryThumbs:{
align: "right",
scale: 1.0,
roundEdge: 10,
bgcolor: "#000000",
activeOutlineWidth: 2,
activeOutlineColor: "#ff5a00",
}
};
ZL.openPopup(config, configList);
};
const popupGalleryTop = (type, configList) => {
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
galleryThumbs:{
align: "top",
scale: 1.0,
roundEdge: 10,
bgcolor: "#000000",
activeOutlineWidth: 2,
activeOutlineColor: "#ff5a00",
}
};
ZL.openPopup(config, configList);
};
const popupGalleryBottom = (type, configList) => {
const ZL = new ZLPlayer();
const config = {
showThumb: "all",
fullscreenMode: type,
galleryThumbs:{
align: "bottom",
scale: 1.0,
roundEdge: 10,
bgcolor: "#000000",
activeOutlineWidth: 2,
activeOutlineColor: "#ff5a00",
}
};
ZL.openPopup(config, configList);
};
</script>