Los enlaces de Fancybox no se muestran en lightbox. ¿Qué me falta?

De acuerdo, pensé que lo había implementado correctamente, pero creo que debo haberme equivocado en alguna parte.

Aquí está mi código:

Jquery aquí:

jQuery(document).ready(function( $ ){ $(function() { $( ".cta-nav-hover" ).tooltip({ show: null, position: { my: "right+40 bottom", at: "left bottom" }, open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 ); } }); }); $(function() { $(".fancybox").fancybox(); }); }); 

Entonces el HTML:

 

Pensé que esto funcionaría, pero cuando hago clic en el enlace, simplemente me lleva a la imagen del marcador de posición en lugar de hacer una ventana emergente. ¿Qué hice mal? Parece que tengo los archivos alineados correctamente, o al menos cuando los inspecciono a través de Firebug van a la js adecuada.

Esto es lo que llamé en la cabeza:

              

También probé otro complemento llamado Magnific Popup, pero tampoco responde. Estoy pensando que tiene algo que ver con la configuración de mi tema de WordPress.

Este href="http://placehold.it/350x125" no dice a fancybox que está abriendo una image por lo que:

1). agrega la clase especial fancybox.image a tu enlace como

  

2). agregue el atributo (HTML5) data-fancybox-type a su enlace como

  

3). agrega la opción type a tu script fancybox como

 $(".fancybox").fancybox({ type: "image" }); 

lo que sea que piense funciona mejor para su caso.

NOTA : números 1). y 2). el trabajo anterior para fancybox v2.x solamente. Numero 3). funciona para v1.3.4 y v2.x

EDITAR : incluye un JSFIDDLE con su código y jQuery v1.8.3.

Hay dos enlaces:

  • uno que usa la clase “fancybox.image”: trabajando
  • otro sin: no funciona