* buttons: Boolean or Array.
* True/False: Whether to display buttons.
* Array: Specify which buttons to display. Value range: [“fullscreen”, “direction”, “play”, “control”].
buttons:
* enabled: Show/hide all buttons. Default: true.
* fullscreenButton: Show/hide fullscreen button. “desktop” means only show on desktop. “mobile” is the same. Default: true. Available values: [“desktop”, “mobile”, true, false].
* directionButton: Show/hide direction buttons. Default: true.
* playButton: Show/hide play button. Default: true.
* controlMoveButton: Show/hide the control move button. Default: true.
buttons: {
enabled: true,
fullscreenButton:true,
directionButton: true,
playButton: true,
controlMoveButton: true
},
Hide buttons
Show buttons
Embed Code
<h2>Hide buttons</h2>
<div class="ZLContainer500">
<div id="zoom1" style="width:100%; height:500px;"></div>
</div>
<h2>Show buttons</h2>
<div class="ZLContainer500">
<div id="zoom2" style="width:100%; height:500px;"></div>
</div>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script>
window.onload = () => {
const ZL1 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGL360",
clickLoad: false,
type: "animation",
autoplay: true,
bounce: true,
buttons: { enabled: false }
});
ZL1.loadZLView("HLLdsS-552645", "zoom1");
const ZL2 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGL360",
clickLoad: false,
type: "animation",
autoplay: true,
bounce: true,
buttons: {
enabled: true,
},
});
ZL2.loadZLView("HLLdsS-552645", "zoom2");
};
</script>