Проблема с использованием fancybox с новыми изображениями, добавленными через jQuery

Question

Я добавляю новые изображения в DOM к этому DIV ...

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

И я загружаю новые изображения вот так ...

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

Я пытаюсьмного комбинаций.Один из них:

$(document).on("click",".fancybox",function(ev){
 $.fancybox({
    href: this,
    type: 'image'
 });
});

Когда я нажимаю на изображения, в навигаторе отображается только изображение.

Я использую jQuery 1.7 и fancybox v2.Версии Las Chrome и Firefox

Любая идея, как показать новые изображения в fancybox для этих новых изображений I

Answer 1

С fancybox v2.x вам нужен только этот пользовательский скрипт

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

fancybox v2.x поддерживает как существующие, так и динамически добавляемые элементы, поэтому вам не нужны .on() или .delegate(). Просто убедитесь, что jQuery, затем файл fancybox js и ваш пользовательский скрипт загружаются перед контейнером, в который вы добавляете свои изображения.

Answer 2

функция «on» обычно используется в существующих элементах вашей DOM. Если вы хотите учитывать элементы, полученные через ajax, лучше использовать .delegate (). что-то вроде

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

Кроме того, какой смысл иметь пустую функцию успеха, если вы уже реализуете ее внутри функции getJSON? Возможно, вам следует просто удалить это и проверить с помощью Firebug или Chrome Inspector, что ваши данные фактически добавляются в DOM.

Надеюсь, что поможет:)