1

我正在尝试基于 https://s7d1.scene7.com/s7sdk/3.5/docs/jsdoc/symbols/s7sdk.image.FlyoutZoomView.html#constructor 为项目实施 Flyout Zoom View。

基本示例在该页面上。我稍微修改了该代码（请参见下文）以显示我面临的问题。我只需要在页面上显示一张图片。新图像应该替换以前的图像，但是我无法实现该结果。新图像被添加而不是更新以前的图像。

我的代码如下。任何想法如何解决它？谢谢你。

我尝试使用来自https://experienceleague.adobe.com/docs/的 dispose() （通过释放查看器逻辑使用的所有资源并删除查看器在运行时创建的所有内部对象和组件来处理此查看器实例） dynamic-media-developer-resources/library/viewers-aem-assets-dmc/flyout/jsapi-flyout/r-html5-flyout-viewer-20-javascriptapiref-dispose.html%3Flang%3Dsv#dispose 没有运气。

您可以将以下代码复制并粘贴到本地 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>
4

0 回答 0