¿Cómo hago fancybox href dynamic?

tengo el siguiente código FancyBox:¿Cómo hago fancybox href dynamic?

$('.fancybox').fancybox({ 
      'autoScale' : false, 
      'href' : $('.fancybox').attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 

//some other callbacks etc

el problema es que tengo veinte diferentes una etiqueta de identificación en la página y quiero que el atributo href FancyBox para tomar el id del elemento se ha hecho clic, es decir, la que desencadenó el evento.

He intentado varias cosas, ninguna de ellas ha funcionado!

'href' : $(this).attr('id'), 
'href' : $(this.element).attr('id'),

Esto parece muy simple, pero cada vez que enchufo 'esto' o similar, nada funciona.

Fuente

2012-07-23 absentx

¿Cuál es la diferencia entre usar el atributo 'id' y el atributo' href'? ... deja que html haga lo que hace mejor (sin sobreutilizar jQuery) puedes tener 20 identificadores diferentes en tus etiquetas '', pero todos ellos pueden compartir la misma 'class =" fancybox "' para que tu script de arriba funcione perfectamente y sin complicar demasiado las cosas. – JFK

seguimiento de mi comentario anterior, que acaba de quitar la opción 'href' activos y de FancyBox va a tomar desde el atributo' href' en la etiqueta '' . – JFK

pesar de mi href no son estándar, el cliente no quiere veinte enlaces diferentes en la página, así que estoy usando de href con "#" en ellos y en algún momento en el código que necesito la JS para enviarlo a la href real, que estaba almacenar en id. Abierto a sugerencias! – absentx

Sin each() o click() sólo tiene que añadir devolución de llamada beforeLoad a su script como este

$(".fancybox").fancybox({ 
    autoScale: false, 
    // href : $('.fancybox').attr('id'), // don't need this 
    type: 'iframe', 
    padding: 0, 
    closeClick: false, 
    // other options 
    beforeLoad: function() { 
     var url = $(this.element).attr("id"); 
     this.href = url 
    } 
}); // fancybox

NOTA: esto es para FancyBox v2.0.6 +

Por otro lado, un solución más elegante es utilizar (HTML5) data-* atributo para establecer el href (que se vería raro para establecer id="images/01.jpg" de otro tipo) por lo que podía hacer:

<a href="#" id="id01" data-href="images/01.jpg" ...

y su devolución de llamada

beforeLoad: function(){ 
var url= $(this.element).data("href"); 
this.href = url 
}

y utilizar el atributo id por lo que se entiende por.

EDITAR: Lo mejor es utilizar el atributo especial data-fancybox-href en su ancla como:

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>

y utilizar un script sencillo y sin devolución de llamada como

$(".fancybox").fancybox({ 
    // API options 
    autoScale: false, 
    type: 'iframe', 
    padding: 0, 
    closeClick: false 
});

Ver JSFIDDLE

Fuente

2012-07-23 19:43:51 JFK

ahh perfecto ... He intentado algunas cosas en la devolución de llamada de la carga previa, pero debo haber estado un poco apagado. Gracias de nuevo, funcionó perfectamente, ¡me has ayudado a superar muchas de estas cosas de fancybox! – absentx

Gracias por esto. Necesitaba anexar una bandera ajax a mi url para que pudiera servir una plantilla modal sin bordes, manteniendo la url intacta para rastreadores, lectores de pantalla y abrir en nuevos clics de ventana. – murraybiscuit

probar este

$('.fancybox').each(function() { 
    var elem = jQuery(this); 
    elem.fancybox({ 
      'autoScale' : false, 
      'href' : elem.attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 
      }); 
    } 
);

Fuente

2012-07-23 18:24:41 epascarello

Usted puede iterar sobre su colección de artículos .fancybox y agarrar el id.

$('.fancybox').each(function(){ 
    $(this).fancybox({ 
      'autoScale' : false, 
      'href' : $(this).attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 
      //some other callbacks etc 
    }); 
});

Fuente

2012-07-23 18:27:03

¿Has probado esto?

$('.fancybox').each(function(){ 
    $(this).fancybox({ 
     'autoScale' : false, 
     'href' : this.id, 
     'type':'iframe', 
     'padding' : 0, 
     'closeClick' : false, 
      //some other callbacks etc 
    }); 
});

Fuente

2012-07-23 18:27:21 Engineer

Prueba esto:

$(".fancybox").click(function(){ 
    var url = $(this).attr('id'); 
    $.fancybox({ 
     'autoScale' : false, 
     'href' : url , 
     'type':'iframe', 
     'padding' : 0, 
     'closeClick' : false, 
     //some other callbacks etc 
    }); 
})

Fuente

2012-07-23 19:00:24 RAMe0

¿Cómo hago fancybox href dynamic?

Respuesta

Cuestiones relacionadas