popup from image elements GA4

				
					<script async src="https://www.googletagmanager.com/gtag/js?id=G-JVFDENNKKG"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    			function gtag() {
    				dataLayer.push(arguments);
    			}
    			gtag("js", new Date());
    
    			gtag("config", "G-JVFDENNKKG");
</script>

<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://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
    					type: "photo",
    					uuid: "nFCjhY-260482",
    					crossCursor: true,
    					ga4: true,
    					metadata: {
    						productName: "TestPhoto",
    					},
    				};
    				const config2 = {
    					target: "item2",
    					basePath:
    						"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
    					uuid: "ITAXfv-746089",
    					crossCursor: true,
    					fps: 5,
    					autoplay: true,
    					ga4: true,
    					metadata: {
    						productName: "TestAnimation",
    					},
    				};
    				const config3 = {
    					target: "item3",
    					showThumb: "all",
    					crossCursor: true,
    					swipeGallery: true,
    					metadata: {
    						productName: "TestGallery",
    					},
    					galleryList: [
    						{
    							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: true,
    							autoplay: true,
    							uuid: "STegyw-601336",
    							previewVideo:{
    								fps:30
    							}
    						},
    						{
    							basePath:
    								"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
    							clickLoad: false,
    							type: "photo",
    							uuid: "nFCjhY-260482",
    						},
    						{
    							basePath:
    								"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
    							clickLoad: false,
    							type: "animation",
    							fps: 6,
    							autoplay: true,
    							uuid: "tIKoXX-433591",
    						},
    						{
    							basePath:
    								"https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
    							clickLoad: false,
    							type: "photo",
    							uuid: "vxDveY-506708",
    						},
    					],
    				};
    
    				const compareConfig = {
    					target: "item4",
    					basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
    					compare: {
    						beforeUuid: "QLEMRB-759860",
    						afterUuid: "MJjFxT-710005",
    					},
    					metadata: {
    						productName: "TestCompare",
    					},
    				};
    				const configArray = [config1, config2, config3, compareConfig];
    				// Usage: createImageElements(configArray, popup , keepOnePlayer)
    				createImageElements(configArray, true);
    			};
</script>