Question

我有来自flickr徽章的这段html：

<div class="flickr_badge_image" id="flickr_badge_image1">
    <a href="[setlink]">
       <img src="[imagelink].jpg" alt="A photo on Flickr" title="Road" height="75" width="75">
    </a>
</div>
<div class="flickr_badge_image" id="flickr_badge_image2">
    <a href="[setlink]">
       <img src="[imagelink].jpg" alt="A photo on Flickr" title="Road" height="75" width="75">
    </a>
</div>
<div class="flickr_badge_image" id="flickr_badge_image3">
    <a href="[setlink]">
       <img src="[imagelink].jpg" alt="A photo on Flickr" title="Road" height="75" width="75">
    </a>
</div>

每次点击，都会打开[setlink]。单击链接时，如何阻止点击，并使用幻灯片打开fancybox。感谢。

编辑（从评论中移出）

我这样做了：

$(".flickr_badge_image a").fancybox({
    beforeLoad: function() {
        this.title = $(this.element).find('img').attr('alt');
        this.href = $(this.element).find('img').attr('src');
    }
})

也

$('.flickr_badge_image a img').fancybox();

和

$('.flickr_badge_image a').fancybox();

Answer 1

首先，请记住，fancybox图库仅包含徽章中的元素，而不包含照片流中的所有照片。要制作fancybox图库，您需要使用rel方法为图库中的每个（<a>）元素设置相同的.attr()属性，例如：

$(".flickr_badge_image a").attr("rel", "gallery")

第二次，[setlink]没有任何图片扩展程序，因此您需要告诉fancybox该内容是图片。使用API选项type

强制将内容image设置为type: "image"

第三次，您可以从缩略图中src标记的img属性中破解每个目标图片的正确网址，例如：

<img src="http://farm1.staticflickr.com/32/102691513_68290d6cdc_t.jpg" width="75" height="100" title="a corner" alt="A photo on Flickr" >

注意图片名称包含后缀 _t（缩略图）。如果我们删除后缀_t，那么我们将拥有相应缩略图的大图像路径，因此从上面的示例中可以看出

href="http://farm1.staticflickr.com/32/102691513_68290d6cdc.jpg"

...是我们想要在fancybox中显示的大图像的路径。

我们可以使用javascript的方法replace()删除后缀

.replace(new RegExp("_t", "i"), '');

您的完整代码应如下（不需要preventDefault）：

$(".flickr_badge_image a").attr("rel", "gallery").fancybox({
    type: "image",
    beforeLoad: function() {
        this.href = $(this.element).find('img').attr('src').replace(new RegExp("_t", "i"), '');
    }
});

看到它在 JSFIDDLE

中工作

编辑：设置title使用权限：

this.title = $(this.element).find('img').attr('title');

<强> Updated fiddle

Answer 2

尝试：

$(function() {
  $(".flickr_badge_image a").click(function(ev) {
      ev.preventDefault();
      $(this).fancybox(...);
  })
});

ev.preventDefault() - 防止指定事件的默认浏览器行为。 http://api.jquery.com/event.preventDefault/

阻止链接打开并使用flickr徽章激活fancybox幻灯片

2 个答案: