1. Home
  2. Docs
  3. ZL WebGL Player
  4. ZOOMLOOK Actions
  5. popup more

popup more

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>
				
			

How can we help?