Problema usin fancybox mit neuen Bildern hinzugefügt durch jQuery Append

Question

ich neue Bilder auf das DOM zu diesem DIV bin Hinzufügen ...

<div id="photoArea"></div> 

Und ich die neuen Bilder wie diese laden ...

function showImages(token,status){ 
var jqxhr = $.getJSON("/api/1/photos/show.json/?callback=?",{ 
    token: token, 
    status_id: status, 
},function(data) { 
    var html = ""; 
$.each(data.photos, function(i,photo){ 
    html = '<a class="fancybox" rel="gallery1" href="/photos/'+photo.owner_id+'/'+photo.id+'-'+photo.photo_token+'.'+photo.extension+'">'; 
    html += '<img src="/photos/'+photo.owner_id+'/'+photo.id+'-'+photo.photo_token+'x200.'+photo.extension+'" alt="" /> '; 
    html += '</a>'; 
    $('#photoArea').append(html); 
}); 
}).success(function(data) { }); 
} // end function 

Ich versuche eine Menge Kombinationen. Einer davon ist:

Wenn ich über die Bilder klicke, wird nur das Bild im Navigator angezeigt.

Ich benutze jQuery 1.7 und fancybox v2. Las Chrome und Firefox-Versionen

Jede Vorstellung davon, wie die neuen Bilder in fancybox zu dieser neuen Bilder zu zeigen, die ich

Answer 1

die „on“ Funktion im Allgemeinen auf vorhandene Elemente des DOM verwendet wird. Wenn Sie Elemente, die durch Ajax retreived sind, berücksichtigen möchten, ist es besser, .delegate() zu verwenden. so etwas wie

$("#photoArea").delegate("img.fancybox", "click", function() { 
    ... 
}); 

Auch was ist der Punkt, der eine leere Erfolg Funktion, wenn Sie bereits in innerhalb der getJSON Funktion zu implementieren? Sie sollten dies wahrscheinlich entfernen und mit Firebug oder Chrome Inspector überprüfen, dass Ihre Daten tatsächlich zum DOM hinzugefügt werden.

Hope that :)

Answer 2

Mit fancybox v2.x Hilfe benötigen Sie ihn nur benutzerdefinierten Skript

$(document).ready(function(){ 
$(".fancybox").fancybox({ 
    // options if needed 
}); // fancybox 
}); // ready 

fancybox v2.x sowohl bestehende als auch dynamisch hinzugefügt Elemente unterstützt, so dass Sie auch nicht .on() brauchen oder .delegate(). Stellen Sie nur sicher, dass jQuery, dann fancybox js-Datei und Ihr benutzerdefiniertes Skript vor dem Container geladen werden, in dem Sie Ihre Bilder hinzufügen.