95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets
Creating LightBox / Model Windows
We have noted that many lightbox solutions use prototype or mootools framework. If you’re looking for more modal window scripts try looking for some based on these (150 Worth Knowing Web Developer Tools and Techniques)
prettyPhoto a jQuery lightbox clone
jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.
Load Data while Scrolling Page Down with jQuery and PHP
This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.
Building a Lightbox with jQuery
Rather than assume that you know what We mean by a lightbox, I’ll briefly explain it. The first experience We had with this UI pattern, and We believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com
is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background. In fact, if you click any external link on my site, you will get that site loaded for you in an lightboxed iframe.
Coda Popup Bubbles
Demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site. To create the puff popup bubble effect, we need the following:
- Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
- The hidden popup, correctly styled for when we make it appear.
- jQuery to animate the puff effect on mouseover and mouseout.
ThickBox 3.1
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Good examples and descriptions. All code can be downloaded.
Demo | SimpleModal Demos
Purpose is to provide developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.
Lightbox Plus
Wordpress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.
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. Can run alone but also has an adapter for jQuery and other frameworks.
Hover Sub Tags
Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.
Rollovers and tooltips with jQuery
Simple tutorial on how to create jQuery tooltip
jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
FancyBox
FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library. Licensed under the MIT License
Sliding Login Panel built with jQuery
In this tutorial, we will see how to create a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker way.
Sliding Boxes and Captions with jQuery
Great tutorial explaining the fundamental technique of content sliders and how to create port folio style boxes with slider animations.
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
s3Slider
The s3Slider jQuery plugin is made by example of jd’s smooth slide show script. We needed something like that for jQuery (for my web site kruskica.net).
Easy Slider 1.7 – Numeric Navigation jQuery Slider
Really nice content slider with at least 3 modes.
jQuery.ScrollTo
Excellent ScrollTo plugin that lets you scroll with many configuration options to customize the animation and the position specified. Try it out to see how serious this is!
How easy to create a slide tabbed box using jQuery
Simple and easy to so animated top navigated tab-based Content slider
Advanced docking using jQuery
how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC.
Image Handling
BeZoom Lighweight JQuery Zoom Plugin
BeZoom is a simple and lightweight zoom plugin for the wonderful JQuery framework.
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.). This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.
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.
Easiest Tooltip and Image Preview Using jQuery
An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.
jQuery spherical panorama viewer
A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose.
jQuery virtual tour
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.
jQuery Cycle plugin
This is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The effects look very good!
jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
ImgAreaSelect
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.
jQuery Infinite Carousel
This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page