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.

Fading

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

$(aPhoto).fadeIn("fast");

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.

Cheers

Related Links

1. jQuery – Awesome java script framework

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

Advertisements

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