Fancybox 无法处理来自 Twitter API 的图像答案

【问题标题】：Fancybox not working with images from Twitter APIFancybox 无法处理来自 Twitter API 的图像
【发布时间】：2012-09-18 12:05:52
【问题描述】：

使用 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 处理使用重定向提供的图像并且弹出窗口仍然具有所提供图像的大小。

我们将不胜感激。

弗兰克

【问题讨论】：

在 iFrame 而不是图像中打开 twitter API url 怎么样？
嗨，Jacob，这也是我想到的，但窗口不会调整到正确的图像宽度，因为每个图像都不同。
试一试，然后尝试调整大小stackoverflow.com/questions/5389927/…

标签： javascript twitter fancybox fancybox-2

【解决方案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>

【讨论】：