Fancybox链接未显示在灯箱中-我想念的是什么? [英] Fancybox links don't show in lightbox - what am i missing?

问题描述

好的，我以为我已经正确实现了，但是我想我一定是在愚蠢的地方.

Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.

这是我的代码:

这里的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.

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>

我还尝试了另一个名为Magnific Popup的插件，但它也没有响应.我认为这与我的wordpress主题的设置有关.

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.

推荐答案

此href="http://placehold.it/350x125"并未对fancybox说您正在打开image，所以您要么:

This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :

1).将fancybox.image特殊 class 添加到您的链接中，例如

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).将(HTML5)data-fancybox-type属性添加到您的链接，例如

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).将type选项添加到您的fancybox脚本中，如

3). add the type option to your fancybox script like

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

您认为适合自己情况的任何事情.

whatever you think works better for your case.

注意:数字1).和2).以上仅适用于fancyboxv2.x. 3号).适用于v1.3.4和v2.x

NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x

编辑:在您的计算机中随附了 JSFIDDLE 代码和jQuery v1.8.3.

EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.

有两个链接:

• 使用"fancybox.image"类的人:工作
• 其他没有:不起作用

• one using "fancybox.image" class : working
• other without : not working

这篇关于Fancybox链接未显示在灯箱中-我想念的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！