Jquery 在Fancybox库缩略图下方添加文本（页脚）

我正试图在我的Fancybox（v2.0.6）图库的缩略图下添加一个额外的文本空间，就像页脚一样。理想情况下，就像下面链接的可视示例中的石灰绿色空间一样

一个我试图实现的可视化示例

我相信要做到这一点，它将是ul列表下的.fancybox thumbs div类中的一个附加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>

$（文档）.ready（函数（）{
$（'.fancybox'）.fancybox（）；
$（'.fancybox拇指'）。fancybox({
效果：“无”，
下一个效果：“无”，
是的，
箭头：是的，
下一步：没错，
助手：{
拇指：{
宽度：50，
身高：50
}
}
});
});

解决了我自己的问题

对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);

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>');

.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;
}