Fancybox不使用Twitter API中的图像 [英] Fancybox not working with images from Twitter API

问题描述

使用Fancybox 2，下面的示例可以完美地工作（省略其他代码）

With Fancybox 2 the example below works flawlessly (left out other code)

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

但下面的代码将图片加载到单独的页面上

but the code below load the image on a separate page

<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使用重定向提供的图像，弹出窗口仍然具有服务图像的大小。

The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.

帮助将是赞赏。

Frank

推荐答案

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

Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.

要么：

一个：添加类型自定义脚本的选项

One: Add the type option to your custom script

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

两个：添加数据 - fancybox-输入您的链接属性

<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中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！