20+ jQuery Interface and Tutorials

Written by Robert on August 29, 2011 in Ajax & Jquery, tutorial - 7 Comments

In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Whether you’re looking for a particular interface/interaction pattern built on Query (like module tabs or modal windows) or you simply want to learn the library by engaging in step-by-step tutorials – you should be able to find something here for you.

 Photo Slider Tutorial

This tutorial shows you how easy it is to implement the Photo Slider JS library to create a stunning but user-friendly sliding photo gallery.

• Live Demo

 Creating a “Filterable” Portfolio with jQuery

In this jQuery tutorial, you’ll discover a method for creating a gallery of images that can be filtered by categories.

• Live Demo

Building modal panels with jQuery

This jQuery tutorial discusses a method for creating a modal window that builds in graceful degradation in its design for users who don’t have JavaScript turned on.

Live Demo

Tool Tips

 Build a Better Tooltip with jQuery Awesomeness

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

Live Demo

 Smart Tooltips with jQuery

This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.

Live Demo

 Coda Popup Bubbles

This excellent jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.

Live Demo

 Create a Slide Tabbed Box using jQuery

This simple tutorial will show you how to create a set a module tab interface that slides content left and right as you click on the tabs.

Live Demo

 Create a Tabbed Interface Using jQuery

This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.

Live Demo

Create Sliding Image Caption with jQuery

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

Live Demo

 Image Cross Fade Transition

This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.

Live Demo

 A Basic Image Gallery – The jQuery Way

Create a basic image gallery by leveraging the strengths of jQuery in traversing the DOM and in DOM manipulation.

Live Demo

 Image Reveal using jQuery

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).

Live Demo

 Inline Image Enlargement with jQuery

This jQuery tutorial shows you a slick and animated method for enlarging thumbnail-sized photos when the user hovers on them.

Live Demo

 Slider Gallery

In this jQuery tutorial, you’ll learn how to create a sliding gallery that leans on jQuery UI to make dealing with theming the web component a breeze.

Live Demo

 Simple jQuery Image Slide Show with Semi-Transparent Caption

In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.

Live Demo

BBC Radio 1 Zoom Tabs

This screencast tutorial shows you how to zoom in and out of an image and reveal a module tab interface when the user hovers of it. The tutorial was inspired the BBC Radio 1 site which shows a similar effect.

Live Demo

How to create a stunning and smooth popup using jQuery

In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.

Live Demo

 Simple jQuery Modal Window Tutorial

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.

Live Demo

 jQuery Tabbed Interface

This excellent tutorial is yet another variation to the popular tabbed interface.

Live Demo

 jQuery Tabs

This tutorial is in screencast format and is aimed at beginners and designers.

Live Demo

Related posts: