添加标题jQuery的全屏幻灯片

我一直在苦苦挣扎什么似乎像应该是一个简单的问题：添加标题jQuery的全屏幻灯片

我继承了使用什么看起来是一个滑块和jQuery直道组合的网站。客户要求其中一个幻灯片显示标题，位于图像可见底部。

所以我希望把这个：

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

进入这个：

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

并摧毁格的每个实例，因为它与图像一样。

但是，我似乎无法得到JavaScript呈现标题div，并保持与导航同步。为了清水的目的，我已经取消了所有的尝试，并回到了我开始使用的JS代码。

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

任何人都可以在这方面帮助？

来源

2014-10-07 Ty Morton

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

类似的问题发布了here,here和here。由于@JFK位于第一个链接中，因此可以使用data-，prefix作为图像属性来保存标题信息。并用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

来源

2014-10-07 02:02:24

谢谢。我对示例页面进行了这些更改，但是我看不到代码中的标题显示在哪里。我错过了什么？ – 2014-10-07 02:32:14

对不起，没有注意到它不是灯箱，而且是fancybox。当我编辑答案时，我发现了其他几个类似的问题，让我知道它是否有帮助。 – 2014-10-07 02:58:06

这不是fancybox。有一个fancybox js在网站的其他地方使用，但这是完全分开的。 – 2014-10-07 03:05:30

添加标题jQuery的全屏幻灯片

回答

相关问题