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”类: 工作
  • 其他没有: 不工作