Question

我试图在缩略图下为我的Fancybox（v2.0.6）库添加一个额外的文本空间，就像一个页脚。理想情况下，与下面链接的视觉示例中的柠檬绿空间相似。

我正在尝试完成的一个直观例子...... http://i.stack.imgur.com/zP7fj.gif

我相信要做到这一点，它将是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>

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 gallery缩略图

1 个答案: