Archive for the ‘jQuery’ Category

Amazing Multi Style Menu w/ jQuery and CSS


jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

In this post I’ve selected 14 jQuery navigation menu tutorials that you can learn from them how to impalement your own jQuery based navigation and have some great effects.

Make a Smooth Animated Menu with jQuery

Download – Demo

Animated Menus Using jQuery

Download – Demo

Tutorial: How to Create Your Own “kwicks”Effect with jQuery

Visit Tutorial – Demo

Tutorial: Create a Cool Animated Navigation with CSS and jQuery

Visit Tutorial – Demo

Playing with jQuery Color Plugin and Color Animation

Download – Demo

Create a Realistic Hover Effect with jQuery

Visit Tutorial – Demo

Tutorial: How to Load and Animate Content with jQuery

Visit Tutorial – Demo

Tutorial: How to Create an apple style menu and improve it via jQuery

Visit Tutorial – Demo

Sexy Drop Down Menu w/ CSS & jQuery

Visit Tutorial – Demo

Rollovers and tooltips with jQuery

Visit Tutorial – Demo

Tutorial: How easy to create a slide tabbed box using jQuery

Visit Tutorial – Demo

Animated tabbed content with jQuery

Visit Tutorial – Demo

Sliding Top Menu With jQuery

Visit Tutorial – Demo

Tutorial: Fading Menu & Content Replacing with jQuery


90+ Useful jQuery Plugins for Designers and Developers


jQuery can help designers and developers create impressive animations and interactive websites that are appealing and accessible to the widest range of browsers.

Here are 90+ useful jQuery plguins focusing on gallery and slideshows, navigations and further resources to reduce time and effort while increasing your audience.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter


Stylesheet and text size switcher.


Accordion interface with a few variations.


Prevent users from inputing special characters.

Ajax File Upload

Loading graphic displays while file is uploaded.


Write HTML with JavaScript, great for displaying Ajax results.


Converts text into post friendly html.


Create a message overlay while blocking user interaction on elements or the entire page.


View text through a ‘file menu’ interface.


Basic tabbed interface.


Demo highlights selected table rows in groups of tables..

Aids date entry.

Checkbox manipulation
Select, unselect and toggle checkboxes.


Syntax highlighting for displaying code on webpages.

Choose Component
Select data from a table row through a modal window.

Click Menu
Generates dropdown menus.

Tooltips with many variations.

Color Animations
Add color animations to div backgrounds.

Color Picker
Pass in color choices and attach custom events to each color block.

Highlight table rows and columns.

Add, remove and toggle table columns.

– Menus that show when you right click specified elements.

Adds a listener to check if user confirms their action.


Add flash-like image effects to rotating image galleries.

date picker
Aids date entry.

Read delicious bookmarks from a user to display on a webpage.

Get accurate window and document attributes across browsers.

Equalize Columns
Make columns the same height as the longest column.

FCKEditor Plugin
Adds a rich text editor to a textarea.

Expand the ability to retrieve and set values in forms.


Change HTML forms to submit via Ajax.

Gallery Viewer
JavaScript image gallery.

Function to get url parameters.

Google Feed Plugin
Display any RSS feed to a webpage.

Adds a gradient to a div without needing an image.

Grid Column Sizing
Table column draggable resizing.

Grid Row Sizing
Expand and collapse table rows.

Prevents unintended hover events.

Add tabbed interface to a website.

Create modal windows and messages.

jQuery Localisation
Applies localisation packages based on the user’s language preference.

UI dialog widget.

Aids selecting of dates inline on a page.

jCarousel Lite
Simple carousel for images and HTML content.

Syntax highlighting for displaying code on webpages.

jdMenu Hierarchical Menu
Generates dropdown menus.

Live editing of elements on a webpage.

XML feed parser.

Replaces big images with a zoom viewer in HTML.

Drag’n’Resize elements on a page.

Interact with Google maps.

