Images Popup

				
							<script src="/zoomlook/assets/ZLWebGL.js"></script>
		<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
	  
  <script>
  
	  window.onload = () => {
		  const elements = document.getElementsByClassName("zl-item");
  
		  for (let i = 0; i < elements.length; i++) {
			  let element = elements[i];
  
			  addImage(element);
			  addClickButton(element);
		  }
	  }
  
	  const addImage = (targetDiv) => {
		  const uuid = targetDiv.getAttribute("uuid")
		  const basePath = targetDiv.getAttribute("basePath")
		  const title = targetDiv.getAttribute("title")
  
		  targetDiv.style.backgroundImage= `url("${basePath}${uuid}/previews/900/001.jpg")`
		  targetDiv.style.backgroundSize = "contain";
		  targetDiv.style.backgroundRepeat = "no-repeat";
		  targetDiv.style.backgroundPosition = "center";
	  }
  
	  const addClickButton=(targetDiv)=>{
		  const uuid = targetDiv.getAttribute("uuid")
		  const basePath = targetDiv.getAttribute("basePath")
		  const buttonElement = document.createElement("button");
  
		  const setText = setInterval(()=>{
			  buttonElement.innerHTML = window.ZLData.info.clickLoad || "";
			  if(window.ZLData.info.clickLoad){
				  buttonElement.style.display="block";
				  clearInterval(setText);
			  }
		  },100)
  
		  buttonElement.style.display = "none";
		  buttonElement.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
		  buttonElement.style.color = "#fff";
		  buttonElement.style.border = "none";
		  buttonElement.style.padding = "10px 20px";
		  buttonElement.style.cursor = "pointer";
		  buttonElement.style.fontSize = "1rem";
  
		  buttonElement.addEventListener("click", () => {
			  const ZL = new ZLPlayer();
			  ZL.openPopup({uuid,	basePath, fullscreenMode: "page", fps: "5", bounce: "true", autoplay: "true"});
		  });
  
		  targetDiv.appendChild(buttonElement);
	  }
  
  </script>