JavaScript Flickr feed class
People are looking at my tutorial to add Flickr images to web pages with JavaScript. Of coarse this is a doddle, but I thought I could maybe make it even easier by writing a class.
So after much messing around I've got a beta I think is worth sharing.
By default it adds the last 20 images from the public feed to an element with id of "photos". So about the minimum you require is.
<div id="photos"></div>
<script src="HWGflickrfeed.js"></script>
<script>
feed = new HWGFlickrFeed;
feed.getfeed();
</script>
obviously you may want this to be a bit more involved do for the next example we'll
- restrict it to 4 images.
- make them small and square. A few choices of size are available ( _s, _t, _m, -, _b or _o)
- only photos relating to typeography
- stick these in a div with id = "typeography"
so we end up with
<div id="typeography"></div>
<script src="HWGflickrfeed.js"></script>
<script>
var feed = new HWGFlickrFeed;
feed.imageSize ="_s";
feed.maxToAttach = 4;
feed.tags ="typeography";
feed.nodeId ="typeography"
feed.getfeed();
</script>
we can also do a few other things. If you want to limit to your photos only you can use
feed.id = "yourid"; Where you can get your feed id from any of your flick photo pages url as seen below.
Hopefully this enough to get you started.
If you do use the lib please leave a comment I'd love to see an example in the wild.
Cheers
August 8th, 2007 by Gavin Brogan
10 Comments »
hi!
i have worked out how to use your lovely script which is amazing cause i am totally still a learner when it comes to this stuff BUT now i want to add the lovely lightbox thing that everyone is using to the images, but i cant add the code to the img tag because it doesnt exist in the html code.
is there a way to do this somehow?
thanks
alaina*
Comment by missalaineous — October 18, 2007 @ 11:23 pm
Thanks for the lib. using it at http://www.ryanmarrs.com
Comment by Ryan Marrs — December 1, 2007 @ 8:57 am
FYI, I modified your script to include the ability to use LightBox. This requires lightbox already setup on the page you're using (ie the scripts included, and the body onload tag. It defaults to lightbox disabled, so your script will still work, and can take the property feed.useLightBox = true;
You can find the updates at http://www.ryanmarrs.com/HWGflickrfeed.zip
Comment by Ryan Marrs — December 1, 2007 @ 12:53 pm
@missalaineous
cheers for your comments
@Ryan
Thanks dude, I'll incorporate this into the main script and fix the caching at the same time. Next time your in Scotland I'll get you a pint!
Comment by The HeavyWeightGeek — December 1, 2007 @ 4:34 pm
Thanks! Just a heads up though, the script breaks on IE7. I'm trying to hunt down why, but it crashes with a Operation Aborted error and redirects to a page. This is using the pre-lightbox-enhanced version as well. I'll let you know if I figure out why, and what to fix.
Comment by Ryan Marrs — December 1, 2007 @ 6:01 pm
My pleasure. One thing I'd love to see is the ability to pass a userid, and maybe a randomize flag. I'm not familiar enough with the Flickr API, maybe I'll have to flip through the documentation.
Comment by Ryan Marrs — December 1, 2007 @ 6:42 pm
And I figured out the IE7 break problem. It's not the script. I moved the script call to the end of the body tag and everything is fine.
Comment by Ryan Marrs — December 1, 2007 @ 7:21 pm
Hi,
It works in FF for me, but in IE6 it crashes - I get "Internet Explorer cannot open the Internet site file… operation aborted". I tried updating the script with Ryan's but still the same. Any ideas?
Comment by Rowan — December 12, 2007 @ 3:41 pm
Good news. The flickr feed API now has enough added functionality (the stuff I've been waiting on) to mean it's now worth a rewrite. if you're interested in helping drop me an email or leave a comment.
Comment by The HeavyWeightGeek — December 21, 2007 @ 12:50 pm
RSS feed for comments on this post. TrackBack URI
note to self: fix IE caching
Comment by The HeavyWeightGeek — August 17, 2007 @ 3:55 am