Fra*_*ank 3 javascript twitter fancybox fancybox-2
使用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>
Run Code Online (Sandbox Code Playgroud)
但是下面的代码将图像加载到单独的页面上
<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>
Run Code Online (Sandbox Code Playgroud)
问题似乎是Twitter API提供的图像URL,它返回(301)重定向到完整图像的实际位置.有什么方法可以让Fancybox处理使用重定向提供的图像,并且弹出窗口仍然具有所服务图像的大小.
帮助将不胜感激.
坦率
JFK*_*JFK 13
由于第二个代码/链接不包含图像扩展名(jpg,gif,png),因此fancybox无法确定type尝试打开的内容是什么,因此您需要告诉它.
要么:
一:将type选项添加到自定义脚本
$(".fancybox").fancybox({
type: "image"
});
Run Code Online (Sandbox Code Playgroud)
二:将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>
Run Code Online (Sandbox Code Playgroud)