Back in 2005 I wrote an article detailing how to embed flickr slideshows within your blog or website. Since then, that post has received over 200 comments, a crazy amount of links and numerous mentions on popular blogs. I finally got the message that embeddable flickr slideshows were a hot item.
For the past week or so I have been developing and designing flickrSLiDR. Sorry for the overly Web 2.0 name and design but that was kind of the whole point. Similar to my friend Dave Kellam’s idGettr, I wanted flickrSLiDR to be a simple, one-page tool.
How It Works
The next time you want to post a flickr slideshow on your website, just head over to flickrSLiDR and provide it with the URL of the flickr photostream, photoset or group that contains the pictures to put in a slideshow. For photostreams and groups, you can specify tags or a full text query to fine tune the type of pictures to be displayed in the slideshow. You can also specify the dimensions of the slideshow.
Technical Details
flickrSLiDR is composed of only two files – the main PHP file and a CSS stylesheet. Combined, there are 367 lines of PHP, JavaScript and CSS. At the moment, flickrSLiDR is in what I would consider a minimal implementation. There are several features I would like to add in the future – such as if you specify an odd slideshow dimension that would be prone to cutting off your photos, it would suggest a proper dimension.
Also, in the future I would love to have the ability to do the same thing with flickr’s new slideshows. I have a good bit of the code already written so it might be added soon.
I only did a limited amount of user testing so please let me know if you have any feedback or see any errors. Thanks!
Created with Paul’s flickrSLiDR.
Update: flickrSLiDR has been sold.
Tweet This
Stumble This
{ 23 trackbacks }
{ 80 comments… read them below or add one }
Nice code Paul, gets the job done rather nicely I’d have to say.
More from author
Indeed, as mentioned via AIM, super useful yet really simple tool.
Quite the name too ;) But makes sense to use it
More from author
fantastic paul, I think I’ll do a slideshow right now.
More from author
Good job, Paul. I think it works great, but there are somethings that I have a problem with. Firstly, when you shrink the box, it doesn’t adjust the text size. I wanted a smaller box, similar to the one that you sported on your site in the sidebar, however when I shrunk the box, the writing go mixed together/on top of each other. It would be great if you could shrink the text size in proportion to the box size, or tell Flickr to do this themselves, so that this problem might be removed. This might be hard to modify, but it would make the tool much more versatile.
-Micah
More from author
Paul, I was wondering if it’s possible to do collections as well as sets and groups. I noticed it doesn’t say that on the webpage and that there is no feed on the collections page, so I am assume the answer is no, but thought I’d ask.
Also my slideshow is up and running and looks great. I am having the same text trouble as Micah but that’s fairly insignificant at this point.
It was very easy to use, setup and post into wordpress. Nice work.
More from author
Yet another very useful flickr tool. Thanks! When I tested it with my photos, I found that the toolbar that is displayed at the top of the slideshow seems to be cut off. I don’t know what the problem is, since the one here on your page appears fine.
P.S. (Post Script, not you) – Enjoy Shrek 3
More from author
@Brad – what size did you make the slideshow. There are certain dimensions that make it act weird and there’s nothing I can do about it since it’s all Flickr’s flash. =/
More from author
oooh!
what else can I say? It looks like a tidy tool that does a cool thing that I can use… and I’m fighting the urge to ditch my homework and go and try it out. :)
oooh!
More from author
Brilliant! Another excellent utility. I also like the play on icanhascheezburger. However, this should be much more useful.
More from author
I used the default size you set (500×500). I just tried it again, and I found that if I refresh the page once or twice after submitting the page it seems to work fine. I did embed one on my blog, just to try it out, and everything works fine there too. Again, nice job!
More from author
I suppose if you add more photos to the set, they will be displayed on the embeded slide show? Nicely done… :)
More from author
My 4 word review of this friggin RAD utility:
Have my baby paul.
More from author
Can you make one for smugmug too, please. Please, PLEASE!
More from author
Nicely done Paul :-)
More from author
Very very sweet! Thanks
More from author
Great job Paul.
I guess this was the web service you were talking about on Twitter these days.
More from author
cool and nicely done. good job.
More from author
Great tool Paul! I’ve always loved the flickr slideshows but it was kind of a pain to construct the code on my own each time.
Thank you yet again! You’re a very cool person.
Great tool, it could be better if we can add mp3 to play at the background of the slide.
Great little app. I’ll probably use it a ton. My one (admittedly minor) gripe is that it auto-fills the “Full-Text field every time you make a change on the form. I’ts minorly annoying when I’m being impaitient.
More from author
you’ve made life so much easier. thanks, paul!
More from author
At one point, the top and bottom controls stopped popping up… I’m using IE 7 here on Windows Vista.
More from author
Perfect Paul,
Simple and perfect.
I do agree with a previous poster. MP3 sound files in the backbround add alot and would be a great option.
Steve
That is a pretty amazing and useful tool. Maybe it will become popular, and Yahoo will buy it from you.
More from author
Thanks Paul!
More from author
@those people wanting an mp3, you’ll find that the slideshow flash is actually part of flickr itself – you’re embedding an iframe containing their flash element and giving it a set of conditions on the images to be show.
Also, private images are only seen by those allowed. There was some comment on the flickr page about this – but if you’re not logged in you cannot see the private photos. Guessing the page gets the current user (if any) and checks at the backend somewhere…
More from author
is there a way to make it so it only pulls commons-licensed photos into the slideshow? I’ve been trying to figure this one out forever!
More from author
@andy – not currently, but thank you for the idea, I’ll research this for the next flickrSLiDR update.
More from author
ok, flickrslidr works on this site in a blogger post
http://zyrctest.blogspot.com/
but when I try to put mine into a post, it doesn’t work.
either says some problem with the code or just puts an empty slider box like this comment box or just prints the code as the post.
I am copy/pasting code into the HTML edit page on blogger. I want text, then the slideshow, then some text. I want it to be bigger than the blogger slideshow widget, but not as big as zyrctest.
it works in the preview window on flickrslidr (sort of) it plays all the pix, not just the ones in the set.
and by the way, is there any way to get flickr to play the pix in the order I uploaded them? it plays last first and so on backwards to the first. I’m not looking forward to deleting and reloading them backwards to make them play forwards. ughh.
http://flickr.com/photos/35133198@N07/sets/72157613663023920
hope you can help.
and is there any way to make it
More from author
Thanks for the excellent tool. It works like a dream!
More from author
Simple and effective, god I wish I had thought of this!
I know it seems cheesy but maybe later have some sort of MySpace integration to send it straight to MySpace. Theres code in PHP to do this but it could be very complicated and un-necessary strain on the server.
More from author
Having issues using this potentially sweet app on LiveJournal, though. Tried C/P the code directly into an entry field (autoformatting on and off), and also using the “embed media” option. Not getting no Slider love on my journal, though.
Just shows the credit line at the bottom.
Go figgah.
Nice work, Paul.
More from author
I used to do these manually. Very nice to have a one click solution. Thanks!
More from author
Add my voice to the chorus Paul; Nice Work!
More from author
Can I get my favorites as a slideshow? That would be cool.
More from author
@callum jones: due to the fact that iframes are not allowed on myspace this is not possible.
More from author
sad to say it doesnt work with msn spaces….. :(
Nothing but errors for me, both on the flickrslidr page and in this post.
@jennifer – can you give me some more information? What OS, browser, what the errors are, etcetera.
Thanks
More from author
With this photoset, I’m getting the “No such photos found” error.
More from author
Hey Bryan, it works for me. Make sure you don’t apply any tags or fulltext. Contact me if not.
More from author
@Paul: I figured it out. It’s not showing up in Firefox 2.0.0.3 (WinXP), but it is for IE 6.
More from author
Oh then you’ve run into a known bug with the flickr slideshow. It appears that randomly, a very small percentage of Firefox users are incapable of viewing the slideshow and receive the “no photos found” text. No clue why it does it or how to fix it, but it’s a known issue with the flickr slideshow not the tool.
More from author
@Paul: Thanks for clarification. Still, the site looks great – awesome job!
An alternative is Pictobrowser, which seems to work. It’s not a full-fledged slideshow, but it does allow your visitors to view the pictures within your site.
More from author
Paul. I’ve added you to my blog which should have tracked back. I just wanted to say nice job!
More from author
I’m having the same problem Edie mentioned, but on my Wordpress blog. I paste in the code but most of it disappears and all I’m left with is the credit line. :-(
@vee – WordPress tends to want to fix what it thinks is invalid code, I think there is an option to make it stop doing that. Also, you are not using the visual view and are using the code view when writing the post/pasting the code?
More from author
To get this to work on wordpress:
- go to your Options -> Writing;
- deselect “WordPress should correct invalidly nested XHTML automatically”;
- finish up post w/- stami’s code;
- save + publish;
- reselect “WordPress should correct invalidly nested XHTML automatically”;
- remember if you edit your post, you’ll have to undertake these steps again…
atleast that’s what I think i did…
More from author
Sorry to get back to you so late Paul.
After indicating the photostream I want to get a slide show to (my own in this case), I deleted the tags, no full text, size at defaults, requested slideshow preview and the error was “No such photos found”. My first thought was that perhaps I needed to allow 3rd party aps under my flickr settings, so I changed that on flickr and still received the same error.
On this page, the example box gives me “unknown error”
Work computer
OS: XP Pro v2002 SP2
Browser: FF 2.0.0.3
Flash version 9,0,28,0
Home computer configured a little differently, but same results. Will check exact details later.
@joel – that’s how I have it. That’s always unselected here, I find it more of an annoyance I as know what I’m doing.
More from author
Just now read your reply to Bryan and I guess I fall into those few that can’t see the flickr slideshow. This is really odd since I had no problem at all seeing the old flickr slideshow. Oh well. Thanks for a neat ap anyway. :)
jennifer – if you don’t mind my asking, what exact photo set/stream were you trying to make a slideshow out of? I can try to troubleshoot it.
More from author
@ Joel and Paul
The ‘WordPress should correct invalidly nested XHTML automatically’ box was already unchecked and I put the code into the code view – guess it wasn’t either of those things then!
I don’t have a bells and whistles WP blog – just the free version – maybe I need an upgrade of some kind?
And thank you for helping the technical neanderthal!
@vee: as a last resort turn off the visual editor. I think that also attempts to “right” some of the “wrongs”
More from author
This is a great app but I have one slight issue. I am using Firefox. I seem to receive the “no photos found†text if I log out of my Flickr account, but if I remain logged in it works great. Is there some setting I need to adjust?
Thanks again for this killer app!! Great solution for my site!
More from author
Hi Paul, love this tool so much! We’ve been using it for our Fancy dress parties (we use them on our website). Is it possible to have the images randomly appear in the slideshow rather then direct from the stream? Or is the stream the only way to grab the images diretcly from Flickr?
Cheers!
Bring Stuff
More from author
Wow!!! loved it man… cooler than slide.com… Now give us some customization options on the slide… Add music, Title color etc.
Gr8 Job
More from author
So, has flickrSLiDR stopped working, or… what? It doesn’t seem to be working on my site or using the “preview” function at the site itself. Anyone know what’s going on? Has flickr changed stuff without telling anyone, again?
More from author
@Avi – I just checked and the preview works on flickrSLiDR and your site.
More from author
@Paul, my bad! Turns out that the embedded slideshows work fine in Safari 3 beta and Firefox 2; but not in the recently-released Camino 1.5 – which happens to be my main browser. I figured, stupidly, that Flash is Flash, and the browser didn’t matter – but I should know better, since Flash uses the browser’s network interface.
So now I’m wondering: is this a general problem with Camino 1.5, or is it something specific to me and my configuration? I’m running Flash Player 9,0,28,0 (check it) in OS X 10.4.9 on a MacBook Pro Core Duo 2.0. Anyone else want to try an embedded slideshow with Camino 1.5?
Thanks for the quick reply Paul! And thanks for the very useful tool.
More from author
Hey Paul, without success I tried your 2005 method for embedding slideshows. I was glad to see flickrSLiDR come about so I could add another dimension to my blog. I’m no computer whiz, but I can’t get this newer procedure to work either. Seems so straight forward, do you think it has something to do with me being stuck in in the dark ages of 10.2?
More from author
I have successfully added a flickrSLiDr show from my flickr photo collection, but can not get it to work unless I am signed in to flickr. Once I sign out the error message reads “No such photos found”. Is there something I am missing? Chlorinehead
More from author
@chlorinehead: there are no publicly available photos matching your slideshow requirements: http://flickr.com/photos/8828715@N07/tags/pristineh2o
More from author
Fantastic tool! How can I have the slideshow controls at the top of the iframe and the photo previews at the bottom always display with having the user hover the mouse?
Thanks again!
Tom
Sorry…typo on previous post. I meant…how to have the slideshow controls and previews display withOUT the user having to hover the mouse. Is there a way to do this?
@Thomas J. Fleming: I point you to flickrslidr limitations (or more correctly “people should understand the technology” ;))
More from author
Hi Paul, gosh, you’re turning into a celebrity with this gadget and rightly so. I love it!
My question is I can’t seem to get my favorites to show up unless I’m actually logged into Flickr. I get “unknown error”. Any clues?
Hello! Your application is awesome!
Just a question: Is there any way to sort the pictures by, for example, the taken date?
Thanks a lot!!!!
More from author
I cant get my group photos to show up even when they are set to public it only displays one users photos. Why is this happening?
http://www.flickr.com/groups/ninjatactics
More from author
i am trying to embed the code into my wordpress blog. it is self hosted, but it’s still not working.
just like on this page, i am getting an uknown error.
?
More from author
Congragulations on the sale. I hope you made a hefty sum for that tool. It was neat. Maybe make another customization tool?
More from author
The code will not work on Wordpress.com. Wordpress.com gets rid of anything resembling a javascript or having embed code in it.
Too bad, because this is a really neat slideshow!
More from author
Same as Johnny, This feautre does not work with IE 7 for Groups. It displays my photos when I specify my personal user ID, but no photos load when I change to the Group ID.
More from author
For those that were experiencing the ‘No such photos found’ problem when signed out of flickr, I was able to fix it by NOT using tags and instead just putting the photos in a set and pasting the longish numeric flickr URL into this tool.
Why? I’ve no idea, but in my experience flickr doesn’t like serving tags for some sets (and not others) when you’re signed out. So stick to sets and you should be okay.
More from author
dear mr paul and flickrslidr users,
is it legal to use photos from anyone tagged by flickrslidr on commercial websites?
flickrslidr is so great and i really would like to put it on my website but as i use adsense on my site i am afraid there could be problems with copyright??
best
okay
Good stuff! Any chance you can make it work with private albums? Now THAT would be handy!
More from author
Just wanted to let you know that I’ve released a Wordpress plugin to take advantage of Flickr’s new slideshow. This should also make it much easier to embed into a Wordpress Blog:
http://tylrslidr.com/
More from author
Great app. Nice and simple to use and install on my website. Is there a way to change the black background to white so that it matches me website design? Thanks
More from author