Display notices, dialogs, and modal windows in a web browser.

Make a tree view out of an HTML table.

Tree View

Tree view controls.

Add autocomplete to input fields.

Form validation library.

Provides a status bar for uploading images.

Customize your scrollbars.


Turn a textarea into a tag editor.

Create a control panel to manipulate elements on a page.

Keyboard Navigation
Dynamically determine which element to focus on based on it’s position on the screen.

Overlay labels over an input field.

Navigation menu with a ‘lava’ effect.

Lazy Load
Only load images that are in the current window.

Live Query
Adds event listeners to elements.

Masked Input
Add mask to inputs to aid user data entry (phone numbers, etc).


Unobtrusive conversion of standard markup into rich media content.

Extra selectors for JQuery
Add more selectors to jQuery.

Mousewheel event handler.

Mousehold Event
Add repeating event as the user holds down the mouse.

Multiple File Upload
Select multiple files one by one as it adds to a queue list.

Create a fading news ticker.

Password Strength Meter
Indicator to show the strength of a users password.

Creates an preview popup of destination link.

Query String Object
Useful for sending URL parameters.

Select box manipulation
Remove and add options from a select list or dropdown in many ways.

Tool for making dependant dropdowns with Ajax.

Star Rating
Generates star rating from input fields

Dynamic ajax grid control.

Image gallery as slides.

Hide content behind an image until user action is taken.

Row and column highlighting with variations.

Search box is added to each column header to filter table.

Client side table sorting.


Easily make multiple DOM updates using the results of a single AJAX call.

Add gradients to whole blocks of text.

Time Entry
Sets an input field up to accept a time value.

Add tooltips from title page.


Add live validation to forms.


Web-based XHTML WYSIWYM editor.

Zoomable thumbnails.

Transform XML/XSL from JavaScript.

Ajax library.

14 Fresh jQuery Plugins Focusing On Image Gallery And Slideshows

Sliding Image Gallery jQuery Plug-in

PrettyPhoto jQuery Lightbox Clone

The Lightbox Clones Matrix

Full screen image gallery using jQuery and Flickr

Moving Boxes

Start/Stop Slider

Pirobox V.1.2.1

jQuery spherical panorama viewer

Zoomimage – jQuery plugin

jQuery Panel Gallery Plugin

jQuery Image Overlay Plugin


CrossSlide jQuery plugin


10 Incredible JQuery Navigation Menus

Animated Drop Down menu with JQuery

A DropDrown menu is often a good choice when you have many items to display. In such cases, what about animating it?


iPod style menu

The iPhone is indeed a very good example of minimalistic, but great looking, design. This article will teach you how you can easily achieve the same effect on any website, using the power of JQuery.


Superfish – jQuery menu plugin

Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.


Lavalamp for JQuery lovers

Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement.


How to make a smooth animated menu with JQuery

A very nice tutorial to learn to create a very nice and artistic effect for your websites.


Navigation effect using JQuery

Another “Great to read, Simple to implement” JQuery tutorial. Its purpose is to teach you recreating MooTools homepage menu…using JQuery!


Animated JQuery menu

Among other things, JQuery is very useful for an easy manipulation of the CSS background-positionproperty. This tutorial is a perfect example to illustrate that possibility.
Althought this menu is not, in my opinion, the best looking of this article, it has always be a client’s favorite.


How to create a vertical sliding JQuery menu

Like the dropdown menu that you can see at the top of most Envato sites? If yes, this tutorial will allow you to learn how to create a similar kind of menu. Your clients will love it, there’s no doubt about it. And even better, the tutorial will also teach you how to design that kind of menu using Photoshop.


Apple menu, improved

Who doesn’t like the look and feel of the Apple website? One year ago, we released a nice tutorial to help you recreating Apple’s website menu.
This new tutorial, provided by, will teach you how to recreate Apple’s menu, and even better, how to enhance it it using JQuery.


Using jQuery for Background Image Animations

