在 Fancybox 画廊缩略图下方添加文本（页脚）

Question

我正尝试在我的 Fancybox (v2.0.6) 画廊中添加一个额外的文本 space 在缩略图下几乎就像页脚一样。理想情况下就像下面链接的视觉示例中的柠檬绿 space。

我试图完成的视觉示例...http://i.stack.imgur.com/zP7fj.gif

我相信要完成这个，它会在 ul 列表下的 .fancybox-thumbs div class 中增加一个 div，这是缩略图，为此我会需要向 query.fancybox-thumbs.js 添加额外的 js，但我在 javascript 方面的专业知识不足以独自完成它。

谢谢！

我现在的 HTML:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<link rel="stylesheet" href="/css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script>

<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="/js/jquery.fancybox-thumbs.js"></script>
<div id="gallery">
            <div class="gallery_row">
                <div class="gallery_thumbnail">
                    <a href="/images/gal_l/TftD40.jpg" class="fancybox-thumbs" rel="gallery_cityscape" title="St. John the Divine">
                        <img src="/images/Thumbnail/TftD40.jpg" alt="St. John the Divine"/></a>
                    </div>
                <div class="gallery_thumbnail">
                    <a href="/images/gal_l/TftD41.jpg" class="fancybox-thumbs"  rel="gallery_cityscape" title="Cloisters">
                        <img src="/images/Thumbnail/TftD41.jpg" alt="Cloisters"/></a>
                    </div>
                <div class="gallery_thumbnail">
                    <a href="/images/gal_l/TftD42.jpg" class="fancybox-thumbs"  rel="gallery_cityscape" title="Reflecting Pool in Paris">
                        <img src="/images/Thumbnail/TftD42.jpg" alt="Reflecting Pool in Paris"/></a>
                    </div>
                <div class="gallery_thumbnail">
                    <a href="/images/gal_l/TftD43.jpg" class="fancybox-thumbs"  rel="gallery_cityscape" title="Champs-Elysees">
                        <img src="/images/Thumbnail/TftD43.jpg" alt="Champs-Elysees"/></a>
                    </div>
                </div> 
           </div>

我目前的选择：

    <script>
    $(document).ready(function() {

        $('.fancybox').fancybox();

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : true,
            arrows    : true,
            nextClick : true,

            helpers : {
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });
    });
</script>

Answer 1

解决了我自己的问题。

对 jquery.fancybox-thumbs.js 的一些更改以及对 jquery.fancybox-thumbs.css 的一些添加就达到了目的。

以下是jquery.fancybox-thumbs.js

的原文

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo('body');
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);

jquery.fancybox-thumbs.js的替换部分

this.wrap = $('<div id="fancybox-thumbs-container"></div>').addClass(opts.position || 'bottom').appendTo('body');
$('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo(this.wrap);
this.list = $('<ul>' + list + '</ul>').appendTo("#fancybox-thumbs");
$("#fancybox-thumbs").after('<div class="gallery_slideshow_footer"><h4>Text Goes Here.</h4></div>');

jquery.fancybox-thumbs.css

的补充

.gallery_slideshow_footer {
position: fixed;
left: 0;
bottom: 0px;
width: 100%;
overflow: hidden;
z-index: 9999;
height: 16px;
padding: 4px;
background-color: #4f4b4b;
}

.gallery_slideshow_footer h4 {
text-align: center;
font-weight: bold;
font-size: 11px;
margin-top: 2px;
color: #FFFFFF;
text-transform: uppercase;
}

#fancybox-thumbs.bottom {
bottom: 30px;
}

在 Fancybox 画廊缩略图下方添加文本（页脚）

Adding text (footer) below Fancybox gallery thumbnails

jquery

fancybox

fancybox-2