I’ve been a big fan of igoogle for a couple of Years. It’s great to have instant access to so much information without the need to visit numerous pages. I wanted to replicate a much scaled-down version for one of my sites.
I found a great tutorial to create my own igoogle style dashboard. It has quite a lot of features such as drag and drop, edit, delete, expand / collapse. Here’s a preview of the dashboard
After going through the tutorial the dashboard was tailored for the site. The main purpose of the dashboard was to display images from various sources. For one of the widgets I used google ajax search functionality. This was straightforward to plugin with just some slight tweaks to the stylesheet for some of the colours.
In another widget I put in a search facility to drag images from flickr using the json feed. This was accomplished using a jquery flickr plugin. The code was tweaked for search instead of reading from someone’s stream and added the pagination so that more results could be scrolled through.
On top of this I then added litebox so that when one of the flickr photos were clicked a lightbox opened showing a larger version of the photo was shown and the options to scroll through the rest of the result set using the left and right hand side of the image.
This part was slightly tricky to get the litebox to activate on the flickr feed. In the end it was simply knowing that the jquery call to the dashboard was made first then to the jquery flickr plugin. This I found out after some reading of a jquery book I bought (Learning JQuery 1.3
Within the jquery plugin call a call was put in to activate the litebox plugin. The current version of the jquery dashboard can be found on the abracadabra tattoo website were it’s purpose is to give tattoo design inspiration so prospective customers can find plenty of tattoo ideas from the comfort of their screen.
As you can see the possibilities are endless with jquery and there are very good plugins available. All it needs is some tweaking to bring the elements together. As for the dashboard example it’s far from finished. It needs some more feeds and possibly expanding using cookies or a database so that user preferences can be stored for future use.