I already talked about how great JQuery is for animating background using the background-positionCSS property. This article is very great to improve your skills in that domain.


Animated Background Image With JQuery

Getting ready

In this tutorial, we are going to create a simple layout for a website, which includes a very cool animated background. Here is how the final result will look:

37 Fresh jQuery Image And Gallery Display Solutions

Query is already very popular because it is very fast and concise Javacript library simplifing and different event handling, smooth animation with very little code. With jQuery you can enjoy new way of web development and image galleries are the best way to use it effectively! Here you’ll have more than 35 different unique jQuery Javascript solutions for beautiful image galleries and great ways to display your images with light code.

To make it even easier for you to choose, I also added live demo link under every jQuery plugin! However if you are searching for even more alternatives with Flash, plain CSS or another Javascript library, check out this post –57+ Free Image Gallery, Slideshow And Lightbox Solutions.

1. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.


View Demo

2. GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.


View Demo

3. Sliding Image Gallery jQuery Plug-in

The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).


View Demo

4. PrettyPhoto jQuery Lightbox Clone

PrettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.


View Demo

5. Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.


View Demo

6. AD Gallery – a jQuery gallery plugin

A highly customizable gallery/showcase plugin for jQuery.


View Demo

7. FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.


View Demo

8. Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.


View Demo

9. Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.


View Demo

10. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3.


View Demo

11. The Lightbox Clones Matrix

Comparison of various scripts that display images and other objects in somehow cool CSS popups


12. Full screen image gallery using jQuery and Flickr

It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It also supports a flickr search engine, thumbnails, captions, preloader and some other goodies.


View Demo

13. Moving Boxes


View Demo

14. Creating a Slick Auto-Playing Featured Content Slider


View Demo

15. Start/Stop Slider


View Demo

16. SlideViewerPro 1.0

SlideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.


View Demo

17. Pirobox V.1.2.1


View Demo

18. s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.


View Demo

19. CSS and Jquery – Creating an Image Slider


View Demo

20. Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.


View Demo

21. jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.


View Demo

22. Zoomimage – jQuery plugin

Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.


View Demo

23. Building a jQuery Image Scroller


View Demo

24. Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content


View Demo

25. jQuery Panel Gallery Plugin

No slicing or editing of the images is needed
It’s just 5K
Easily configurable
Reusable on multiple containers

No slicing or editing of the images is neededIt’s just 5KEasily configurableReusable on multiple containers


View Demo

26. Supersized – Full Screen Background/Slideshow jQuery Plugin


View Demo

27. Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.


View Demo

28. jQuery Image Overlay Plugin

The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover, as you can see above.


View Demo

29. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Highly configurable

Customizable with CSS styling

Handles scaled images

Keyboard support for moving and resizing the selection

Supports callback functions

Provides API functions for easier integration with other application components

Lightweight — the packed version is less than 8KB


View Demo

30. PFeloader

This is a preloader, it scans DOM and loaded StyleSheet’s for occurence of images (in sheet, style, as element).

StyleSheet file has to be in the same domain as page using it.


View Demo

31. Image Reveal using jQuery


View Demo

32. The jQuery Cycle Plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.


View Demo

33. Galleria Plugin

This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.


View Demo

34. CrossSlide jQuery plugin

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.)


View Demo

35. Fancy Thumbnail Hover Effect w/ jQuery


View Demo

36. Apple-like Slideshow Gallery


View Demo

37. JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.


View Demo


55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

Getting Started

1.7 reasons why you really should learn jQuery


2. jQuery Crash Course

Introduction to Jquery, further reading and basics.


Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!


4. 10 jQuery Tutorials for Designers by WebDesignerWall

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.


5.4 Jquery Easy Tips And Tricks Tutorial


6.jQuery Essentials Presentation at MinneWebCon (102 pages)

Very well written jquery essentials presentation. Really worth the time.


7.12 Useful and Handy jQuery Tips and Tricks


