Развернуть / Свернуть содержимое на веб-странице [также загрузить содержимое по клику] - PullRequest
Новая
       14

Развернуть / Свернуть содержимое на веб-странице [также загрузить содержимое по клику]

2 голосов
/ 09 марта 2012

Я делаю сайт с разными панорамами на одной странице

сделано с помощью pano2vr gardengnomesoftware.com/pano2vr.php

Проблема в том, что я хочу скрыть каждую панораму в расширяемом разделе. так что пользователь может прокрутить вниз, а затем открыть тот, который он хочет.

Я пробовал разные коды развёртывания / свёртывания, такие как этот

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

и это

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

(причина, по которой я выбрал их, заключается в том, что они имеют плавную анимацию открытия, график, который изменяется, чтобы показать, открыта ли она или закрыта, и вы можете иметь более одного открытия одновременно [стиль без аккордеона])

Однако первая проблема заключается в том, что панорамы не загружаются, если они находятся в свернутом разделе. (если я использую второй сценарий, он имеет файлы cookie и запоминает, открыт ли раздел, если я открою раздел с панорамой и обновлю страницу, он загрузится)

также я не хочу, чтобы они (панорамы / содержимое внутри расширяемых разделов) загружались при открытии страницы, поскольку каждый из них может иметь размер 5 Мб +, поэтому мне нужен какой-то способ загрузки содержимого раздела, когда вы расширить это. (к сожалению, вспышки и автозагрузка 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?

Спасибо, что прочитали это далеко! Я хотел убедиться, что я покрыл все перед публикацией.

1 Ответ

0 голосов
/ 09 марта 2012

Эти плагины, скорее всего, предлагают события, которые вы можете подключить. Если это так, вы можете добавить обработчик события к событию "onExpand" (я предполагаю) и динамически добавить изображение панорамы, используя функции jQuery append () и appendTo (). Поэтому, когда панель свертывания развернута, добавьте тег изображения: 

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

и затем, когда он свернут, удалите тег изображения (по id): 

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