I collegamenti di Fancybox non vengono visualizzati in lightbox: cosa mi manca?

Question

Ok, pensavo di averlo implementato correttamente, ma suppongo di aver preso un pasticcio da qualche parte.

Ecco il mio codice:

Jquery qui:

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(); 
}); 

}); 

poi il codice 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> 

ho pensato che questo avrebbe funzionato, ma quando clicco sul link, porta solo io all'immagine segnaposto invece di fare un popup. Che cosa ho fatto di sbagliato? Sembra che i file siano allineati correttamente, o almeno quando li ispeziono tramite firebug, si passa al js corretto.

Ecco quello che ho chiamato nella testa:

<!-- 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> 

Ho provato anche un altro plugin chiamato Magnific Popup ma è anche non risponde. Penso che abbia qualcosa a che fare con il mio set di temi wordpress.

Answer 1

Questo href="http://placehold.it/350x125" non dice a Fancybox che si sta aprendo un image in modo da sia:

1). aggiungere la classe fancybox.image speciale al tuo link come

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

2). aggiungere il (HTML5) data-fancybox-type attributo per il tuo link come

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

3). aggiungere l'opzione type allo script fancybox come

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

qualunque cosa tu pensi funziona meglio per il vostro caso.

NOTA: numeri 1). e 2). sopra lavoro solo per fancybox v2.x. Numero 3). lavori per entrambi i v1.3.4 e V2.x

EDIT: incluso un JSFIDDLE con il tuo codice e jQuery v1.8.3.

ci sono due link:

• una con "fancybox.image" class: lavorano
• altro senza: non lavorano