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. Great widget! Admittedly I have not read the entire thread of ques and replies, but wondered if it is possible to use your widget to ‘display’ various web/blog site screenshots as images, then have live links behind each to enable the viewer to click on and get to the site displayed?

    I have many ideas for how I could use that capability….

    Can you pls let me know if possible and how to do it, Roy?

    Thanks and keep up your great work!

    Comment by Dave Lyons — September 28, 2011 @ 5:25 pm

    • I’m not sure the Flash security sandbox allows links to other domains, but you could try using a local proxy to get around that. Other than that this should work.

      Comment by Roy — October 3, 2011 @ 3:03 pm

  2. Well here at last has put to the sister wordpress a cursor and so it has beautifully turned out Photo widget to insert into a sitemap. http://www.for-friends.biz/poviazunchiki/?page_id=363 Once again thanks huge Roy to you for this cloud!!!

    Comment by Evgenija — September 29, 2011 @ 4:21 pm

    • hiii.,
      can u say how to create it,
      and where to create it..

      Comment by sairam — October 6, 2011 @ 7:15 pm

    • hi,
      can u say hw to create it
      and where to create it?

      Comment by sairam — October 6, 2011 @ 7:16 pm

      • I’m sorry, but since every website is different, I can’t offer any support for this.

        Comment by Roy — October 10, 2011 @ 9:29 am

  3. Hi Roy,
    We are using your flickr widget for our site (keepmydoctornv.com). We obviously want to follow any rules you may have, but we are wondering if we can donate and remove the link to your site. We are just trying to keep our site looking autonomous, but want your permission to allow us to do this.
    Please let me know if this is possible.
    Thanks!

    Comment by Ashley — October 7, 2011 @ 10:31 pm

    • Please feel free to remove the links. No problem :).

      Comment by Roy — October 10, 2011 @ 9:22 am

  4. I’m really trying to put the photo widget in my blog. But It always goes wrong.

    Comment by J — November 18, 2011 @ 4:15 pm

  5. how can I use this program on a mac? mac doesn’t support zip files as far as I know

    Comment by cowgirl — November 18, 2011 @ 11:59 pm

    • Afaik Macs handle zip files perfectly these days…

      Comment by Roy — November 21, 2011 @ 11:40 am

    • Mac can use Archive Utility (I believe this is the tool). right click and open with… and I am fairly certain it is in the Utilities folder in the Applications folder. Other than that, try Googling “unzip utility Mac” and there will be plenty of free tools.

      Comment by Kyle — March 20, 2012 @ 9:24 pm

  6. About the work you’ve done here…..very cool :)
    Math has never looked so sexy!
    About you willingness to share such a cool product….very cool :)
    It’s not always about the cash payoff…sometimes it’s about bringing
    a vision to life. You’ve done something here Roy….good stuff :)

    Comment by doug941 — November 25, 2011 @ 5:14 am

  7. BTW…..if I knew the emoticons were active I would have used periods! B-8

    Comment by doug941 — November 25, 2011 @ 5:50 am

  8. Hi Roy. Is there a way to change the shape of the images? Currently the shape is square. I want to change it to any shape I like. Thanks in advance.

    Comment by Vene — November 25, 2011 @ 4:54 pm

    • Yes, you can. You’ll need to dive into the Thumb.as class, change things to your liking, and recompile the Flash movie using Flash CS3 or better (a trial version will work).

      Comment by Roy — November 28, 2011 @ 1:34 pm

  9. Hi Roy. I try to change the images and links. When I’m going try to click the link but it did not work. :-( Why? What I need to do?

    Comment by Vene — November 27, 2011 @ 9:22 am

    • I many cases links will work once you place your files on a web server. You also need to make sure the links point to places on the same domain.

      Comment by Roy — November 28, 2011 @ 1:27 pm

      • Roy, can point the link to other website? Sample. I have an image of roytanck website and the link is “http://www.roytanck.com” or image of google point to “http://www.google.com”.
        Please let me know how to do it. Thanks in advance.

        Comment by Vene — November 28, 2011 @ 6:47 pm

  10. Hi Roy,
    Is it possible to change bgcolor of your photo widget to transparent or use a picture?

    Thanking you in advance.
    Best regards,
    Fred from The Netherlands

    Comment by Fred — December 4, 2011 @ 6:53 pm

    • Solved, add

      Comment by Fred — December 5, 2011 @ 7:49 pm

      • param name=”wmode” value=”transparent”

        Comment by Fred — December 5, 2011 @ 7:50 pm

    • Yes, you can set the background-color to transparent (google for “wmode” to see how to do this in general with Flash).

      Comment by Roy — December 7, 2011 @ 9:19 am

  11. hello. i have a problem and i don`t know how to solve it . i have a question: can i make the images open in thickbox ? so far i can open in a new tab. need help. thanks

    Comment by lucian — December 17, 2011 @ 8:33 pm

    • You’ll need to modify the flash so it calls Thickbox directly. Since the links inside the movie are flash, not html, Thickbox will not find them and attach itself to them. You’ll need ExternalInterface (in Flash), and you’ll need to dive into Thickbox to find the right function to call.

      Comment by Roy — December 20, 2011 @ 10:27 am

  12. No me funciona el enlace para wordpress!!! que debo hacer?

    Comment by mafe — December 22, 2011 @ 7:49 pm

  13. Thanks for Admin Roytanck.com We have used roytanck widtget…..
    God bless you all….

    Comment by Kaligrafi Arab — December 27, 2011 @ 1:34 pm

  14. How can i put this in my wordpress.com?Must to modified?Please help me. Thanks!

    id=”c9f6ff0acd5114e499693cc3406d2100″>

    Comment by dee — December 29, 2011 @ 7:14 pm

    • Unfortunately, you can’t because wp.com blocks Flash.

      Comment by Roy — December 30, 2011 @ 1:51 pm

  15. Latest Flash Player is installed, in the Firefox no display on the photo widget and in Google chrome is working. Why? Any solutions. Thank you in advance.

    Comment by Vene — January 2, 2012 @ 10:05 am

  16. how, if this be the case, can you use this programme on face book? or say, Blogg Tv…?

    Comment by trevor — January 4, 2012 @ 2:03 am

  17. Hello Roy, I downloaded your photo widget. You put link on every photo in XML. But when I click on any photo, it is not redirect to any website. (testing on local/computer. not on server.)

    why is this happening..?

    Comment by Lokesh — January 7, 2012 @ 1:36 pm

  18. Hi, i really don’t succeed to install this so cool plugin.
    What is required in ? Does this structure work for ?

    This widget requires Flash Player 9 or better

    Comment by Ezio — February 5, 2012 @ 12:00 am

  19. in head* & for body*

    object type=”application/x-shockwave-flash” data=”photowidget.swf” width=”400″ height=”400″
    param name=”movie” value=”photowidget.swf”
    param name=”bgcolor” value=”#ffffff”
    param name=”AllowScriptAccess” value=”always”
    param name=”flashvars” value=”feed=photowidget.xml”

    Comment by Ezio — February 5, 2012 @ 12:11 am

  20. Hello!
    Prompt how to make pictures round? Where it in a code?
    Thanks!

    Comment by Iprophet — February 15, 2012 @ 10:28 am

    • The Thumb.as class handles the images, and masks them. You should rewrite the mask if you want round images.

      Comment by Roy — February 16, 2012 @ 10:45 am

  21. Hello

    Is it possible that when users click on the gadget it directs them somewhere?

    What part in the code can i modified to accomplish this?

    Comment by Dihego — February 18, 2012 @ 11:19 pm

    • The XML has all the links, so there’s no need to edit any real “code”.

      Comment by Roy — February 20, 2012 @ 11:42 am

  22. A brilliant idea. We have been looking for an upgrade to the current gallery feature on our website and will check this out. Thanks Roy.

    Comment by Steel band london — February 19, 2012 @ 11:25 am

  23. Perhaps i will make the donation first, it will be so polite, but my question is about HTML5, will be possible a version of your magnificent photowidget in it? Perhaps is my uncoscious knowledgement of any impossibility. But is for this question of iPads…

    Comment by Pep Llaurado — February 28, 2012 @ 12:18 pm

    • It’s likely that a similar effect can be made using HTML5’s canvas, but I’ve not given that a try.

      Comment by Roy — February 29, 2012 @ 9:17 am

      • Thanks Roy. Pep.

        Comment by Pep Llaurado — February 29, 2012 @ 10:10 am

  24. hello sir… i am not getting how to upload it into my blog..can u please say it in more easy way.. iam new for my blog…

    Comment by movie manchurya — March 2, 2012 @ 9:27 pm

    • I’m sorry, this is a do-it-yourself project, aimed at professional developers. The steps needed to get this on your site are different for each platform or setup. I’m not familiar with blogspot, so I won’t be able to help you.

      Comment by Roy — March 5, 2012 @ 9:41 am

  25. Love the widget!! Thank you so much!

    Is there a way to make it load in lightbox when a user clicks a photo?

    Comment by Jeff Underhill — March 29, 2012 @ 6:47 am

    • I think most lightboxes will let you call them directly through a javascript function, instead of the usual rel=”lightbox” thing (which breaks in Flash). I’ve never tried it, but it should be possible to use Flash’s ExternalInterface class to do this.

      Comment by Roy — March 29, 2012 @ 11:27 am

  26. Hello good day like to know information on how to make my cmo resembles the widget you have on site at UNO where the photo appears opposite word. see http://www.onu.org.br/.
    thank you

    Comment by josé rodrigo da silva — April 24, 2012 @ 12:52 pm

    • I don’t have a version that does images and tags, if that is what you mean.

      Comment by Roy — April 26, 2012 @ 12:56 pm

  27. how i can display more then 20 images?

    Comment by nusqasun — April 30, 2012 @ 1:29 pm

    • There’s a hard cap right now because more images woudl mean they would overlap, and that does not look good. Especially when they overtake each other on the z-axis.

      Comment by Roy — May 24, 2012 @ 11:09 am

  28. Hi Roy,

    Thanks for the widget. A website that I have become the admin for has been using it for sometime now. We are rebuilding our website and I would love to include this widget on the new site. However, because it uses flash, I have had some push back from others in the group because it is not visible in iOS (and reportedly IE, although I have not checked it for myself.)

    I noticed some comments about HTML 5 back in February. Have you given this anymore thought? Do you think it is possible, and do you have any plans to do so?

    Comment by James — May 27, 2012 @ 4:16 am

    • I wouldn’t hold my breath. My experiments with html5 and canvas have not yielded results I’m happy with at all. It’s all just not very smooth, and browser support is severely lacking still. Plus I’m usually very busy with client work.

      Comment by Roy — May 31, 2012 @ 10:45 am

      • Thanks Roy. I actually found an alternative version in HTML5 here…

        http://www.goat1000.com/tagcanvas.php

        Comment by James — June 1, 2012 @ 1:04 am

        • Thanks, I think I need to contact the author of that version… :)

          Comment by Roy — July 4, 2012 @ 8:37 pm

  29. Thanks!!!!!!!!!!!!!

    Comment by LİLY — June 7, 2012 @ 12:59 am