I'm trying to implement Flyout Zoom View based on https://s7d1.scene7.com/s7sdk/3.5/docs/jsdoc/symbols/s7sdk.image.FlyoutZoomView.html#constructor for the project.
The basic example is on that page. I've slightly modified that code (please see below) to show the problem I'm facing. I need to show only one image on the page. The new image should replace the previous one, however I was unable to achieve that result. The new image gets added instead of updating the previous image.
My code is below. Any ideas how to fix it? Thank you.
I've tried to use dispose() (Disposes this viewer instance by releasing all resources used by the viewer logic and deleting all inner objects and components created by the viewer in runtime) from https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-aem-assets-dmc/flyout/jsapi-flyout/r-html5-flyout-viewer-20-javascriptapiref-dispose.html%3Flang%3Dsv#dispose with no luck.
You can copy and paste the code below into your local html file to see the result. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FlyoutZoomView Example</title>
<script language="javascript" type="text/javascript"
src="https://s7d1.scene7.com/s7sdk/3.5/js/s7sdk/utils/Utils.js"></script>
<script language="javascript" type="text/javascript">
s7sdk.Util.lib.include('s7sdk.image.FlyoutZoomView');
s7sdk.Util.lib.include('s7sdk.common.Container');
</script>
<style type="text/css" media="screen">
.s7flyoutzoomview {
width: 300px;
height:400px;
position:relative;
border:1px solid #c2c2c2;
}
.s7flyoutzoomview .s7highlight {
opacity:0.2;
background-color: #000000;
}
.s7flyoutzoomview .s7flyoutzoom {
width:400px;
height:400px;
left:305px;
top:0px;
position:absolute;
border:1px solid #c2c2c2;
}
</style>
</head>
<body>
<p>Only one image is OK on the page. Another image should not be added, but replace the previous one. How to modify the buildImg() function to achieve that result?
<div id="s7container-wrapper">
<div id="s7container"></div>
</div>
<script type="text/javascript" language="JavaScript">
function buildImg(imgpath) {
var params, container, flyoutView;
s7sdk.Util.init();
params = new s7sdk.ParameterManager();
function initViewer(){
params.push("serverurl", "http://s7d1.scene7.com/is/image");
params.push("asset", imgpath);
container = new s7sdk.Container(null, params, "s7container");
flyoutView = new s7sdk.image.FlyoutZoomView(container, params);
}
params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);
params.init();
}
</script>
<script>
function onPageLoadUnfortunatelyItGetsCalledTwice() {
for (i=0; i<2; i++) {
buildImg("demo/bedroom.tif?p="+i);
}
}
</script>
<script>
onPageLoadUnfortunatelyItGetsCalledTwice();
</script>
<button onclick="buildImg('demo/bedroom.tif?p=135')">Update the image</button>
</body>
</html>