imagen - jquery fancybox 3

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

Question

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:

<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<a href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
</li>
</ul>
</div>

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:

<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>

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.

Answer 1

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

<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>

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

<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>

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