All About jQuery:40 Fresh and Useful Tutorials and Plugins
Among many JavaScript frameworks, jQuery is the most popular and most widely used because it includes event management, animation and Ajax interactions meant for an improved web development. JavaScript has become a no-brainer even for a beginner just because of the jQuery.
In this roundup, we have collected 40 most handy jQuery complete tutorials and techniques that will help you improving the communication with your customers and prospect clients through web portals.
Sweet Thumbnails Preview Gallery
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
Portfolio Zoom Slider with jQuery
In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.
Making Better Select Elements with jQuery and CSS3
By far the browser controls are one of the most difficult elements to style consistently. This is why we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.
Google Powered Site Search with jQuery
In this tutorial we are using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site.
Merging Image Boxes with jQuery
In this tutorial we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.
Moleskine Notebook with jQuery Booklet
In this tutorial we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog.
Animated Form Switching with jQuery
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
Parallax Slider with jQuery
In this tutorial We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
How to Create a jQuery Confirm Dialog Replacement
In this tutorial we are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
How to Make Auto-Advancing Slideshows
In this short tutorial, we are going to take a look at a jQuery snippet that will help you automate any slideshow on your web site.
Client Testimonials Powered by PHP, XML and jQuery
In this tutorial we are going to build a XML backed testimonial viewer, which, along with jQuery and XSL transformations, can display the set on your product pages.
Coding a Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
Quick Feedback Form w/ PHP and jQuery
In this tutorial we are making a feedback solution. Powered by jQuery, PHP and the PHPMailer class, this form sends the users’ suggestions directly to your mailbox.
Bubbleriffic Image Gallery with jQuery
In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse.
COIN SLIDER: IMAGE SLIDER WITH UNIQUE EFFECTS
In this tutorial we will learn how to create a image slider with unique effects.
Custom Animation Banner with jQuery
How to Build an RSS Reader with jQuery Mobile
In this tutorial, we will dive in, and build a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your web apps!
Display Elements Sequentially with jQuery
In this video quick tip, Jeffrey will teach you how to add a bit of flair to your page, by displaying a set of elements sequentially. While there are numerous ways to accomplish this task, today, we’ll review one technique that uses recursive functions.
jQuery tutorial: fancy FAQs
This tutorial will show you how to use jQuery in order to generate easy-to-read and eye-pleasing FAQs, with a fancy slide down effect. This script will help you enhancing both user experience and accessibility, by making your page tidier and way more structured and compact.
Annotation Overlay Effect with jQuery
In this tutorial we will create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. We got the idea from the wonderful portfolio of www.rareview.com where Flash is used to create the effect. We will use jQuery.
Snippet – jQuery Syntax Highlighter
Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.
Apple-like Retina Effect With jQuery
In this tutorial you will learn how to create Apple-like Retina Effect With jQuery.
Animate Panning Slideshow with jQuery
In this tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
Colourful rating system with CSS3
Here, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.
Smooth animated quote display
Time for yet another jQuery quickie! These relatively simple jQuery tutorials will show you a simple, yet beautiful effect making use of jQuery. This way, you can learn and create something very cool at the same time.
Create Custom PopUp (Modal Window) with jQuery
In this tutorial we will Create Custom PopUp (Modal Window) with jQuery.
Create a Digg-style post sharing tool with jQuery
In this tutorial, we are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.
Create an Attractive Before and After Photo Effect with jQuery
In this tutorial author is going to show you how to build it and how to convert it to plugins. Tested on IE6, 7, 8, Firefox, Chrome and Safari.
CSS3 Rounded Image With jQuery
In this tutorial you will learn how to round the corners of an Image With jQuery
Simple JQuery Image Slide Show with Semi-Transparent Caption
Tabbed Content with Navigation using jQuery UI
This tutorial is on content slide with manual navigation using Tab function of jQuery UI library.
Jquery Tutorial : Toggle Effect on Hover/Click
In this tutorial we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output. Check out the demo before getting into the tutorial.
Simple Tooltip w/ jQuery & CSS
There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip, this tutorial will explain it with detail.
Fresh JQuery Image Gallery with Captions and Auto Play/Pause Rotation
In this tutorial you will learn how to create an awesome jquery gallery which is transparent, fixed on screen, autoplay on/off buttons and css3 stylized gallery. He used simple jQuery functions and make them more clear by commenting the code and making them parametrized.
Slidesjs
Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.
Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial Soh Tanaka would like to go over how to create a sexy drop down menu that can also degrade gracefully.
Create Smooth Rotatable Images with CSS3 and jQuery
How to use CSS3 and jQuery to create images that can be smoothly rotated using the mouse. Full example and code download included.
Jquery Timer Gallery
In this tutorial you will learn how to create Jquery Timer Gallery.
Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL
In this tutorial you will learn how to create a Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL.
reCaptcha style Captcha with JQuery and PHP
This tutorial is about to creating a captcha.
Super Shopping Cart with JQuery. Part II
In this tutorial you will learn how to create a Super Shopping Cart with JQuery.
Related posts:
- 14 Fresh jQuery Plugins Focusing On Image Gallery And Slideshows
- 10 Useful jQuery Wordpress Plugins To Enhance Your Blog
- Amazing Multi Style Menu w/ jQuery and CSS
- Login om te reageren
