ContentFlow (coverflow) - нужно, чтобы он работал + вкладки и панели

Question

Я использую этот плагин:

http://www.jacksasylum.eu/ContentFlow/

Вот мой тестовый сайт:

http://flexbeltsite.info/TestPages/

Это основной индексный файл, который загружается

http://flexbeltsite.info/TestPages/_Page3.html

1) Страница, которая содержит contentFlow. Как вы можете видеть, когда вы переходите к индексу, contentFlow не работает. Это работает только тогда, когда вы просматриваете _Page3.html самостоятельно. Эта помощь мне очень помогает, так как мне нужно, чтобы она работала на странице индекса при загрузке этой страницы.

/////////////////////////////////////////////// /

2) Я также хотел бы сделать так, чтобы, когда я нажимал на одно из изображений, оно расширялось (анимация роста) до полной ширины и высоты содержащего элемента div, черной области. Затем, если вы щелкнете по нему еще раз, он вернется к своей первоначальной форме и вернется к остальной части карусели, и карусель будет работать как обычно.

/////////////////////////////////////////////// /

3) Что касается 2-й страницы, то далеко, я хотел бы сделать так, чтобы два набора вкладок и панелей работали абсолютно независимо друг от друга. Как вы можете видеть теперь, если вы попытаетесь использовать их, вкладки будут контролировать содержимое других панелей, а не только их собственные ... Я не хочу этого. Мне нужен 1 верхний набор вкладок и панелей и 1 нижний набор вкладок и панелей. Это то, что я использовал для создания вкладок и панелей, если вам интересно.

http://flowplayer.org/tools/tabs/index.html

Если я смогу вылечить эти 3 вопроса, я очень ценю это. Заранее спасибо.

EDIT:

Это последняя партия кода, которую я пробую, но я до сих пор не могу заставить ее работать. Ничего другого не происходит. Зачем? Что я делаю не так?

<!--Page Loading Mechanism-->
<script type="text/javascript">
    $( document ).ready( function() {
        $( 'a.dynamicLoad' ).click( function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link


            $( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
            /* Content is now loaded */
            ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);

    /*Newest Recommended Code from curlackhacker*/
        $.ajax({ url: $( this ).attr( 'href' ), 
        success: function() {
                var contentFlow = new ContentFlow('.ContentFlow');
                contentFlow._init();
       }}); 
        });
      });

   });


</script>

Answer 1

Жюль 2-й ответ правильный, просто вызовите метод init потока содержимого.

$.ajax({ url: $( this ).attr( 'href' ), 
        success: function() {
                var contentFlow = new ContentFlow('the id of your content flow');
                contentFlow._init();
       }});

Надеюсь, это поможет.

Answer 2

Вы можете добавить сенсорную поддержку для потока контента в Android WebView, внеся следующие изменения в contentflow.js замещать if (this.Browser.iPhone) с if (this.Browser.iPhone || this.Browser.WebKit)

Answer 3

<script type="text/javascript">
$( document ).ready( function() {
    $( 'a.dynamicLoad' ).click( function( e ) {
        e.preventDefault();   // prevent the browser from following the link
        e.stopPropagation();  // prevent the browser from following the link


        $( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
           /* Content is now loaded */
           ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);

           //Initiates your contentflow -Jules.
           var contentFlow = new ContentFlow('.ContentFlow');
           contentFlow._init();
        });
  });

});

Answer 4

1) Несколько замечаний.Когда вы загружаете страницу 3, как вы делаете это через $ ('#MainWrapper') .load ($ (this) .attr ('href'));вы загружаете содержимое URL в mainwrapper.Это хорошо, но ваша страница3 на самом деле представляет собой целую страницу HTML, включая теги.Итак, в конечном итоге ваша страница выглядит примерно так (немного укорочено):

<html>
<body>
<div id="MainWrapper">
    <html>
        <head>
            <script language="JavaScript" type="text/javascript" src="ContentFlow/contentflow.js"></script> 
        </head>
        <body>
             Your page3 content...
        </body>
    </html>
</div> 

<div align="center"></div> 
</body> 
</html>

То, что вы видите, не является правильным HTML, имеет html и тег body внутри другого тега body.Поэтому, если вы планируете загружать содержимое в поток с помощью JQuery, я советую вам удалить теги и из включенного файла (_Page3.html).

2) Затемпричина, по которой ваш поток контента не работает, заключается в том, что эта библиотека является автом.инициируется с использованием функции загрузки тела.Поэтому, когда HTML-код вашей домашней страницы загружен, эта функция вызывается.Но только после этого вы запускаете функцию загрузки JQuery для загрузки _Page3.html и его сценариев на главную страницу, поэтому функция внутри библиотеки потока содержимого, которая настраивает ваш поток, никогда не вызывается.

Способисправить это значит использовать функцию 'success' вашего вызова ajax.Эта функция запускается, когда ваша страница закончила загрузку внешней страницы.Это означает, что ваш _Page3.html был включен в вашу главную страницу, и ТОГДА должен быть настроен поток контента.

$.ajax({ url: $( this ).attr( 'href' ), 
        success: function() {
                //Not sure about this method name, you should look it up in contentflow.js
                onloadInit();
       }});

3) Наконец, вы можете вставить изображение в свою черную часть заголовка с помощьюиспользование метода onclickActiveItem: = function (obj item) библиотеки потока содержимого.И просто добавьте туда свою собственную функцию, которая делает это, выбирая выбранное изображение и изменяя содержимое вашего заголовка, используя JQuery, для отображения выбранного изображения.Как описано здесь: http://www.jacksasylum.eu/ContentFlow/docu.php