Question

我正在制作一个网页上有不同全景图的网站

使用pano2vr gardengnomesoftware.com/pano2vr.php制作

问题是我想隐藏可扩展部分中的每个全景图。所以用户可以向下滚动，然后打开他们想要的那个。

我一直在尝试不同的扩展/折叠代码，例如这个

http://www.adipalaz.com/experiments/jquery/expand.html

和这个

http://webcloud.se/code/jQuery-Collapse/

（我选择这些的原因是他们有平滑的开场动画，一个图形会改变以显示它是打开还是关闭，你可以一次打开一个以上[非手风琴风格]）

然而，第一个问题是全景图如果处于折叠部分则不会加载。（如果我使用第二个脚本它有cookie并记住部分是否打开，如果我打开包含全景图的部分并刷新页面然后它将加载）

我也不希望它们（可扩展部分内的全景图/内容）在您打开页面时加载，因为每个可以是5mb +，所以我需要一些方法来加载部分中的内容扩大它。（不幸的是全景图都是flash和html5自动加载）

这是我用来在页面上加载全景图的代码：

<script type="text/javascript">
        // hide URL field on the iPhone/iPod touch
        function hideUrlBar() {

            if (window.pageYOffset==0) {
                window.scrollTo(0, 1);
                // repeat every second for slow rendering pages
                setTimeout(function() { hideUrlBar(); }, 3000);

            }
        }
    </script>

和

        <script type="text/javascript" src="pano2vr_player.js">
    </script>
    <script type="text/javascript" src="skin.js">
    </script>
    <div id="container" style="width:960px;height:540px;">
    This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
    </div>
    <script type="text/javascript">

        // create the panorama player with the container
        pano=new pano2vrPlayer("container");
        // add the skin object
        skin=new pano2vrSkin(pano);
        // load the configuration
        pano.readConfigUrl("some_panorama_name.xml");
        // hide the URL bar on the iPhone
        hideUrlBar();

    </script>

我见过一些关于ajax的东西，但我不确定如何将它全部绑定到jQuery中以使其工作。

我还认为我可以在隐藏的部分中有一个图像，可以说，点击此处加载全景图，然后使用一些代码替换全景图像，但我不知道我是怎么做的那样做吗？ AJAX？ IFRAME？

感谢您阅读此内容！我希望确保在发布之前涵盖所有内容。

Answer 1

这些插件最有可能提供您可以挂钩的事件。如果是这样，您可以向“onExpand”（我假设）事件添加事件处理程序，并使用jQuery的append（）和appendTo（）函数动态添加全景图像。因此，当展开折叠面板时，添加图像标记：

$("<img src='mypanorama.jpg' id='panorama1' />").appendTo("#collapsePanel1");

然后在折叠时删除图片标记（按ID）：

$("#panorama1").remove();

展开/折叠网页上的内容[也点击加载内容]

1 个答案: