Fancybox链接不显示在灯箱 – 我缺少什么？
好吧，我以为我正确地实施了这个，但我想我一定是在某个地方疯了。
这是我的代码：
jquery这里：
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(); }); }); 然后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>
我以为这会工作，但是当我点击链接，它只是把我带到占位符图像，而不是做一个弹出。 我做错了什么？ 它看起来好像我有文件排队正确，或者至少当我通过萤火虫检查他们去适当的JS。
这就是我所说的：
<!-- 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>
我也尝试了另一个名为Magnific Popup的插件，但是它也没有响应。 我认为这与我的wordpress主题的设置有关。
这href="http://placehold.it/350x125"并不是说fancybox，你打开一个image所以你要么 ：
1）。 添加fancybox.image特殊类到你的链接
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2）。 将（HTML5） data-fancybox-type属性添加到您的链接
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3）。 把type选项添加到你的fancybox脚本中
$(".fancybox").fancybox({ type: "image" });
不管你认为你的案子效果如何。
注意 ：数字1）。 和2）。 以上仅适用于fancybox v2.x。 3号）。 适用于v1.3.4和v2.x
编辑 ：包括与您的代码和jQuery v1.8.3 JSFIDDLE。
有两个链接：
- 一个使用“fancybox.image”类： 工作
- 其他没有： 不工作
