Flash ? Nah – jQuery will do Just Fine

I just added some extra animation for my image gallery.

I added some custom easing and fading. I have to admit you can do heaps of neat stuff with jQuery. I never thought that all this can be done with a simple jQuery script.

Sliding Photos

The photos will now fan out when people click on the ‘circular arrow’ button or hover their mouse near the photo. This is done by a simple jQuery script

$(aPhoto).animate({left:'left coordinate', top: 'top coordinate'} {duration: 'duration in millisecond ',easing: 'easing type,complete:function(){$(this).animate({left: params.left, top: params.top});

The animate function accept some parameters:

1st Parameter: allow us to specify css attribute that we want to animate. In my case I want to move my images to the top left corner of the page. So I supply the top and left coordinate that I want my photo to go to. You may notice that the first parameter is specified inside a curly brace  {left:’left coordinate’, top: ‘top coordinate’}. This means that the first parameter is an object that can have as many attribute as you want, as long as they are valid CSS attribute. The curly brace {} means that we need to pass those attribute as an object. {} means that we are creating an object in Java Script.

2nd Parameter: I pass is some attributes as within an object to let jQuery know that I want to the animation to last for a number of millisecond,with a certain type of easing. There are some different easing for jQuery.


The fading effect is done calling the fading method of jQuery.


There heaps of things that we can do with jQuery. It promises almost unlimited potential
to create a dynamic web page. I have tested my image gallery in firefox 3.5.7 in Ubuntu Linux and Windows XP under 1280 x 800 and 1440 x 900 screen resolution. I hope to further improve the gallery and make sure that it is compatible with other browsers.

So what do you think about jQuery ? Do you guys find any glitch in the animation ? Do let me know I am trying to improve the image gallery as best as I can.


Related Links

1. jQuery – Awesome java script framework

2.nu-Light box – my own experimental image gallery


About zainul franciscus

Hi, I am a software developer and tech blogger who is currently living in Wellington, New Zealand. I write stuff that I find interesting on
This entry was posted in nu-lightbox, programming, web development and tagged , . Bookmark the permalink.

4 Responses to Flash ? Nah – jQuery will do Just Fine

  1. Noas says:

    So what, you still don’t have any tools for deisgners to make animation in JS+Canvas/SVG. Animations are often made by artists not developers.

  2. Andrea says:

    You still need Flash if you want your animation to be fast and slick even in older PCs

  3. Elena says:

    It’s really interesting article. Thanks for good information.

  4. SM says:

    >You still need Flash if you want your animation to be fast and slick even in older PCs

    Yes, sometimes you come to the site, where there is a flash banner, and all hang tight.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s