自定义FancyBox标题

Question

我正在尝试自定义FancyBox 2，以便在鼠标悬停在图像上时不显示title属性。现在我设置它的方式是组中的第一个图像显示在页面上，当你点击它时，fancybox加载，你可以滚动查看其他图像。我不希望它们全部显示在页面上，只是第一张图像。我通过隐藏第一个之后的锚点来做到这一点（我没有在FancyBox的网站上看到如何做到这一点的例子，所以这是我的第一个倾向并且它有效）

我的HTML

<li class="web">
  <a href="img/sites/salonantebellum.jpg" class="thumb web fancybox" rel="group1" title="My title">
    <h2 class="title">Web</h2>
    <span>
      <img class="button" src="web.jpg" alt="Web" title="image">Web
    </span>
  </a>
  <div id="myCaption" style="display: none;"><p>My Caption</p></div>
  <a href="img/sites/staceys.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
  <a href="img/sites/mcfpd.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
  <a href="img/sites/redstone.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
</li>

我的头文是

$(document).ready(function() {
  $(".fancybox").fancybox({
    afterLoad: function(){
      this.title = $('#myCaption').html();
    },
    helpers: {
      title : {
        type : 'inside'
      }
    }
  }); // fancybox
}); // ready

所以我的标题将是对图像的长描述，所以当你将鼠标悬停在图像上时我不希望它们显示出来。我只需要修复第一张图像，因为其余图像都是隐藏的。我发现这篇关于如何隐藏的帖子： How do I hide the tooltip on hover from the title tag when using FancyBox 2.0?

你可以在上面的代码中看到我正在尝试使用隐藏的div，但是当我在FancyBox中滚动并返回到第一个图像时，它再次显示“标题”而不是“myCaption” 。

我该怎么做？我是设计师，不是开发人员，所以请好好解释。

更新：我觉得我不能很好地解释我的情况，所以我更新了我的网站以包含我的最新代码：mckernanms.com当您滚动Web图像并返回到首先，显示“标题”。其他画廊的第一张图片显示第一张网页图片的标题是错误的。

Answer 1

根据您的评论，这是您问题的正确解决方案：

请参见此工作Fiddle Example！

将您的代码更改为：

$(document).ready(function() {
  $(".fancybox").fancybox({
    beforeLoad : function() {
      this.title = $(this.element).find('img').attr('alt');
    }
  }); // fancybox
}); // ready

同样，您可以将当前标题从title上的<a></a>传递到alt上的img。

浏览器不会显示它，因为图像是链接的包装，链接不包含标题。

<强>如，

<a rel="example_group" title="" href="path_to_image.jpg">
    <img alt="This is the title, the title is mine!" src="path_to_image.jpg">
</a>

在文档here上找到解决方案！

Answer 2

如果您正在谈论标题“弹出窗口”，那些是浏览器/操作系统的一部分。除了不包括title属性外，这不是你可以禁用的东西。

<a href="img/sites/staceys.jpg" title="My title"></a>

上述代码会因浏览器“功能”而导致悬停弹出，例如Chrome的预览窗格和“Stack Overflow”弹出式气泡中所示：

我相信FancyBox也使用此属性来生成图像的标题。我对FancyBox不够熟悉，但解决方法可能是设计自己的自定义HTML来显示图像。 FancyBox可以弹出迷你HTML内容。

所以，你会这样：

<a href="#" class="fancybox">
    <img src="..." alt="" />
    <b class="caption">Lorem ipsum...</b>
</a>

您可以通过HTML手动显示图片和标题，而不是使用FancyBox的默认图片视图HTML。

这应该允许你有一个标题，同时避免使用A或IMG标签的“标题”属性。

我希望有所帮助。

干杯！

更新1

也许我错过了什么，但我刚删除了“标题”属性，它似乎工作得很好。

<ul class="gallery">
    <li class="web"><a ... title="Salon Antebellum">

只需删除[title =“Salon Antebellum”]位以及下两个元素中的等效位。

同时从中删除title属性：

<span><img class="button" src="web.jpg" alt="Web" title="image">Web</span>

看看是否有效，如果没有，请尝试解释缺少的内容。有很多事情正在发生，我可能不会提到一些细节。