Callbacks & Hooks

            
              <div class="ZLContainer500">
	<div id="zoom" style="width:100%; height:500px;"></div>
</div>

<div style="margin: 20px;">
	<input type="checkbox" id="onZoom" onchange="selectZoom(this.checked)">
	<label for="onZoom">onZoom</label>
	<input type="checkbox" id="onZoomMin" onchange="selectZoomMin(this.checked)">
	<label for="onZoomMin">onZoomMin</label>
	<input type="checkbox" id="onZoomMax" onchange="selectZoomMax(this.checked)">
	<label for="onZoomMax">onZoomMax</label>
	<input type="checkbox" id="onAnimateStart" onchange="selectAnimateStart(this.checked)">
	<label for="onAnimateStart">onAnimateStart</label>
	<input type="checkbox" id="onAnimateEnd" onchange="selectAnimateEnd(this.checked)">
	<label for="onAnimateEnd">onAnimateEnd</label>
	<input type="checkbox" id="onPanStart" onchange="selectPanStart(this.checked)">
	<label for="onPanStart">onPanStart</label>
	<input type="checkbox" id="onPanEnd" onchange="selectPanEnd(this.checked)">
	<label for="onPanEnd">onPanEnd</label>
</div>
<div style="margin: 20px;">
	<input type="checkbox" id="onPreloadStart" onchange="selectPreloadStart(this.checked)">
	<label for="onPreloadStart">onPreloadStart</label>
	<input type="checkbox" id="onPreloadEnd" onchange="selectPreloadEnd(this.checked)">
	<label for="onPreloadEnd">onPreloadEnd</label>
	<input type="checkbox" id="onEnterFullScreen" onchange="selectEnterFullScreen(this.checked)">
	<label for="onEnterFullScreen">onEnterFullScreen</label>
	<input type="checkbox" id="onExitFullScreen" onchange="selectExitFullScreen(this.checked)">
	<label for="onExitFullScreen">onExitFullScreen</label>
</div>

<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.js"></script>
<script>

	const ZL = new ZLPlayer({
		basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGLAnimation/",
		clickLoad: false,
		autoplay: true,
		fps: 6,
		type: "animation",
	});
	ZL.loadZLView("DPFvOc-566190", "zoom");

	function selectZoom(checked) {
		const action=(zoomLevel) =>{  checked && console.log("onZoom:", zoomLevel ) };
		ZL.onZoom(action);
	}
	function selectZoomMin(checked) {
		const action=(zoomLevel) =>{  checked && console.log("onZoomMin:", zoomLevel ) };
		ZL.onZoomMin(action);
	}
	function selectZoomMax(checked) {
		const action=(zoomLevel) =>{  checked && console.log("onZoomMax:", zoomLevel ) };
		ZL.onZoomMax(action);
	}
	function selectAnimateStart(checked) {
		const action=(frame,frames) =>{  checked && console.log("onAnimateStart:", `${frame}/${frames}` ) };
		ZL.onAnimateStart(action);
	}
	function selectAnimateEnd(checked) {
		const action=(frame,frames) =>{  checked && console.log("onAnimateEnd:", `${frame}/${frames}` ) };
		ZL.onAnimateEnd(action);
	}
	function selectPanStart(checked) {
		const action=(x,y) =>{  checked && console.log("onPanStart:", `${x},${y}` ) };
		ZL.onPanStart(action);
	}
	function selectPanEnd(checked) {
		const action=(x,y) =>{  checked && console.log("onPanEnd:", `${x},${y}` ) };
		ZL.onPanEnd(action);
	}
	function selectPreloadStart(checked) {
		const action=() =>{  checked && console.log("onPreloadStart" ) };
		ZL.onPreloadStart(action);
	}
	function selectPreloadEnd(checked) {
		const action=() =>{  checked && console.log("onPreloadEnd" ) };
		ZL.onPreloadEnd(action);
	}
	function selectEnterFullScreen(checked) {
		const action=() =>{  checked && console.log("onEnterFullScreen" ) };
		ZL.onEnterFullScreen(action);
	}
	function selectExitFullScreen(checked) {
		const action=() =>{  checked && console.log("onExitFullScreen" ) };
		ZL.onExitFullScreen(action);
	}

</script>