¿Cómo vincular fancybox a un elemento dinámico agregado?

Utilizo jquery fancybox 1.3.4 como formulario pop.

pero descubrí que fancybox no se puede vincular al elemento dinámico agregado. por ejemplo, cuando agrego un elemento html al documento actual.

así: primero agrego un elemento al cuerpo y uso jquery,

  $(document.body).append("<a href="home/index" class="fancybox"/>");

y llamo a fancybox,

  $(".ajaxFancyBox").fancybox({padding: 0});

pero fancybox no funciona con elementos dinámicos agregados.

¿Y no puedo llamar a fancybox desde este elemento?

Jan 31 '12 21:01 caochao

La forma más sencilla de vincular fancybox (v1.3.x) a elementos agregados dinámicamente es:

1: Actualice a jQuery v1.7.x (si aún no lo ha hecho)

2: Configure su script usando jQuery APIon() + el focusinevento.

Para que funcione, necesita encontrar el parentelemento de sus elementos class="ajaxFancyBox"según su código anterior (o el parentde parentsegún lo necesite) y adjuntarlo jQuery on()de manera que, por ejemplo, tenga este html:

<div id="container">
 <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

.. aplicaremos on()un focusinevento al elemento con id="container"(el parent) como en el ejemplo anterior, como:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
}); // on

Puede aplicar cualquier opción de Fancybox que necesite. Además, es posible que tenga diferentes scripts para diferentes tipos de contenido (dentro del on()método), como:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
 $("a.iframeFancyBox").fancybox({
  // fancybox API options here
  'padding': 0,
  'width': 640,
  'height': 320,
  'type': 'iframe'
 }); // fancybox
}); // on

IMPORTANTE : el ejemplo anterior no funcionará así en Chrome. La solución es agregar el tabindexatributo a todos los elementos vinculados a fancybox como

<div id="container">
 <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

eso resuelve el problema y funcionará (hasta donde yo sé) en la mayoría de los navegadores, incluido IE7+.

Vea mi página de demostración aquí

ACTUALIZACIÓN: 07 de marzo de 2012.

Me dijeron que este método solo funciona cuando agrega contenido nuevo a la página, pero no cuando reemplaza el contenido de la página.

En realidad, el método funciona en cualquiera de los dos escenarios mencionados anteriormente. Solo asegúrese de que el nuevo contenido de reemplazo también esté cargado dentro del contenedor donde aplicó el .on()método.

Ver demostración

tabindexTambién se aplica la solución alternativa para Chrome.

Jan 31 '2012 17:01 JFK

Estás especificando el nombre de clase incorrecto, prueba esto en su lugar:

$(".fancybox").fancybox({padding: 0});

Jan 31 '2012 14:01 Russ Ferri

Podrías probar algo como esto tal vez:

 $(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>");

Y luego crea una función para crear y mostrar Fancybox:

function showFancybox(){
    $.fancybox(
            '<h2>Hi!</h2><p>Content of popup</p>',
            {
                    'autoDimensions'    : false,
                'width'             : 350,
                'height'            : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            }
        );
}

Jan 31 '2012 14:01 zgood