Javascript 向Jquery全屏幻灯片添加标题_Javascript_Jquery_Css_Fullscreen_Jquery Backstretch

Javascript 向Jquery全屏幻灯片添加标题

javascript jquery css

Javascript 向Jquery全屏幻灯片添加标题,javascript,jquery,css,fullscreen,jquery-backstretch,Javascript,Jquery,Css,Fullscreen,Jquery Backstretch,我一直在努力解决一个看似简单的问题：我继承了一个网站，它使用了一个滑块和jquery backstretch的组合。客户要求其中一个幻灯片具有标题，位于图像的可见底部所以我想把这个转过来： <div id="backstretch" style="…"> <img style="…"> </div> 为此： <div id="backstretch" style="…"> <img style="…"> <div class

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

我继承了一个网站，它使用了一个滑块和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代码

以下是一个例子：

有人能帮忙吗？

其他答案与此无关，我没有注意到它是FancyBox

发布了一个类似的问题，并且。正如@JFK在第一个链接中所述，您可以使用image属性的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>

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

$(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