自定义 FancyBox 的标题

Question

我正在尝试自定义 FancyBox 2，使其在将鼠标悬停在图像上时不显示标题属性。现在我设置它的方式是让组中的第一个图像显示在页面上，当您单击它时，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

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

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

例如，

<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

如果您在谈论标题“弹出窗口”，则它们是浏览器/操作系统的一部分。除了不包含标题属性之外，您无法禁用它。

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

由于浏览器的“功能”，上述代码会在悬停时弹出一个弹出窗口，例如在 Chrome 的预览窗格中看到的和“堆栈溢出”弹出气泡：

我相信 FancyBox 也使用此属性来生成图像的标题。我对 FancyBox 不够熟悉，但解决方法可能是设计自己的自定义 HTML 来显示图像。 FancyBox 可以弹出 mini-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"] 位和接下来 2 个元素上的等效位即可。

同时移除 title 属性：

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

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