Question

我一直在努力寻找应该是一个简单的问题：

我继承了一个使用看起来像是滑块和jquery后伸组合的网站。客户要求其中一个幻灯片具有标题，位于图像的可见底部。

所以我想转此：

<div id="backstretch" style="…">
<img style="…">
</div>

进入这个：

<div id="backstretch" style="…">
<img style="…">
<div class="gallery-caption">Caption</div>
</div>

并销毁div的每个实例，就像对图像一样。

但是，我似乎无法使用javascript来渲染字幕div，并使其与导航保持同步。出于清水的目的，我已经删除了所有的尝试，并回到了我开始使用的JS代码。

以下是一个示例：http://tylonius.net/backstretch/lifestyle-gallery.html

任何人都可以帮忙吗？

Answer 1

其他答案没有关系，我没注意到它是FancyBox。

发布了类似的问题here，here和here。由于@JFK在第一个链接中占了一席之地，您可以使用data-，image的属性前缀来保存标题信息。并使用jquery脚本访问它。

<!doctype html>
<html>
<head>
 . . . 
    <title>your demo</title>
</head>

<body>
    <div id="gallery" class="residences">
        <div class="bigImages">
            <ul>
                <li>
                    <div class="gallery-image">
                            <img class="caption" src="images/lifestyle-gallery/img2.jpg" title="Caption 1" data-caption="Caption will go here">
                     </div> <!-- /gallery-image -->
                </li>

，脚本将是：

$(document).ready(function() {
    $(".fancybox").fancybox({
        helpers : {
        title: { type: 'inside'}
    },
    // use the following if you want to do the caption before the image
    // beforeShow : function(){ 
    afterLoad: function(){
        this.title = this.title + ' ' + $(this.element).data("caption");
        //you can also do the following to use the alt instead of the caption
        //this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
    }

    }); // fancybox
}); // ready

为Jquery全屏幻灯片添加标题

1 个答案: