好吧,我以为我正确实现了这个,但我想我必须在某个地方搞定。
这是我的代码:
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>
我认为这样可行,但是当我点击链接时,它只会将我带到占位符图像而不是弹出窗口。我做错了什么?看起来我的文件排列正确,或者至少当我通过firebug检查它们时,它会转到正确的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主题设置有关。
答案 0 :(得分:21)
此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 。
有两个链接: