Factor[e] is now Parallel. Find out more at parallelmade.com

When making anything over and over you tend not to notice repetitive actions. The other day I stepped back from what I do and I noticed a few things. I've used a lot of jQuery plugins. I started looking through some of the ones I use consistently and came up with these three.

jQuery Cycle

Fancy front page slide shows are all the rage right now and jQuery Cycle is my favourite solution. I've tried SerialScroll as well, but I've found over and over that jQuery Cycle is much easier to implement.

First include the files in the head:

Build your photo collection wrapped in a div:

Add some styles:

Then all you have to do is add the specs into your chosen applications javascript file:

This will cycle through each child of #rotating-photos. It is also very easy to add and style previous/next buttons as well as pagination. There are a pile of examples here to help you get started.


jQuery Corner

Have you ever noticed how designers seem to love rounded corners? To do this you used to have to make all kind of images then use some fancy CSS to get it all looking right. And once you get it working in Firefox or Safari you have to do it all over again for Internet Explorer. Good times.

jQuery corner is a cross-browser solution to those woes.

Create your object:

Style your object:

And tell your script to round the corners:

Don't forget to include the files in the head:

You can also do a number of other things to your corners such as "Sharp," "Fray" or "Wicked." There are quite a few possibilities that I don't think I would ever use, but it's always nice to have options.


jQuery Hint

This one is really straight forward. It provides a "hint" in a text field which disappears when the field is in focus.

Include the files in the head:

Add you field, which will obviously be part of a larger form:

Then simply call it up from your javascript file:

That's it! The title you've added becomes the hint in the text field.


Anyone else have any favourites?

Web, Design
Share this post:




Very helpful Plugins List.I have also jquery tutorial and Plugins in jquery13.

Amandeep mann

On August 21 2010 at 6:47 AM
Jamie Allen

@Gregg thanks for the list!

@zoidberg each plugin is linked to from the plugin name before the explanation.

On August 15 2010 at 9:01 AM

why don't you link to homepages of the plugin

On August 13 2010 at 9:37 PM
Ricardo Soares de Lima

Nice tips!
Does anyone know a plugin to create horizontal scrollbars inside a webpage?
I've seen the jquery ui example bu I'm having a hard time trying to adapt it to my code.

On August 13 2010 at 7:59 PM
Gregg Bolinger

Here's my list:


On August 13 2010 at 5:13 PM
Jamie Allen

@jake when i was initially writing this i was thinking of getting into HTML5 and other details/upcoming-ness, but the post was getting really long.. i decided to stick with the basics. thanks!

@dave fancybox was totally in my initial list, but, as i mentioned above, the post was already really long. Also on my initial list was FancyZoom and jQuery tabs.

@sundawg it has previous/next buttons and pagination that you can style any way you like. check out the more advanced samples on the site.

thanks for the comments!!

On August 13 2010 at 1:18 PM

hi does cycle have external control buttons like jcarousel?

On August 13 2010 at 12:50 PM

Can't forget about FancyBox http://fancybox.net/ . I've found it to be the best jquery "lightbox" plugin. I use it in all of my designs.

On August 13 2010 at 12:29 PM

corner is rather unnecessary. non IE browsers' newest version supports rounded corners well.

if pixel perfect design isn't your goal, just stick to multiple border-radius: 10px etc. will be fine.

the hint one is neat, it provides one of the new attributes added in HTML5 to text input. namely, placeholder. so it's a good temporary workaround for that.

cycle plugin is handy. i like it.

nice share.

On August 13 2010 at 12:09 PM
Jamie Allen

@seth good eye. jumping from language to language can sometimes be choppy when you're on a roll.

On August 13 2010 at 9:46 AM

Small note, but you're using JS comments in your CSS.

On August 12 2010 at 7:33 PM

I use jquery corners all the time, it makes everything look very web 2.0 - without all the images.

On August 12 2010 at 7:18 PM

These are very nicly done. I also like Rene's datatables plugin. I use jquery UI for some additional standard apps like calendar and slider.

On August 12 2010 at 5:36 PM

The corners one is outstanding, TY!!!

On August 12 2010 at 3:09 PM
the future

Thanks for these. I think I'll check out the corners plugin straight away.

On August 12 2010 at 2:41 PM
Hardik Shah [Guru]

Awesome stuff !


On August 12 2010 at 2:36 PM
Renê Dettenborn

Nice plugins!
I like jQuery Datatables plugin.
It's nice to table structure, have a search field and nice view. [http://www.datatables.net]

On August 12 2010 at 11:54 AM

Let's Talk

We want to help businesses get where they want to go by developing one awesome website at a time. A customized website that is designed to meet your business’ needs is an integral aspect in achieving your goals and reaching your maximum potential.

factor[e] design initiative
The Empire Times Building
301-41 King William St.
Hamilton, Ontario L8R 1A2
Office hours:
Monday - FrIday: 9:00 am - 5:00 pm
Phone: 905 522 7894
Fax: 905 522 0060
Email: info@factore.ca
Get Directions
Thank you for sending your contact request!