flickrSLiDR - My Flickr Slideshow Embedding Tool
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.
Nice code Paul, gets the job done rather nicely I’d have to say.
Indeed, as mentioned via AIM, super useful yet really simple tool.
Quite the name too ;) But makes sense to use it
fantastic paul, I think I’ll do a slideshow right now.
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
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.
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
@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. =/
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!
Brilliant! Another excellent utility. I also like the play on icanhascheezburger. However, this should be much more useful.
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!
I suppose if you add more photos to the set, they will be displayed on the embeded slide show? Nicely done… :)
My 4 word review of this friggin RAD utility:
Have my baby paul.
Can you make one for smugmug too, please. Please, PLEASE!
Nicely done Paul :-)
Very very sweet! Thanks
Great job Paul.
I guess this was the web service you were talking about on Twitter these days.
cool and nicely done. good job.
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.
you’ve made life so much easier. thanks, paul!
At one point, the top and bottom controls stopped popping up… I’m using IE 7 here on Windows Vista.
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.
Thanks Paul!
@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…
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!
@andy - not currently, but thank you for the idea, I’ll research this for the next flickrSLiDR update.
Thanks for the excellent tool. It works like a dream!
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.
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.
I used to do these manually. Very nice to have a one click solution. Thanks!
Add my voice to the chorus Paul; Nice Work!
Can I get my favorites as a slideshow? That would be cool.
@callum jones: due to the fact that iframes are not allowed on myspace this is not possible.
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
With this photoset, I’m getting the “No such photos found” error.
Hey Bryan, it works for me. Make sure you don’t apply any tags or fulltext. Contact me if not.
@Paul: I figured it out. It’s not showing up in Firefox 2.0.0.3 (WinXP), but it is for IE 6.
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.
@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.
Paul. I’ve added you to my blog which should have tracked back. I just wanted to say nice job!
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?
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…
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.
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.
@ 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”
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!
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
Wow!!! loved it man… cooler than slide.com… Now give us some customization options on the slide… Add music, Title color etc.
Gr8 Job
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?
@Avi - I just checked and the preview works on flickrSLiDR and your site.
@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.
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?
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
@chlorinehead: there are no publicly available photos matching your slideshow requirements: http://flickr.com/photos/8828715@N07/tags/pristineh2o
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” ;))
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!!!!
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
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.
?
Congragulations on the sale. I hope you made a hefty sum for that tool. It was neat. Maybe make another customization tool?
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!
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.
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.