Wie fügt man jquery Leuchtkasten zu Inhalten hinzu, die über Ajax zur Seite hinzugefügt werden?

Question

Ich lade eine Galerie mit der Instagram-API auf eine Seite. Die AJAX sieht so etwas wie diese

$.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>'); 
     }  
    } 
}); 

Die HTML so etwas wie dies macht, nachdem der AJAX den Inhalt auf die Seite geladen wird:

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

Ich weiß, ich Leuchtkasten muß geladen werden, nachdem die dynamischen Inhalte hinzugefügt auf die Seite, aber scheint nicht zu wissen, wie das geht. Alle anderen Ratschläge, die ich von stackoverflow ausprobiert habe, haben eine verrückte Rekursivität erzeugt, die meinen Browser zum Absturz gebracht hat.

Mit diesem Jquery Leuchtkasten Plugin: http://leandrovieira.com/projects/jquery/lightbox/

Answer 1

Ist etwas wie diese Arbeit?

$.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(); 
    } 
}); 

Sie müssen die gleiche Konfiguration auf die lightBox() Funktion zu übergeben, wie Sie die Leuchtkasten zunächst eingerichtet hat, wenn die Seite geladen.

Im Grunde ist es so, dass wir den Leuchtkasten zwingen, sich neu zu initialisieren, nachdem der Ajax-Inhalt geladen wurde.

Die obige sollte die einfachste Lösung mit dem Code sein, den ich gesehen habe.

Wenn Sie etwas mehr mit Ajax-Events spielen möchten, sollten Sie versuchen, stattdessen eine ajax event zu binden, aber das ist ein wenig außerhalb des Umfangs dieser Frage.