为 Jquery 全屏幻灯片添加标题答案

【问题标题】：Adding Captions to Jquery Fullscreen Slideshow为 Jquery 全屏幻灯片添加标题
【发布时间】：2014-10-07 01:08:55
【问题描述】：

我一直在努力解决看似简单的问题：

我继承了一个网站，该网站使用了滑块和 jquery backstretch 的组合。客户要求其中一张幻灯片带有标题，位于图像的可见底部。

所以我想转这个：

<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

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery css fullscreen jquery-backstretch

【解决方案1】：

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

here、here 和 here 发布了类似的问题。正如@JFK 在第一个链接中所说，您可以使用图像属性的 data-, 前缀来保存标题信息。并使用 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

【讨论】：

谢谢。我对示例页面进行了这些更改，但我没有看到代码中标题的呈现位置。我错过了什么吗？
对不起，没注意到它不是灯箱，而是花式箱。我在编辑答案时发现了其他几个类似的问题，如果有帮助，请告诉我。
这不是花式盒子。网站上的其他地方使用了一个 fancybox js，但这是完全独立的。
你在演示中使用了什么插件？
我不确定。我继承了它，JS代码都被缩小了，所以没有cmets。我尝试通过文件名和函数名搜索它，但找不到匹配项。这可能是自定义编写的。