javascript - Fancybox not working with images from Twitter API - Stack Overflow

admin管理员组

文章数量:1391955

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

<a class="fancybox" href=".jpg" title="some title">
        <img src=".jpg" alt="" />
</a>

but the code below load the image on a separate page

<a class="fancybox" href=";size=original" title="some title">
        <img src=".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

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

<a class="fancybox" href="https://si0.twimg./profile_images/2169856486/avatar.jpg" title="some title">
        <img src="http://a0.twimg./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./1/users/profile_image?screen_name=boris&size=original" title="some title">
        <img src="http://a0.twimg./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

• javascript
• twitter
• fancybox
• fancybox-2

Share Improve this question Follow asked Sep 18, 2012 at 12:05 FrankFrank 4,11944 gold badges2222 silver badges2424 bronze badges 3

• How about opening the twitter API url in an iFrame rather than an image? – Jacob Tomlinson Commented Sep 18, 2012 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 Commented Sep 18, 2012 at 20:46
• Have a go and then try this for the resize stackoverflow./questions/5389927/… – Jacob Tomlinson Commented Sep 19, 2012 at 6:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg./profile_images/2169856486/avatar_normal.jpg" alt="" /></a>

本文标签： javascriptFancybox not working with images from Twitter APIStack Overflow