Just another javascript flickr mashup…


Over the last few weeks i’ve moved over all my pictures from my php gallery to flickr, so now I really need to replace my hosted gallery with something better than a link to my flickr account. My solution to this was to create (what I think is) a nice little mashup of flickr hosted based pictures and a javascript visulisation of them. Rather than use one of the many flickr mashup’s out there I decided it was more fun to wrote my own…Simply i’ve taken 36 square thumbnails arranged in a 9×4 grid from flickr and used a combination of prototype, cube (with some modifications), lightbox2 with some javascript glue of my own to bind them together.

What does it do…

Well it’s easier to see it, but every second or two a randomly selected thumbnail in the 9×4 grid will rotate to a new picture from flickr and then this repeats forever. You can also click on any of the thumbnails in the grid to hightlight a picture and eventually i’ll provide a link to where that photo is hosted on flickr, once a figure out a better way to do it than to put the link into the title.

How’s it work…

Well i’m using a php script on my server to get a selection of photo details using phpFlickr; I decided to get 72 photo objects ever time I accessed to script, but on the initial load I display the first 36 onto the page. I used prototype to handle the Ajax request and json parsing, I guess I could I done this without prototype, but I couldn’t be bothered and it would have taken longer and lightbox2 requires it anyway! Then using a javascript image cube animation library I found this will animate a image rotation to a new picture from the remaining 36 pictures. Although I did have to modify the cube library a bit to use absolute positioning and setting some divs to be inline apart from the first thumbnail of the row. Once the page has runout of pictures from the initial server script load a new call is made to that script for another page of 72 picture objects from flickr … and so on … and so on … I also used lightbox2 to load up a larger version of the square thumbnail when you click on the thumbnail.

You didn’t take those pictures…

At the moment I’m just using the interesting pictures from flickr (they look better than mine), but once I fix the odd bug or few I’ll replace my hosted gallery to a nicer version of this mashup using my own pictures. Phew! PS Thanks firebug!

What next?

So I thinking of writing a new website project in Ruby (probably Rails), but I’m stuck on an actual idea. I know what I want to play with:

  • Languages: Ruby on Rails, JavaScript
  • DB: MySQL (as Dreamhost doesn’t have PostGres) 
  • Test frameworks: rSpec, Selenium
  • CI: CruiseControl.rb

At the moment I’m thinking of porting the lovely RoundCube mail project from PHP to Rails, it’s something that uses concepts that i’m fairly familiar with i.e. email protocols and I guess i’ve never been all that happy with any self-hosted web mail client, so I guess it’s time to put up or shut up and build my own. Obviously I want to refresh/update my Ruby and JavaScript skills and it’s associated agile components as well. Also as i’m using rSpec i’ll try and develop the project using BDD, but how i’m going to map business value priorities to a web email client could pose some interesting questions, although mapping behavior in tests might work better with the way I think … I think 😉 It’s not all that exciting, but if anyone has any other suggestions then just add a comment and i’ll consider it?