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] が開きます。リンクをクリックしたときに、クリックスルーを防ぎ、スライドショーでファンシーボックスを開くにはどうすればよいですか。ありがとう。

編集(コメントから移動)

これは私がしました ： 

$(".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 に伝える必要があります。API オプションを使用してコンテンツを強制するtypeimagetype: "image"

3 番目に、サムネイル のタグの属性から各ターゲット画像の正しい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 に答える