Introducing Photo widget, floating thumbnails for your website

Photo widgetLots of people have contacted me, asking for a version of my Flickr widget that they could use on their website, without having to use Flickr (or Picasa). Doing such a version was easy enough, but I was hesitant to release it. The DIY version of WP-Cumulus has yielded more support requests than the actual WordPress plugin, and answering all the email has been taking a lot of my time.

One thing I could have done was to simply release the sources for the Flickr widget. But there’s a lot of Flickr/Picasa specific stuff in there that you would need to take out before being able to hook the movie up to another data source. So that would have made things harder for everyone.

If my understanding of the GPL license is correct, I (as the sole author) am allowed to release different versions under different licenses. Here’s what I’ve decided to do. The Flickr widget will remain closed source, and will also remain a hosted service. The only thing you should have on your website is the code snippet. I’ll happily take care of the rest. Below, you’ll find a download link for Photo widget, Flickr Widget’s new brother, which is licensed as GPL.

Version comparison

Flickr widgetPhoto widget
Flickr widgetPhoto widget
Let’s you display Flickr photostreams or Picasa albums on your websiteLet’s you display any images you want
Needs a Flickr or Picasa RSS feed as inputUses a custom XML format, from a configurable URL
Images are located on either Flickr or PicasaImages can be loaded from any website, including your own
Clicking an image takes you to that image’s page on Flickr/PicasaLinks and target frames can be set per image in the XML
Available as a hosted service, using a short code snippetAvailable for download, including code examples
Up to 20 images shown simultaniouslyUp to 20 images shown simultaniously
Closed source, will always be free to useOpen source (GPL)
Available hereDownload link below
Download Photo widget (including Flash sources and example files) [30 KB zip file]

Please make sure you extract all the files from the zip to one location. They all depend on each other. You won’t need to upload the flash sources folder to your server when deploying the project.

Support

Photo widget is the DIY version of Flickr widget. It offers greater flexibility, but is a lot harder to implement. The XML interface allows knowledgeable developers you to hook it up to all sorts of CMS solutions, and anyone with a basic understanding of HTML should be able implement a simple static version on his or her website. If you’re a beginner working with a WYSIWYG editor, you should probably look elsewhere.

I’ve tried very hard to make the examples as easy as I possibly could. Feel free to contact me if you run into trouble, but I can offer no guarantee I’ll be able to get back to you.

Donations

I looked into making this a commercial product for a long time. The main reason I didn’t was because that would have meant I’d have to protect the movie from being decompiled and I’d have had to deal with things like keeping track of payments. And I had no idea what a reasonable price would be. While one user might use it as a small gimmick on a personal blog, another might make it the main interface on a large commercial website.

If your project falls in the latter category, please consider donating. I’ve spent a lot of time developing this, so you don’t have to.





