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

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]没有任何 image 扩展，所以你需要告诉 fancybox 内容是图像。强制内容type至 image使用 API 选项 type: "image"

第三，您可以从 src 中破解每个目标图像的正确 URL 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