0

我正在尝试自定义 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

所以我的标题将是图像的长描述，所以我不希望它们在您将鼠标悬停在图像上时显示。我只需要修复第一张图像，因为其余的无论如何都被隐藏了。我发现这篇关于如何隐藏的帖子： 如何在使用 FancyBox 2.0 时从标题标签中隐藏悬停工具提示？

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

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

更新：我觉得我没有很好地解释我的情况，所以我更新了我的网站以包含我的最新代码：mckernanms.com请注意，当您滚动浏览 Web 图像并返回第一个“标题”时"显示。其他画廊的第一张图片显示的是第一张网络图片的标题，这是错误的。

4

2 回答 2

4

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

请参阅此工作小提琴示例！

将您的代码更改为：

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

就像这样，您可以将当前标题从titleon<a></a>传递到alton the 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>

在此处的文档中找到解决方案！

于 2012-05-30T20:59:07.710 回答
0

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

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

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

于 2012-05-30T21:38:07.643 回答