Posts Tagged ‘Fancy’

A Fancy Image Gallery using jQuery

April 20th, 2010

CLICK HERE TO CHECK IT OUT !!!

Last week I thought of making a image gallery using jQuery (again not to mention I am one of jQuery’s fan). There were already so many nice image gallerias available online. People have almost used all the jQuery effects to create different gallerias. So, I was searching to create something unique as its no fun to create what is already made.

Image Gallery

ScreenShot of Image Gallery

 

Recently while browsering Cue Blocks Website (http://www.cueblocks.com/), I came across office gallery made in Flash which caught my eye. As it was built in Flash, the image were tilted at random angles, the images spreads on load, you can drag them anywhere inside gallery area and you can preview image by double clicking on it. Never seen such type of gallery built through jQuery. I imagined all these features can be implemented by jQuery (except for tilted images, for which there were no plugins available).

I found many of these effects can be implemented through jQuery UI or plugins. I built the logic in jQuery to spread the images randomly over gallery area. Used jQuery UI drag.js to make image thumbnail draggable. Easing plugin to give cool effects while spreading and showing preview. Then I thought of adding some auto animation in spreading images after some fixed interval of time. For which I used timer.js (jQuery plugin).

Result of all above is this image gallery. I am posting this on my blog so that you all can provide me your feedback and suggestions on it. I am planning to build a jQuery plugin for this, so all your ideas will be very helpful to me and hence welcomed.

Also, write to me if you want this gallery on your site.