Question

使用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>

问题似乎与Twitter API提供的图像URL有关，它返回（301）重定向到完整图像的实际位置。有什么方法可以让Fancybox处理使用重定向提供的图像，并且弹出窗口仍然具有所服务图像的大小。

帮助将不胜感激。

谢

Answer 1

由于第二个代码/链接不包含图片扩展名（jpg，gif，png），因此fancybox无法确定哪些type内容正在尝试打开，因此您需要告诉它。

要么：

一个：将type选项添加到自定义脚本

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

两个：将data-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>

Fancybox不使用Twitter API中的图像

1 个答案: