The ZOOMLOOK Compare format combines two equally sized photographs with a slider to compare between the two photos. Zoom in to see the finest detailed deference between two images.
Embed Code
<div class="ZLContainer500">
<div id="zoom" class="view-ZLContainer"></div>
</div>
<script src="/zoomlook/assets/ZLWebGL.js"></script>
<script src="/zoomlook/assets/ZLPlayer.min.js"></script>
<script>
window.onload = () => {
const ZL = new ZLPlayer({
basePath: "https://us.zoomlook.cloud/zoomlookbook/zoomlook/pix/ZLGLPhoto/",
target:"zoom",
compare: {
vertical: false,
dividerWidth: 4,
dividerColor: "#000000",
handlerBgcolor: "#FFFFFF",
handlerActiveBgcolor: "#000000",
}
});
ZL.loadCompare("QLEMRB-759860","MJjFxT-710005" );
};
</script>
### load compare
* loadCompare (leftUuid, rightUuid, config?)
* leftUuid: left view uuid.
* rightUuid: right view uuid.
* config:
* target: The container id of the view.
* basePath: The base path of the assets directory.
const ZL = new ZLPlayer({
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d",
target: "zoom",
compare: {
beforeUuid: "BlhLpN-337653",
afterUuid: "LDZFT-999190",
vertical: true
}
});
ZL.loadCompare();
---OR---
const ZL = new ZLPlayer();
ZL.loadCompare("BlhLpN-337653", "LDZFT-999190", {
basePath: "https://nyc3.zoomlook.co/zoomlook/zoomlook/pix/ZLGL2d",
target: "zoom",
compare: {
vertical: true
}
} );