Fancybox 按钮助手不会显示答案

【问题标题】：Fancybox button helper won't displayFancybox 按钮助手不会显示
【发布时间】：2012-02-08 01:15:11
【问题描述】：

我无法让 fancybox 显示按钮助手。我（很确定）我正在加载 css 和 javascript 文件：

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

这是我的 FancyBox js：

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        nextEffect : 'fade',
        prevEffect : 'fade',
        openEffect : 'fade',
        closeEffect : 'fade',
        closeBtn : 'true',
        loop : 'false',
        arrows : 'true',
        nextClick : 'true',
        mouseWheel : 'true',
        helpers     : { 
        title   : { type : 'inside' },
        buttons : {},
        }
    }); 

});

还有我的图片 HTML：

<a class="fancybox" rel="comic" href="http://clpmag.org/admin/rdb/slideshow/gliddencomic/01-glidden-comic.jpg" title=""><img src="http://clpmag.org/admin/rdb/slideshow/gliddencomic/01-glidden-comic.jpg" /></a>
<a class="fancybox" rel="comic" href="http://clpmag.org/admin/rdb/slideshow/gliddencomic/02-glidden-comic.jpg" title="" style="display:none;"><img src="http://clpmag.org/admin/rdb/slideshow/gliddencomic/02-glidden-comic.jpg" width="470px"/></a>

但是在文章页面的花式框中，http://clpmag.org/article.php?article=The-Rollerbladers-of-Suleimaniya_00339，我没有看到屏幕顶部的按钮助手。有任何想法吗？谢谢！！

【问题讨论】：

标签： button fancybox

【解决方案1】：

Fancybox 的按钮在这个容器内：

<div id="fancybox-buttons" class="top">

使用此css 规则：

#fancybox-buttons.top {
    top: 10px;
}

但你还有这条 css 规则

.top {
    margin-top: -80px;
}

在您的文件 http://clpmag.org/css/n_global.css（第 326 行）中，它会覆盖 fancybox 规则并将按钮移出视口的可见区域

因此，您要么重命名 class 'top'，要么使用一些特殊性，例如：

#parent .top {}

顺便说一句，像这样设置一般的 css 规则不是一个好主意

a {
    color: #3770CA;
    text-decoration: none;
}

因为这也会影响到您可能想要使用的其他 jQuery 插件......再次推荐一些特殊性或使用类，例如

#wrapper a {
        color: #3770CA;
        text-decoration: none;
    }

【讨论】：

【解决方案2】：

只需更改 jquery.fancybox-buttons.css 中的第 8 行

#fancybox-buttons.top {
   top: 75px;
}

它会被修复，还要确保在你自己的 CSS 文件中添加这条规则：

#fancybox-buttons ul li {
     list-style-type: none; list-style-type: none; 
}

【讨论】：