3

Fancybox 2 では、以下の例は問題なく動作します (他のコードは省いています)。

<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
        <img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>

ただし、以下のコードは画像を別のページにロードします

<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
        <img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>

問題は、完全な画像の実際の場所への (301) リダイレクトを返す Twitter API が提供する画像 URL にあるようです。リダイレクトを使用して提供された画像で Fancybox を動作させ、ポップアップ ウィンドウがまだ提供された画像のサイズを保持できるようにする方法はありますか。

助けていただければ幸いです。

フランク

4

1 に答える 1

13

2番目のコード/リンクには画像拡張子（jpg、gif、png）が含まれていないため、fancyboxはどのtypeコンテンツを開こうとしているのかを判断できないため、通知する必要があります。

どちらか：

1つ：typeカスタムスクリプトにオプションを追加します

 $(".fancybox").fancybox({
   type: "image"
 });

2data-fancybox-type ：リンクに属性を追加します

<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>
于 2012-09-27T07:51:14.867 に答える