Fancybox not working with images from Twitter API

Question

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>

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.

Help would be appreciated.

Frank

Answer 1

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.

Either do :

One: Add the type option to your custom script

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

Two : add the data-fancybox-type attribute to your link

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