imagen - jquery fancybox 3
Los enlaces de Fancybox no se muestran en lightbox. ¿Qué me falta? (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
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.