Question

我是一名使用fancybox来展示我的画廊的艺术家。我希望人们能够点击每个图像的标题，以便它们转到每个图像独有的单独html页面。我将不胜感激任何帮助。

<div class="span4">
  <a rel="gallery" title="Ambergris Caye • 48in X 36in • Oil on Gallery Wrapped Canvas" class="fancybox" href="images/abstract/ambergris.jpg">
    <img src="images/abstract_thumb/ambergris_thumb.jpg" alt="."class="img-polaroid" />
  </a>
</div>

Answer 1

您可以在html中使用（HTML5）data-*属性来传递link（以及可选title），以便在每个图片的fancybox title中使用：

<div class="span4">
  <a data-link="http://google.com" data-caption="opens google" rel="gallery" title="Ambergris Caye • 48in X 36in • Oil on Gallery Wrapped Canvas" class="fancybox" href="images/image01.jpg">
    <img src="images/thumb01.jpg" alt="." class="img-polaroid" />
  </a>
</div>

<div class="span4">
  <a data-link="http://www.bbc.co.uk/news/" data-caption="opens bbc news" rel="gallery" title="another title here" class="fancybox" href="images/image02.jpg">
    <img src="images/thumb02.jpg" alt="." class="img-polaroid" />
  </a>
</div>

......等等。

然后你可以在fancybox的.wrapInner()回调中使用jQuery的afterShow方法来获取data属性中的信息，如：

$(".fancybox").fancybox({
    afterShow: function () {
        $(".fancybox-title").wrapInner($("<a />", {
            href: this.element.data("link"), // link to
            title: this.element.data("caption"), // shows tooltip on mouse hover fancybox title
            target: "_blank" // optional opens in a new tab/window
        }));
    }
});

这将使用.fancybox-title标记包装每个<a>（选择器）的内容并设置相关属性（href，title等等。你需要/想要data属性。

参见 JSFIDDLE

注意：afterShow回调适用于fancybox v2.x.如果使用v1.3.4，请使用onComplete并定位#fancybox-title选择器。

使用fancybox如何将图像标题链接到html页面？

1 个答案: