Javascript 更新s7sdk.image.FlyoutZoomView类的映像
我正在尝试实现弹出式缩放视图 基于 为了这个项目 基本示例在该页上。 我稍微修改了代码（请参见下文），以显示我所面临的问题。 我只需要在页面上显示一个图像。新的图像应该取代以前的图像，但我无法实现这一结果。将添加新图像，而不是更新以前的图像 我的代码如下。有没有办法解决这个问题？多谢各位Javascript 更新s7sdk.image.FlyoutZoomView类的映像,javascript,html,adobe,flyout,scene7,Javascript,Html,Adobe,Flyout,Scene7,我正在尝试实现弹出式缩放视图 基于 为了这个项目 基本示例在该页上。 我稍微修改了代码（请参见下文），以显示我所面临的问题。 我只需要在页面上显示一个图像。新的图像应该取代以前的图像，但我无法实现这一结果。将添加新图像，而不是更新以前的图像 我的代码如下。有没有办法解决这个问题？多谢各位 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
<!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>
<!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>
弹出式ZoomView示例
include（'s7sdk.image.FlyoutZoomView'）；
include（'s7sdk.common.Container'）；
.S7弹出式窗口ZoomView{
宽度：300px；
高度：400px；
位置：相对位置；
边框：1px实心#C2C2；
}
.S7弹出式窗口ZoomView.S7高亮显示{
不透明度：0.2；
背景色：#000000；
}
.S7弹出式缩放视图.S7弹出式缩放视图{
宽度：400px；
高度：400px；
左：305px；
顶部：0px；
位置：绝对位置；
边框：1px实心#C2C2；
}
页面上只有一个图像是正常的。不应添加另一个图像，而应替换上一个图像。如何修改buildImg（）函数以实现该结果？
函数构建img（imgpath）{
变量参数、容器、弹出视图；
s7sdk.Util.init（）；
params=new s7sdk.ParameterManager（）；
函数initViewer（）{
参数推送（“服务器URL”http://s7d1.scene7.com/is/image");
参数推送（“资产”，imgpath）；
container=新的s7sdk.container（null，参数，“s7container”）；
flyoutView=new s7sdk.image.FlyoutZoomView（容器，参数）；
}
params.addEventListener（s7sdk.Event.SDK_READY，initViewer，false）；
params.init（）；
}
函数onPageLoadUnfortunateYitGetScalledTworth（）{
对于（i=0；i