Fancybox 链接未显示在灯箱中 - 我错过了什么? [英] Fancybox links don't show in lightbox - what am i missing?
问题描述
好吧,我以为我正确地实现了这一点,但我想我一定是在某个地方搞砸了.
这是我的代码:
Jquery 在这里:
jQuery(document).ready(function($){$(函数(){$( ".cta-nav-hover" ).tooltip({显示:空,位置: {我的:右+ 40底部",在:左下角"},打开:函数(事件,用户界面){ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );}});});$(函数(){$(".fancybox").fancybox();});});
然后是 HTML:
我认为这会起作用,但是当我单击链接时,它只会将我带到占位符图像而不是弹出窗口.我做错了什么?看起来我的文件排列正确,或者至少当我通过 firebug 检查它们时,它会转到正确的 js.
这是我在头脑中所说的:
<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"类型=文本/css"媒体=屏幕"/><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><!-- 可选地添加助手-按钮、缩略图和/或媒体--><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 核心CSS文件--><link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css"><!-- Magnific Popup 核心JS文件--><script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
我还尝试了另一个名为 Magnific Popup 的插件,但它也没有响应.我认为这与我的 wordpress 主题设置有关.
这个 href="http://placehold.it/350x125"
并不是说你正在打开一个 href="http://placehold.it/350x125"
代码>图像代码> 所以你要么 :
1).将 fancybox.image
特殊 class 添加到您的链接中,例如
<a class="cta-nav-hover Fantasybox Fantasy.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 Fantasybox"><span></span></a>
3).将type
选项添加到您的fancybox 脚本中,例如
$(".fancybox").fancybox({类型:图像"});
你认为更适合你的情况.
注意:数字 1).和 2).以上仅适用于fancybox v2.x.第 3 条).适用于 v1.3.4 和 v2.x
EDIT :包含一个 JSFIDDLE代码和jQuery v1.8.3.
有两个链接:
- 一个使用fancybox.image"类:工作
- 其他没有:不工作
Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
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();
});
});
Then The 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>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- 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>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125"
doesn't say to fancybox that you are opening an image
so you either :
1). add the fancybox.image
special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type
attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type
option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
- one using "fancybox.image" class : working
- other without : not working
这篇关于Fancybox 链接未显示在灯箱中 - 我错过了什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!