2012-03-24 14 views
1

Instagram APIを使用してページにギャラリーをロードしています。ajax経由でページに追加されたコンテンツにjqueryライトボックスを追加するには?

<a href="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_7.jpg" 
title="Photo via washingtonwoman on Instagram" rel="lightbox[gallery]"><img 
class="instagram-image" 
src="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_5.jpg"></a> 

私は動的なコンテンツが追加された後、私はライトボックスをロードする必要があります知っている:AJAXは、AJAXがページにコンテンツをロードした後にHTMLはこのような何かをレンダリングするこの

$.ajax ({ 
    type: 'GET', 
    dataType: 'jsonp', 
    cache: false, 
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID, 
    success: function(data) { 
     for (i in data.data) { 
      $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram" rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>'); 
     }  
    } 
}); 

ようになりますページには、しかし、それを行う方法を把握するように見えることはできません。私がstackoverflowから試した他のアドバイスはすべて、私のブラウザをクラッシュさせた狂気の再帰性を作り出しました。このjqueryのライトボックスプラグインを使用して

http://leandrovieira.com/projects/jquery/lightbox/

答えて

1

は、この作品のようなものをしていますか?

$.ajax ({ 
    type: 'GET', 
    dataType: 'jsonp', 
    cache: false, 
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID, 
    success: function(data) { 
     for (i in data.data) { 
      $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram" rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>'); 
     }  

     //Re-initialise lightboxes 
     $('.instagram').lightBox(); 
    } 
}); 

lightBox()関数には、ページがロードされたときにライトボックスを初期設定するときと同じ設定を渡す必要があります。

基本的にここでは、ajaxコンテンツがロードされた後にライトボックスを強制的に再初期化することが行われています。

上記で、私が見たコードでは最も簡単な解決策になります。

ajaxイベントでもう少し遊びたい場合は、代わりにajax eventにバインドしてみてください。これはこの質問の範囲外です。

+0

それがうまくいった! $( 'instagram')を$( '#gallery')に変更して少し修正しました。ありがとうございました。私はそれがどれほどシンプルかで少し恥ずかしいですが、あなたの説明は完璧です。 – laurenmichell

関連する問題