3

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

Frank
  • 3,959
  • 4
  • 19
  • 24
  • How about opening the twitter API url in an iFrame rather than an image? – Jacob Tomlinson Sep 18 '12 at 12:27
  • Hi Jacob, this is something i also thought of but the window wouldn't resize to the correct w/h of the image which is different for each image. – Frank Sep 18 '12 at 20:46
  • Have a go and then try this for the resize http://stackoverflow.com/questions/5389927/fancybox-updating-size-of-fancybox-with-iframe-content – Jacob Tomlinson Sep 19 '12 at 06:59

1 Answers1

13

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>
JFK
  • 40,963
  • 31
  • 133
  • 306