Fancybox Links werden nicht im Leuchtkasten angezeigt - was fehlt mir?

Question

In Ordnung, ich dachte, ich hätte das richtig umgesetzt, aber ich denke, ich muss irgendwo schummeln.

Hier ist mein Code:

JQuery hier:

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

}); 

Dann Der 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> 

Ich dachte, dass dies funktionieren würde, aber wenn ich auf den Link klicken, bringt es nur mich zum Platzhalterbild anstatt ein Popup zu erstellen. Was habe ich falsch gemacht? Es sieht so aus, als hätte ich die Dateien richtig aufgereiht, oder zumindest, wenn ich sie durch Firebug inspiziere, geht es an die richtige js.

Hier ist, was ich im Kopf genannt:

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

Ich habe auch versucht, ein anderes Plugin namens Magnific Popup, aber es ist auch nicht mehr reagiert. Ich denke, es hat etwas damit zu tun, dass mein Wordpress-Theme eingerichtet ist.

Answer 1

Diese href="http://placehold.it/350x125" sagt nicht fancybox, dass Sie eine image werden, so dass Sie entweder:

1). fügen Sie die fancybox.image spezielle Klasse auf Ihren Link wie

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

2). fügen Sie das (HTML5) data-fancybox-type Attribut zu Ihrem Link wie

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

3). fügen Sie die type Option zu Ihrem fancybox Skript wie

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

was auch immer Sie funktioniert besser für Ihren Fall zu denken.

HINWEIS: Nummern 1). und 2). über Arbeit nur für fancybox v2.x. Nummer 3). Arbeiten für entweder v1.3.4 und v2.x

EDIT: inklusive ein JSFIDDLE mit Ihrem Code und jQuery v1.8.3.

Es gibt zwei Links:

• one "fancybox.image"-Klasse:
• andere, ohne zu arbeiten: nicht Arbeits