3

ファンシーボックスをテストしていますが、ギャラリーとコンテンツの読み込み用の非常に優れた小さなライブラリに見えます。以下のようなコードが機能していますが、ライトボックス クラスのアイテムをクリックするとすぐにギャラリーをトリガーする必要があります。以下のコードは、gallery.htm からコンテンツ div にコンテンツをロードし、コンテンツ div のサムネイル画像をクリックすると、fancybox が起動します。私がやろうとしているのは、ワンクリックで動的コンテンツをロードして派手なボックスを起動することです。誰か教えてください。 

$(document).ready(function(){
$('.lightbox').live('click', function(e){
    e.preventDefault();
    //var url = $(this).attr('href');
    var url = "gallery.htm";
    $('#content').load(url, function(data, stat, req){
        $("a.lightbox").fancybox();
    });
})

});

ありがとうございました

4

2 に答える 2

1

基本的に、2つのセレクターが必要になります。

1）。1つは、メソッドを使用してギャラリーのサムネイルをページにロードするための.load()ものです。例loadGallery：

<a href="javascript:;" class="loadGallery">add dynamic gallery thumbnails</a>

2）。要素をfancyboxにバインドする別の例lightbox。ファイル「gallery.htmclass 」内のすべての要素は、次のようになっている必要があります。

<a class="lightbox" rel="gallery1" href="images/01.jpg"><img src="images/01t.jpg" alt="" /></a>
<a class="lightbox" rel="gallery1" href="images/02.jpg"><img src="images/02t.jpg" alt="" /></a>
<a class="lightbox" rel="gallery1" href="images/03.jpg"><img src="images/03t.jpg" alt="" /></a>

次に、これらの要素（メインページ内）を1つのスクリプトでfancyboxにバインドし、ギャラリーのサムネイルをページにロードして、同じ内でclick次のような別の要素を使用してfancyboxギャラリーを起動します。

$(document).ready(function(){
 // bind elements to fancybox
 $(".lightbox").fancybox();
 // load thumbnails and fire fancybox gallery
 $('.loadGallery').on('click', function(e){
  e.preventDefault();
  var url = "gallery.htm";
  $('#content').load(url, function(data, stat, req){
   $(".lightbox").eq(0).trigger("click");
  }); // load
  $(this).remove(); // you may remove the selector loadGallery after loading the thumbnails
 }); // on
}); // ready

2番目は非推奨になっているため、 .live（）.on()の代わりに使用していることに注意してください。ただし、このメソッドにはjQuery1.7以降が必要です。.on()

.eq(0)また、以前は最初のアイテムからギャラリーを開始していたことに注意してください。そうでない場合、ギャラリーはドキュメントに追加された最後の要素から開始されます。

更新：ここで動作することを確認してくださいデモ

于 2012-06-11T21:51:12.710 に答える
0

ギャラリーアイテムを含むJSON応答を返すAajaxリクエストを作成します。次に、fancyboxを手動で開きます（例：$。fancybox.open（response）;ここで、応答は[{href：''}、{href：''}]のようになります）

于 2012-06-13T16:19:01.673 に答える