8.Improve your jQuery – 25 excellent tips

Great tips, even some intermediate users could now know few of these.


9.Build An Incredible Login Form With jQuery

In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.



10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast


11.Building a jQuery-Powered Tag-Cloud


12.WordPress Sidebar Turned Apple-Flashy Using jQuery UI

This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.



13.How to Load In and Animate Content with jQuery



14.Create a Slick Tabbed Content Area using CSS & jQuery



15.Styling Buttons and Toolbars with the jQuery UI CSS Framework

Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.



16.jQuery Slideshows With the Cycle Plugin

The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.



17. InnerFade with JQuery

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.



18.Creating a Dynamic Poll with jQuery and PHP



19.Setting Equal Heights with jQuery



20.jQuery Tools: Scrollable

Scroll your HTML with eye candy



21.jQuery Tools: Tooltips



22.jQuery Tools: Overlay

Yet another, beautiful image displaying way – similar to popular Lightbox, but this one seems to be more elegant.



23.jQuery Tools: Expose

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.



24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast



25.Create an Amazon Books Widget with jQuery and XML



26.Creating a “Filterable” Portfolio with jQuery

This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.



27. jQuery Hover Sub Tag Cloud



28. How To Build Quick and Simple AJAX Forms with JSON Responses



29. Simple jQuery Spy Effect

jQuery Spy Effect scrolls the list in a beautiful way.



30. Slider Gallery Tutorial: Screencast

A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.



31. Semantic Blockquotes with jQuery

Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.


32. Jcrop – the jQuery Image Cropping Plugin



33. Horizontal Scrolling Menu made with CSS and jQuery



34. jQuery Sequential List Tutorial

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.



35. How easy to create a slide tabbed box using jQuery



36. How to Mimic the iGoogle Interface

This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!



37. jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.


38. Creating accessible charts using canvas and jQuery



39. jQuery and Google Maps Tutorial

This tutorial will walk you through how to get started using jQuery inside the Google Maps environment.



40. How To Create An Amazing jQuery Style Switcher

his tutorial will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.



41. How-To: Reddit-style Voting With PHP, MySQL And jQuery

This tutorial will show you how to create a voting system similar to Reddit with jQuery, PHP and MySQL.



42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

This tutorial will explain how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.


Further Reading, Advanced Tips and Tutorial Sites

43.Official Jquery Tutorial Directory

As first add is obvious, but on their official website you can find many tutorials related to mastering Your Jquery skills even in several different languages.



Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. They have tutorials for all skill levels, and each entry is categorized by level of difficulty.


45.15 Days Of jQuery

Examples and tutorials to help you learn JQuery – it hasn’t been updated for a while, but still a lot of useful articles you’ll find there.


46.jQuery for Designers

Learn how easy it is to apply web interaction using jQuery – beautiful tutorials and website, if you still can’t find what you need, you can even request a tutorial.


47.Ultimate Jquery List

jQuery Ajax tutorials to jQuery UI examples, you’ve found the ultimate list of tutorials and plugins for jQuery! Everything from Ajax file uploaders to RSS feed plugins, all on one of the longest pages you’ll ever scroll.


48. Bassistance

This blog is about programming (with focus on web applications and JavaScript), musicand other stuff the author happens to write about. It’s also the home of several jQuery plugins.


49. Remi Sharp’s Blog

Site with several good tips and articles related to jquery, also the same man behind useful tutorial site – jQueryForDesigners I showcased above.


Online jQuery Cheat Sheets

50.VisualJquery 1.2.6

An online cheat sheet and visual reference to Jquery, where you can find Jquery functions well explained, updated to jQuery 1.2.6. version. While playing with Jquery, this website seems to be a very useful place to visit.


51.jQuery 1.2 cheatsheet wallpaper

The size of wallpaper is 1280×960, two color variations.


52.jQuery 1.2 Cheat Sheet (*pdf file)


53. ColorCharge Jquery CheatSheet