399 Comments

  1. hi there, I tried the flickr widget and its pretty cool, I am trying out the photowidget and cannot seem to find how to make the widget transparent on my testpages, is it only the flickr widget that has that option?? thanks

    Marc

    Comment by Marco — February 25, 2010 @ 11:22 pm

  2. its cool I got it, I just used the flickrwidget code and changed the url locations of the xml and swf to where they are on my hosting…. this is a great wee tool, Warm regards:):)

    Comment by Marco — February 25, 2010 @ 11:33 pm

  3. i cant have! help

    Comment by susan — March 2, 2010 @ 10:31 pm

  4. Hi Roy

    Partly in response to Alans question on 06 Oct 2009, I was too having a problem with the href not linking.
    I had changed the code slightly so I tested again with the code as it was downloaded and it still did not work.
    I found that if I run the example.html file directly in my browser i.e. Double click on the file itself! the hyperlinks don’t work, but when I published it to my development server and access it through my local URL it works fine. Not sure if anyone else has found this, I am running Windows 7 with IE8 and Flash 10. at first I thought it may be a bug in Flash10!

    Not published this to a website yet although you can see the photo gallery I intend to replace with photowidget at http://www.afrikanwarriors.com/acrobatics-gallery/gallery.aspx

    I’ll also include a link to your site once I have implemented it.

    Regards

    Carl Thomas

    Comment by Carl Thomas — March 10, 2010 @ 6:20 pm

  5. Hi Roy,

    I downloaded the photo widget, I imported photowidget.swf in my flash actionscript 3 code, without chnge it, but it dosen’t work..It appears this:
    TypeError: Error #1009: Impossible to access to a propriety or a reference’s method of object null.
    at com.roytanck.photowidget::ThumbCloud()

    Can you help me?

    regards
    Fede

    Comment by Fede — March 19, 2010 @ 2:40 pm

    • Hi Fede. This movie was not designed to be loaded into other projects. You’ll have to dig in deeper to get that working. For one thing, the flashvars need to be rerouted because they’re in a different movieclip.

      Comment by Roy — March 20, 2010 @ 8:40 pm

  6. Hi Roy!
    Excuse for my English, I write through online the translator!
    My forum phpbb2. I do not know how at you it is started flash, but I took your two files photowidget.swf and photowidget.xml. In photowidget.xml has changed references to the and that has earned photowidget.swf a file, has inserted in overall_header a code

    width=”400″ height=”400″ The size which can be changed

    All has turned out, only this code and does not suffice much. Once again thanks for this cloud flash :)

    Comment by Kontrochka — March 20, 2010 @ 1:30 am

  7. For some reason the code has not got to the comment

    Comment by Kontrochka — March 20, 2010 @ 1:33 am

  8. Hi, I have used this by placing in my webiste to test it. But when i click on the images it is not redirecting to the page. Can some one please help me understand on this what could be the issue. http://manascreen.web.officelive.com/photowidget/example.html.. Here is my website and i have copied the same example which was given in this page. Any help would be greatly appreciated. Thanks in advance.

    Comment by basu — March 20, 2010 @ 7:21 am

    • Hi Basu. The links need to point to a place on the same domain. The default XML has links to my website that Flash will refuse to process because of potential cross-site scripting issues. If you edit the XML so that the links point to your domain it will probably work.

      Comment by Roy — March 20, 2010 @ 8:35 pm

  9. Roy. Once you get all the bugs out and it is easier to use, I’d recommend putting it out on the Joomla.org web site as a new extension for Joomla user to use on their open source web sites. You will probably finf thousands will use this and offer suggestions for improvements etc., Just a thought.

    Thanks, I like it and will try using it.

    Comment by Jeff — March 21, 2010 @ 1:09 pm

  10. Roy

    I have downloaded and extracted and tried uploading to my Joomla 1.5 site but keep getting error message, unknown archive type or Error! Could not find a Joomla! XML setup file in the package.

    Am I doing something wrong here?

    Thanks

    Comment by Jeff — March 21, 2010 @ 1:33 pm

    • Hi Jeff. This widget wasn’t designed for Joomla specifically. It’s doesn’t need anything beyond Flash, so no CMS. If someone were to create a Joomla plugin around it that would be great, but right now I’m offering this as a DIY solution for knowledgable web designers and developers.

      Comment by Roy — March 22, 2010 @ 12:23 pm

  11. Roy,

    Great stuff! We implemented your photo widget and it looks great. But since we used mod-rewrite, the XML path only works in the root directory. I tried to put feed=/flash/photowidget.xml or even feed=http://fundville.com/flash/photowidget.xml there but it didn’t work. I checked your code and couldn’t see any reasons. I even tried the SWFobject way but it didn’t work either. Kind of strange….

    Jerry

    Comment by Jerry — March 28, 2010 @ 12:12 am

  12. I have been trying to figure this out and now it seems like a crossdomain security issue. Flash probably will not let you load an XML file from an URL. Something may need to be done in the script to fix this issue. Thanks!

    Comment by Jerry — March 28, 2010 @ 4:40 am

  13. Has anyone implemented this successfully with wordpress? I got the same XML path issue and it only worked in the root directory, not individual post.

    Comment by Jerry — March 28, 2010 @ 4:49 am

  14. Jeryy, if the movie is on http://fundville.com (without the www) and so is the XML it should work. That rules out any sandbox trouble. Is the /flash folder in de root? If it’s in the theme (which I’d recommend for reasons of clarity) you should use bloginfo(‘template_directory’) to get the path.

    Comment by Roy — March 30, 2010 @ 1:41 pm

  15. Roy,

    Still couldn’t get it work for the mod-rewrite. But thank you very much for answering the questions! Great product!

    Comment by Jerry — April 2, 2010 @ 1:30 am

  16. Thanks!
    I am studying FLASH.

    Comment by BUN WODNER JAX — April 12, 2010 @ 2:31 am

  17. Hi Roy

    Thank you for very cool widget!!
    I implemented it on my site and it looks great !

    http://www.lirigal.com/tags.aspx?user=Liri&kw=instruction&plang=en&

    Comment by Liri — April 23, 2010 @ 2:05 pm

  18. Hi Roy!

    great work! just one question, is it possibe to create single swf file with xml and jpeg embeeded?
    thanks

    Comment by Jay — May 13, 2010 @ 9:39 pm

    • Hi Jay. Possible? Absolutely! It will however require a few things to be rewired, and you’ll lose a lot of the flexibility that the movie currently has.

      Comment by Roy — May 18, 2010 @ 12:10 pm

  19. Hy Roy,

    Thank’s for your great plugin and sources.

    I succed to add a TITLE/ALT for each image but I still have a problem :
    The font resize is not as fluid as image resize, you don’t seem have this problème on your Tag cloud plugin.
    I tried to add AntiAliasType but there is no difference.

    Do you have an idee for this problem ?

    Thank’s again

    Eric

    Comment by Ricozor — May 21, 2010 @ 10:40 am

  20. I have also an other problem when the swf is loaded for the first time :

    I have a sphere of 8 images and 2 of them have the same position.

    but it ‘s doing this only once time.
    If you reload the page the problem doesn’t appeared

    here is the result : http://www.brainstorming.fr

    Comment by Ricozor — May 21, 2010 @ 1:31 pm

  21. Here is the example white titles : http://www.brainstorming.fr/test/photowidget/example.html

    Comment by Ricozor — May 21, 2010 @ 3:16 pm

    • Ricozor, you’ll have to include (embed) the font into the Flash movie to get smooth motion. I’ve not been able to recreate the issue with two images being in the same position on my end.

      Comment by Roy — May 26, 2010 @ 10:29 am

  22. Hello, this a great gaddet.
    But I have problems to see de source.
    The question is: It was made in flash cs4?

    Comment by HeiwaNoSenshi — May 26, 2010 @ 7:56 pm

    • HeiwaNoSenshi, CS3, so it should open in CS4. The source code is in external .as files.

      Comment by Roy — May 27, 2010 @ 10:54 am

  23. No I have CS3 and no problem to open it.

    Comment by Ricozor — May 27, 2010 @ 9:44 am

  24. Thx for your Help Roy,

    I succied, here is the final result : http://www.brainstorming.fr

    Comment by Ricozor — June 7, 2010 @ 9:11 am

  25. Hi Roy,

    As a huge fan of wp-cumulus, I was delighted to find you do a photo version :) I’m a little stuck getting this going on my test WordPress blog. I get the dreaded “This widget requires Flash Player 9 or better” :)

    I had gone through earlier comments, and ensured that I had the full path to the images , but was still stuck. So I then also added the full path to the “example html” code you provided and it now works fine.
    (e.g. changed param name=”movie” value=”photowidget.swf” to param name=”movie” value=”http://mywebsite.com/photowidget.swf”)

    I didn’t see that specific step mentioned (sorry if I missed it) so thought it may help someone else out if they encounter the same problem. I’m guessing it was to do with the location of the directory in my WP setting, but as you say, finding relative paths in WP can be a challenge, so this was another way of getting it to work.

    KEEP UP THE GREAT WORK!
    thanks
    Tracey Rissik

    Comment by Tracey Rissik — July 5, 2010 @ 6:24 pm

  26. in coppermine gallery?

    Comment by Rouse — July 17, 2010 @ 2:14 pm

  27. Ricozor,

    Can you please publish your source files? That way we can all use the alt functions on our files.
    Your version of this looks great and i think others will agree.

    Are you will to share your knowledge?

    Thanks
    James

    Comment by James — July 19, 2010 @ 2:15 pm

  28. I don´t speak very well english, I speak Spanish

    I like photowidget

    I saw a page web http://www.rickywarwick.com/home/photos-1/photos.html on Safari and

    I saw the transparency as white, is not transparency

    I want to do a photowidget but it is not see on Safari

    Thanks

    Comment by ilse — July 27, 2010 @ 12:16 am

    • Hi Ilse. Recent versions of Safari should have no trouble with flash transparency. What version and OS are you using?

      Comment by Roy — August 4, 2010 @ 11:37 am

  29. Excellent piece of work Roy!
    Love it!
    Congrats.

    Comment by Bas — July 31, 2010 @ 5:11 pm

  30. Hi Roy, thanks you very much, excuse me my english, I update Safari and I saw excellent, it is beautiful. I think so trouble my laptop because before I saw it Internet Explorer 8 and I saw excellent and now it is not appear. I am using Windows Vista that my laptop have when I bought.

    Thank you very much

    Comment by Ilse — August 6, 2010 @ 1:37 am

  31. cool, Thank you so muck~~

    Comment by Justin — August 20, 2010 @ 1:59 pm

  32. Hi Roy… u r widgets is gr888…

    but would u pls help me how can i change the background of it….

    Comment by Naimish — August 27, 2010 @ 2:12 pm

    • Naimish, if you set the background to transparent, you can add a background to the surrounding html element.

      Comment by Roy — September 1, 2010 @ 9:00 am

  33. this widget is really cool but for some reason when i paste the code to my website it doesnt work at all, the only thing that shows up is the ‘get this widget ‘ link i’ve tried adding a picture feed from picasa and flickr neither worked. :-( confused???

    Comment by clair — September 1, 2010 @ 5:55 pm

    • Hi Clair. I’m assuming you’re using the Flickr/Picasa version, not the “Photo Widget” described in this post? If so, does the preview that you get in my blog work? If so, the issue is probably with other code on your website. You can use validator.w3.org to check your site for errors. Some, especially “XML parsing errors” can cause the widget to fail.

      If the preview doesn’t show any images either, the issue is probably a wrong feed URL.

      Comment by Roy — September 2, 2010 @ 9:17 am

  34. Congrats, looks like another useful nice piece of work…sort of.

    My example.html runs fine, but I don’t see where to config!

    The photowidget.xml is very sparse (mostly ‘test.jpg’ )
    So I don’t get how to use an rss feed, or set any other options.

    I have wpCumulus, is this similar?

    Comment by Phillip — September 30, 2010 @ 8:44 pm

  35. Just checking back… still no reply to my request for better docs… ah well.

    Comment by Phillip — October 25, 2010 @ 5:40 pm

  36. Hi Philip. I agree that the XML format is very basic, but that’s by design. I wanted everyone familiar with XML to be able to edit it, or write scripts that generate it. In fact I changed it from RSS input to this in order to simplify it.

    In order to get your images floating, simply place them in a folder with the xml and swf, and add their URLs to the XML (plus the url they should link to of course). The html file has an example of the embed code, and you can change things like display dimensions there.

    Cumulus is similar in terms of appearance, but quite different in how it gets and uses its data.

    Comment by Roy — October 26, 2010 @ 12:39 pm

  37. Hi, I love this! Wondering if there is a way to keep the entire set of photos moving. Mine slows down to a stop, and would really like for it to start when the page loads, and have it continue to rotate even with no mouseover. Is this possible? If so, how?
    Thanks a bunch!
    Mark

    Comment by Mark — October 28, 2010 @ 6:40 pm

  38. Hi Mark,

    it’s easy to keep it rotating with no mouseover.

    you have just to set a speed limit (maxspeed=1 )and switch this code :

    ==================================
    if( active ){
    a = (-Math.min( Math.max( holder.mouseY, -250 ), 250 ) / 150 ) * tspeed;
    b = (Math.min( Math.max( holder.mouseX, -250 ), 250 ) /150 ) * tspeed;
    } else {
    a = lasta * 0.98;
    b = lastb * 0.98;
    }
    ==================================

    by this one :
    ==================================
    if( active ){
    a = (-Math.min( Math.max( holder.mouseY, -250 ), 250 ) / 150 ) * tspeed;
    b = (Math.min( Math.max( holder.mouseX, -250 ), 250 ) /150 ) * tspeed;
    }else{
    if(Math.sqrt((lasta * lasta) + (lastb * lastb)) > maxspeed){
    a = lasta * 0.98;
    b = lastb * 0.98;
    }else{
    a = lasta;
    b = lastb;
    }
    }
    ==================================

    with this solution the sens of the rotation is define by the last mouseover

    enjoy

    @Frank
    sorry for the late but I haven’t got the time to to prepare a ‘white’ version of my code.
    I will do it soon.

    Comment by Ricozor — October 29, 2010 @ 8:44 am

    • Thanks Ricozor. I think I’ve explained earlier that I didn’t include something like this because this movie can, at times, take up quite a bit of CPU power. Having it stop returns CPU usage to 0%. That being said, this snippet probably works, so thanks.

      Comment by Roy — November 9, 2010 @ 9:13 am

  39. Hello Roy,

    Very nice widget. If you could provide some light on my situation it would be awesome.

    I’m running this in WordPress, created a folder called photowidget inside my plugins folder with the test.jpg, swf and xml files. I then added the flash code to my page http://www.schiavonemcgee.com/media/ and as you can see by the gray box it’s there and right clicking confirms it’s your widget. I’m using full paths on everything. Viewing the swf directly shows it’s working http://www.schiavonemcgee.com/wp-content/plugins/photowidget/photowidget.swf but looking at the media page link from above does not.

    Here is the path to the xml http://www.schiavonemcgee.com/wp-content/plugins/photowidget/photowidget.xml

    Do you see any reason why this isn’t working?

    Thanks in advance to you or anyone else who might have a suggestion or solution.

    Comment by Chad — October 30, 2010 @ 1:41 pm

  40. Just an update, I have also tried moving the images, swf and xml file to the root and adjusted the code inside the wordpress page and the image paths in the xml to test.jpg

    I can also see it working by looking at the swf directly http://www.schiavonemcgee.com/photowidget.swf . So the swf is parsing the xml properly and locating the images but it’s not showing properly when looking from within the wordpress page.

    It would of course be nice to have the swf, xml and any images being used in their own directory in order to keep a clean directory structure.

    Thanks.

    Comment by Chad — October 30, 2010 @ 5:28 pm

    • Hi Chad. The path of the XML file can be changed through the flashvar. In generated pages like within WP, you may need to experiment a little. The images are loaded from a path relative to the swf’s folder, so if you put “images/test.jpg” into the XML, there should be an “images” folder next to the swf with the image(s) in it.

      Comment by Roy — November 9, 2010 @ 9:07 am

  41. Hi, i love this script, you are a genius, but i have a problem to use it in another swf.

    When i need to load the compiled SWF in another Flash file
    there is an error:

    TypeError: Error #1009: Impossibile accedere a una proprietà o a un metodo di un riferimento oggetto null.
    at ThumbCloud

    How can i load photo widget in my home site?

    I’m new in Actionscript 3.0, please help me.

    Write me here or in private.

    Thanks

    Comment by Francesco — November 5, 2010 @ 8:08 pm

    • Hi Francesco. The movie really isn’t made to be loaded into other Flash projects. It fully expects to be root, and requires reprogramming to work as a loaded movie.

      Comment by Roy — November 9, 2010 @ 9:00 am

  42. Hi Roy,

    is it possible to use the Photo Widget without the frame (mask) on the Photos?
    I don’t have Flash to edit the AS-File :-(.

    Kind regards

    Didi

    Comment by Didi — November 6, 2010 @ 8:25 am

    • Hi Didi. I’m afraid the border is reated in AS, so you’ll need Flash CS3 or better to remove it. A trial version will do. It’s in the thumb.as file, and I think there are comments that say where.

      Comment by Roy — November 9, 2010 @ 8:58 am

  43. can you please give me the editable version pf the swf file

    Comment by librcs — November 21, 2010 @ 5:41 pm

  44. Is there a way to make effect like Lightbox to work with PhotoWidget? I’d like to setup an XML for images to be opened with a Lightbox effect when clicked.

    Is there a way to obtain this goal?

    Comment by DeepVoid — November 24, 2010 @ 7:16 pm

    • Hi DeepVoid. There probably is, but the catch is that this is Flash. Adding a “rel=lightbox” in the XML won’t do any good. You’d need to modify the AS3 so it calls a JS function in the page upon click to open the lightbox. But even then it won’t know about the other images because they too are inside the Flash. So it’s tricky, but you’re welcome to give it a try.

      Comment by Roy — November 26, 2010 @ 8:50 am

  45. I am having trouble with it showing up in IE7.
    It has been working for over a year and now it does not show up in IE7.
    It does however work in Chrome and Firefox. Do you have any suggestions?

    Comment by Amadna — January 5, 2011 @ 2:45 pm

    • Hi Amadna. Usually when this happens there are markup errors in your page. Have you tried tracking them down with validator.w3.org?

      Comment by Roy — January 12, 2011 @ 1:38 pm

  46. Hi Roy … and everybody.

    Here is a kind of DIY vs problem for drupal (and may be other CMS)
    (i deleted )

    problem :
    i want to insert « photo widget » in a page whose addresses are :
    http://www.mysite.com/drupal/node/13
    /…/…/www/drupal/index.php (realpath)

    previously, inserting code for Flickr widget presents no problem : the widget works
    (yes, i know : it is not photo widget ! ;-) ) :
    div style=”width: 500px; text-align: center;”
    object data=”http://media.roytanck.com/flickrwidget.swf” height=”500″ type=”application/x-shockwave-flash” width=”500″param name=”movie” value=”http://media.roytanck.com/flickrwidget.swf” /param name=”bgcolor” value=”#ffffff” /param name=”flashvars” value=”feed=http%3A//api.flickr.com/services/feeds/photos_public.gne%3_et _caetera” /param name=”AllowScriptAccess” value=”always” /p
    a href=”http://www.roytanck.com”Roy Tanck/a's Flickr Widget requires Flash Player 9 or better./p /objectspan style=”font-size: 9px;”Get this widget at a href=”http://www.roytanck.com”roytanck.com/a/span/div

    then, after having transfered every files of « photo widget » in http://www.mysite.com/drupal/ and modified links in photowidget.xml, http://www.mysite.com/drupal/example.html works also perfectly.

    but when i insert the example.html code in my editor (html code), i don’t get neither images, nor
    the text «  This widget requires Flash Player 9 or better »

    div style=”width: 400px;”
    object data=”http://www.mysite.com/drupal/photowidget.swf” height=”400″ type=”application/x-shockwave-flash” width=”400″ param name=”movie” value=”http://www.mysite.com/drupal/photowidget.swf” / param name=”bgcolor” value=”#ffffff” / param name=”AllowScriptAccess” value=”always” / param name=”flashvars” value=”feed=http://www.mysite.com/drupal/photowidget.xml” /
    p
    This widget requires Flash Player 9 or better/p
    /object/div

    solution (of course do not forget !!!)

    insert the page « example.html » with object :

    div style=”width: 400px;”
    object data=”http://www.mysite.com/drupal/example1.html” height=”470″ width=”470″/object/div

    of course, if you get a more professional solution …

    Comment by corbin — February 5, 2011 @ 11:35 am

  47. i meant supra :
    “(i deleted › and ‹ )”
    ((of course do not forget › and ‹ !!!)

    Comment by corbin — February 5, 2011 @ 11:43 am

  48. forget the previous texts

    drupal solution is here : http://www.stuartandnicola.com/node/1594

    Comment by corbin — February 17, 2011 @ 6:39 pm

  49. I have created the widget, but I wanted to change the dimensions since most logos are rectangular instead of square. In the thumb.as, what should I change to have the dimensions in the ratio of 1 x 2 (height x width).

    This is an awesome plugin, here is my page: http://www.cabcot.com/homelist.html.

    Comment by Chris — February 18, 2011 @ 9:15 pm

  50. -> cabcot

    cf supra Comment by Roy — April 23, 2009 @ 9:52 am

    Comment by corbin — February 19, 2011 @ 12:23 am