1

我有来自 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();​
4

2 回答 2

2

首先，请记住，fancybox 画廊将仅包含您的徽章中的元素，而不是您照片流中的所有照片。要制作一个花式画廊，您需要使用以下方法 为画廊的每个 ( ) 元素设置相同的rel属性：<a>.attr()

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

其次，[setlink]没有任何图像扩展名，因此您需要告诉 fancybox 内容是图像。type使用imageAPI 选项强制内容type: "image"

第三，您可以从缩略图 中标签的属性中破解每个目标图像的正确URL，例如：srcimg

<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');

更新的小提琴

于 2012-12-05T04:08:26.457 回答
0

尝试：

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

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

于 2012-12-04T16:19:43.650 回答