Probleme bei der Reinitialisierung von fancybox bei Inhalten, die über jQuerys ".load()" -Methode abgerufen werden

Question

Ich benutze Easy FancyBox (eine WordPress-Plugin-Version des jQuery FancyBox-Plugins), die einwandfrei funktioniert, bis Inhalt über AJAX geladen wird. Ich verwende den folgenden Code ein div in Reaktion auf ein Klick-Ereignis zu laden:

$('.jspPane').empty().load(href + ' #load-content'); 

ich versucht habe FancyBox als Rückruf neu zu initialisieren, etwa so:

$('.jspPane').empty().load(href + ' #load-content', function(){ 
    $('a[rel="gallery1"]').fancybox(); 
}); 

Aber es funktioniert nicht . Hat jemand Erfahrung mit dieser Art von Sache?

Wenn es Hilfe ist, hier ist ein Link zu der Website, die ich erstelle: http://ecbiz119.inmotionhosting.com/~fullbo6/ Die Elemente, die in einer FancyBox angezeigt werden sollen, werden geladen, wenn Sie auf den Link "Fotos" klicken.

Vielen Dank im Voraus!

FOLLOW-UP:

Nach dem Versuch, die .auf() -Methode verwendet fancybox zu binden, ich habe immer noch kein Glück. Im Fall ist es keine Hilfe, hier ist alles, der jQuery-Code aus meiner Skripte Datei:

jQuery(document).ready(function ($) { 
    $('#load-content').on('focusin', function() { 
     $('a.photos-thumb').fancybox(); 
    }); 
    $('#main-nav .page-item-6 a').addClass('active'); 

    $('#page-content').jScrollPane({ 
     autoReinitialise: true 
    }); 

    $('#page-content-container, #buy-stuff').hide(); 

    $('#main-nav').not('.page-item-6').find('a').on('click', function (e) { 
     e.preventDefault(); 
     var href = $(this).attr('href'); 
     $('#main-nav a').removeClass('active'); 
     $(this).addClass('active'); 
     $('#slide-show-container, #updates-wrap .container').hide(); 
     $('.jspPane').empty().load(href + ' #load-content'); 

     $('#page-content-container, #buy-stuff').show(); 
    }); 

    $('#main-nav .page-item-6').find('a').on('click', function (e) { 
     e.preventDefault(); 
     var href = $(this).attr('href'); 
     $('#main-nav a').removeClass('active'); 
     $(this).addClass('active'); 
     $('#slide-show-container, #updates-wrap .container').show(); 
     $('#page-content-container, #buy-stuff').hide(); 
    }); 

}); 

Answer 1

Fancybox v1.3.4 (die Version, die Sie verwenden) nicht dynamisch hinzugefügt Elemente nicht unterstützt, aber Sie können diese neuen binden Elemente über jQuery .on() Methode.

Check this post zu lernen, wie man es tun und den Code zu Ihren eigenen Selektoren zwicken wie

$("#load-content").on("focusin", function(){ .... 

UPDATE: basierend auf Kommentare und eine weitere Analyse des Quellcodes:

Sie laden Ihre js Dateien in dieser Reihenfolge:

jquery.js?ver=1.7.1 
scripts.js?ver=3.3.1 
jscrollpane.js?ver=3.3.1 
jquery.fancybox-1.3.4.pack.js?ver=1.3.4 

Ihre scripts.js Datei (mit den .on() Methode) versucht, fancybox zu initialisieren, wenn fancybox noch nicht geladen wurde.

Versuchen Sie, die Reihenfolge zu ändern und Ihre eigene Skripte am Ende Datei verlassen wie:

jquery.js?ver=1.7.1 
jscrollpane.js?ver=3.3.1 
jquery.fancybox-1.3.4.pack.js?ver=1.3.4 
scripts.js?ver=3.3.1 

Answer 2

Nochmals vielen Dank für Ihre freundliche Hilfe, JFK. Nach weiterem Basteln (und Haare ziehen) habe ich es endlich zur Arbeit gebracht. Ich habe einen anderen Ansatz gewählt, also poste ich es hier in der Hoffnung, dass es anderen helfen kann. Der Kern ist, dass ich als Rückruf genannt fancybox .load(), etwa so:

$('#main-nav') 
.not('.page-item-6') 
.find('a') 
.on('click', function(e) 
    { 
     e.preventDefault(); 
     var href = $(this).attr('href'); 
     $('#main-nav a').removeClass('active'); 
     $(this).addClass('active'); 
     $('#slide-show-container, #updates-wrap .container').hide(); 
     $('.jspPane') 
      .empty() 
      .load(href + ' #load-content', function() 
       { 
        $('a.photos-thumb').fancybox(); 
       } 
      ); 
     $('#page-content-container, #buy-stuff').show(); 
    } 
); 

Answer 3

Diese Lösung hat mir geholfen (jquery 1.7.2 und 1.3.4 fancybox):

öffnen jquery.fancybox -1.3.4.js und bearbeiten es um die Linie 790 wie diese

$.fn.fancybox = function(options) { 
    if (!$(this).length) { 
     return this; 
    } 

    $(this) 

     .unbind('click.fb') 
     .live('click.fb', function(e) { 
     $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {}))) 
      e.preventDefault(); 

Diese Lösung meiner Probleme gelöst, und es besteht keine Notwendigkeit, etwas anderes zu ändern, auch Initialisierung wie Standard bleiben.

$(".trigger").fancybox(); 

Es ist einfach und sauber.Ich hoffe, das hilft.