0

このプラグインを使用しています：

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

ここに私のテストサイトがあります：

http://flexbeltsite.info/TestPages/

これはロード中のメインのインデックス ファイルです。

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

1) contentFlow を含むページ。インデックスに移動するとわかるように、contentFlow は機能しません。_Page3.html をすべて単独で表示した場合にのみ機能します。そのページがロードされたときにインデックスページで作業する必要があるため、これはあまり役に立ちません。

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

2）また、画像の1つをクリックすると、含まれるdivの黒い領域の幅と高さ全体に拡大（アニメーションが拡大）されるようにしたいと思います。その後、もう一度クリックすると元の形状に戻り、カルーセルの残りの部分と一緒に戻り、カルーセルは通常どおり機能します。

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

3) 2 ページ目については、2 つのタブとペインのセットを互いに完全に独立して動作させたいと考えています。それらを使用しようとするとわかるように、タブは自分のペインだけでなく、他のペインのコンテンツを制御します...私はそれを望んでいません。タブとペインの上部セットが 1 つと、タブとペインの下部セットが 1 つ必要です。興味があれば、これは私がタブとペインを作成するために使用したものです。

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

これら 3 つの問題を解決できれば、非常にありがたいです。前もって感謝します。

編集：

これは私が試しているコードの最新のバッチですが、まだ動作させることができません。何も違うことは起こっていません。なんで？私は何を間違っていますか？

<!--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>
4

4 に答える 4

2

ジュールの 2 番目の答えは正しいです。コンテンツ フローの init メソッドを呼び出すだけです。

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

お役に立てれば。

于 2011-01-20T12:10:37.570 に答える
0 
<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();
        });
  });

}）;

于 2011-02-07T16:11:05.403 に答える
0

1) いくつかの注意事項。$( '#MainWrapper' ).load( $( this ).attr( 'href' ) ); を介して行っているように、page3 をロードしているとき。URLのコンテンツをメインラッパーにロードしています。これは問題ありませんが、実際には page3 はタグを含む 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) から <html> タグと <body> タグを削除することをお勧めします。

2）次に、コンテンツフローが機能しない理由は、そのライブラリが自動であるためです。ボディ ロード機能を使用して開始されます。ホームページの HTML が読み込まれると、その関数が呼び出されます。ただし、JQuery ロード関数をトリガーして _Page3.html とそのスクリプトをメイン ページにロードするのはその後です。そのため、フローを構成している contentflow ライブラリ内の関数が呼び出されることはありません。

これを修正する方法は、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

于 2011-01-18T15:40:28.387 に答える