The ZOOMLOOK Player utilizes the scroll input from a mouse or trackpad to zoom in and out. In some cases, it may be desired to add a key command to the zoom / scroll input for accessibility.
* pageScroll:
* enabled: Enable scroll page with mouse wheel + Shift key. Default false. Note that if use an iframe, pageScroll will only work in the same domain.
* invert: If true, scroll page when Shift key down + mouse wheel. If true, scroll page by mouse wheel. Default: false.
* touch: Whether to support it on touch device. Default: false.
Animation
Gallery
ZLVideo
Embed Code
<h2>Animation</h2>
<div class="ZLContainer500">
<div id="zoom1" style="width:100%; height:500px;"></div>
</div>
<h2>Gallery</h2>
<div class="ZLContainer500">
<div id="zoom2" style="width:100%; height:500px;"></div>
</div>
<h2>ZLVideo</h2>
<div class="ZLContainer500">
<div id="zoom3" 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 = () => {
// set info message example
/**
ZLGlobalActions.setInfo({
"cn": {
"clickLoad": "点击加载",
"wheelInfo": "使用Shfit+鼠标滚轮进行缩放" },
"de": {
"clickLoad": "Klicken Sie zum Laden",
"wheelInfo": "Verwenden Sie Shift+Mausrad zum Zoomen"
},
"en": {
"clickLoad": "Click to load",
"wheelInfo": "Use Shift+mouse wheel to zoom"
},
});
or
setInfo({
"clickLoad": "Click to load",
"wheelInfo": "Use Shift+mouse wheel to zoom"
})
*/
const ZL1 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
clickLoad: false,
type: "animation",
fullscreenMode: 'page',
fps: 8,
pageScroll: {
enabled: true,
invert: false,
touch:true
}
});
ZL1.loadZLView("FqNtFG-498222", "zoom1");
const ZL2 = new ZLPlayer();
const config = {
showThumb: "all",
pageScroll: {
enabled: true,
invert: false,
touch:true
}
};
const configList = [
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
type: "animation",
fps: 8,
autoplay: true,
uuid: "ITAXfv-746089",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
type: "ZLVideo",
inertia: true,
autoplay: true,
uuid: "STegyw-601336",
previewVideo:{
fps:30
}
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
type: "photo",
uuid: "nFCjhY-260482",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLAnimation/",
type: "animation",
fps: 6,
uuid: "JDlDKb-138388",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
type: "photo",
uuid: "vxDveY-506708",
},
{
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
type: "photo",
uuid: "vxDveY-506708",
},
];
ZL2.loadZLGallery(config, "zoom2", configList);;
const ZL3 = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLVideo/",
clickLoad: false,
type: "ZLVideo",
fullscreenMode: 'page',
bounce: false,
spinReverse: true,
fps: 30,
autoplay: false,
pageScroll: {
enabled: true,
invert: false,
touch:true
},
previewVideo:{
fps:30
}
});
ZL3.loadZLView("STegyw-601336", "zoom3");
};
</script>