0

いくつかの非表示の div があるページがあります。これらの div は、CSS ハンドラーを使用して非表示にされ.div {display: none}ます。

これらの非表示の各 div 内には、TN3 と呼ばれる jQuery プラグインを使用して構築された、jQuery を利用したスライドショーがあります。

非表示の各 div は、ページに表示される写真にリンクされています。写真をクリックすると、対応する非表示の div が表示され、所定の位置にスライドされます。写真をもう一度クリックするか、非表示の div 内の閉じるボタンをクリックすると、スライドして元に戻り、再び非表示になります。これは、単純な jQuery 表示/非表示トグル スクリプトを使用して行われます。

私の問題は、写真をクリックして「非表示」の div が表示されると、現在表示されている div の jQuery スライドショーが機能しないことです。

これは、スライドショーのスクリプトが関数を使用しているためだと思い$(document).ready()ます。非表示の div は DOM の一部ではないため (に設定されているためdisplay:none)、スライドショーを実行するために必要な jQuery は起動しません。

これにより、次の2つのオプションが残ると思います。

  1. CSS を に設定するのではなく、jQuery を使用してページの読み込み時に非表示の div を非表示にしますdisplay: none。これは、ページの読み込み時に非表示の div がすべて一瞬表示され、jQuery コードで非表示になることを意味すると思います。これは不格好に見え、望ましくありません。

  2. ユーザーが写真をクリックして非表示の div の表示を切り替えると、スライドショーを起動するために必要な jQuery コードを何らかの方法で設定します。これが私が行き詰まるところです-これを行う方法がわかりません。

JavaScript に関する私の知識は jQuery に限定されており、通常は$(document).ready(). ページの読み込み以外の別のイベントでコードをトリガーする方法がわかりません。

スライドショーのコードは以下です。

どんなアイデアでも大歓迎です

$(document).ready(function () {
    $('.tn3-gallery').tn3({
        image: {
            transitions: [{
                type: "fade",
                easing: "easeInQuad",
                duration: 423
            }]
        },
        thumbnailer: {
            overMove: false
        },
        mouseWheel: false
    });
}); // end ready
4

1 に答える 1

2

display:none の要素は DOM に存在しますが、それらにギャラリー プラグインを適用すると、それらの要素の高さ/幅がギャラリーの寸法に使用されるように計算され、要素が表示されないため 0 がかかります。

jquery の .width() または .height() は、display:none の要素に対して 0 を返します。

その場合、考えられる解決策は次のとおりです。

1) 「非表示」の div が最初に表示された後にのみギャラリーを初期化する

2) 要素の display:block を一時的に設定しますが、ギャラリーの初期化前に visiblility:hidden を使用します - これにより、要素の正しい高さ/幅を取得できます

2番目の例:

$('.tn3-gallery')
       .css({'display':'block','visibility':'hidden'})
       .tn3({
           //your tn3 options
          init:function(){
           //turn element back to display:none after gallery is built
            $('.tn3-gallery').css({'display':'none','visibility':'visible'})
          }
       });
于 2013-06-10T12:16:53.923 に答える