Feb 18 2010

35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Advertisement

By Angel Wardriver

jQuery can empower a developer with the tools required to create a rich user experience. The way in which we display images, text, charts and graphs can enhance functionality for the wide range of users. Let’s take a look at 35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.

Also consider our previous articles:

jQuery Galleries and Slideshows

GalleryView jQuery Plugin
GalleryView jQuery Plugin is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. It comes with lots of many options for customization. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.

GalleryView jQuery Plugin

Jquery Plugin MopSlider 2.4
MopSlider is the slider box can contain any item that is set height and width. From 2.2, MopSlider can be put 2 in the page. A CSS file isn’t necessary.

Jquery Plugin MopSlider 2.4

jQuery Image Scroller
Making use of jQuery’s excellent animation features, this image scroller will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser compatible and perform as expected in the latest versions of all of the most common browsers. The tutorial helps build in some interaction by adding controls that allow the visitor to change the direction of the animation.

jQuery Image Scroller

Sliding Boxes and Captions with jQuery
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. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Sliding Boxes and Captions with jQuery

Full Screen Image Gallery Using jQuery and Flickr
By using jQuery, this full screen image gallery automatically scales the image while using Flickr as the search engine. It comes with thumbnail preview, preloader, captions, and more. The results are extremely impressive.

Full Screen Image Gallery Using jQuery and Flickr

jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

jCarousel Lite

Galleriffic | A jQuery plugin for rendering fast-performing photo galleries
Galleriffic offers fantastic performance in delivering a high volume of photos. This is a useful jQuery plugin that will render fast photo galleries, while both impressing and improving your user’s experience.

Galleriffic | A jQuery plugin for rendering fast-performing photo galleries

jQuery plugin: Wilq32.RotateImage
This is the final product of a Wilq32.PhotoEffect Snippet. You can use this simple and tiny script to get an effect of rotated images directly from client side, such as user generated content, and then animate them using functions.

 jQuery plugin: Wilq32.RotateImage

jQZoom Evolution
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.

jQZoom Evolution

Resizable Image Grid with jQuery
Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

Resizable Image Grid with jQuery

jQuery plugin: Tooltip
This jQuery plugin tooltip can help you use bodyHandler to display footnotes, an image with a tooltip, or block tooltip. Also is helps links to have no delay with tracking and fading, or with extra content with extra classes. It’s useful for different tooltip styles on a single page like an image map with tooltips and testing repositioning at viewport borders.

 jQuery plugin: Tooltip

Charts and Graphs with jQuery

jqPlot Charts and Graphs for jQuery
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. It’s strongest feature is its pluggability. Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. The plot elements are customizable. The core jqPlot code allows custom event handlers, new plot types, and more.

  jqPlot Charts and Graphs for jQuery

JS Charts – Free JavaScript charts
JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts, or simple line graphs.

JS Charts - Free JavaScript charts

moBlur.org – Google Charts GUI with jQuery
This jQuery is a basic frontend GUI to be used with Google’s charts API.

moBlur.org - Google Charts GUI with jQuery

jQuery Text Effect Plugins

Airport – Information board text effect jQuery plugin
Airport is a rather simple text effect plugin for jQuery. It emulates the style of those flickering information boards you sometime find on airports and train stations.

Airport - Information board text effect jQuery plugin

Editable (jQuery Editable Plugin)
This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and …) to text input, password, textarea, or drop-down list. You can easily extend it by adding your own input type using its editableFactory object.

Editable (jQuery Editable Plugin)

jQuery Plugins
Some of these plugins have been merged into jQuery core in one form or another. These include the ability to batch results into an array, a resolution for IE z-index issues, auto-expand text areas, dynamically create configurable gradient to the background without using images, implement the over label technique, live query and many more helpful plugins.

 jQuery Plugins

Jquery Elastic 1.2 Demo
This page contains a couple of demos of the Jquery plugin Elastic. Elastic makes your textarea change its height dynamically.

Jquery Elastic 1.2 Demo

Stephane Caron – No Margin For Errors ¬ Pretty comments
Here’s a small jQuery plugin that allow textareas to stretch as content is put in. If the content goes over the defined height of the textarea, the textarea will grow as needed.

St+éphane Caron 'À

ToggleVal
ToggleVal gives you the option to populate the default text of form fields in a few different ways. It will then toggle the default value when the field receives and loses keyboard focus.

ToggleVal :: jQuery Plugins by Aaron Kuzemchak

jQuery sIFR Plugin
The jQuery sIFR plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR) using the internal jQuery API.

jQuery sIFR Plugin

jQuery Spoilers Plugin
Spoilers is a jQuery plugin which implements a feature first seen on the imdb.com web site. The pages using this plugin to show “Spoilers!” text, but when you mouse over that text, "Spoilers” disappear and the underlying text is revealed. The intention is to keep the casual reader from inadvertently reading details which he might not want to know. By mousing over them, he can reveal the details.

jQuery Spoilers Plugin

jTruncate – Text Truncation for jQuery
jTruncate allows you to customize nearly every aspect of the truncation operation. It provides simple yet customizable truncation for text entities in your web page.

jTruncate - Text Truncation for jQuery

Further jQuery Resources

List of Useful jQuery Plugins: jQuery, JavaScript
This is a huge masterlist from the jQuery plugins in the jQuery plugins repository. These are some of the best and most practical. The truly exceptional plugins are marked with “EXCELLENT.”

List of Useful jQuery Plugins: jQuery, JavaScript

Lazy – The on-demand jQuery plugin loader
This jQuery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all jQuery-plugins, that you might or might not need, Lazy downloads the plugins when you actually use them. The major difference between Lazy and it’s competitors is it’s size.

Lazy - The on-demand jQuery plugin loader

jQuery Callout Plugin
This jQuery Callout Plugin is based entirely on CSS, so no images are required like in the static text below. The rounded corners come courtesy of the excellent jQuery Rounded Corners plugin.

jQuery Callout Plugin

Guapo – jQuery copy plugin
We all know that in IE we can easily copy text to clipboard. It is, however, not such an easy in FX. This plugin uses a SWF file to achieve this; the SWF file’s default location is the same to the plugin. If you move it to another location, it changes in the plugin source code.

Guapo - jQuery copy plugin

Moousture
Moosture is a mouse gesture library written solely in javascript with power and flexibility. Implemented on Mootools following the Object Oriented standards, the library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.

Moousture

Gritter for jQuery (Growl) (Demo)
A jQuery Growl look-a-like plugin, a notification bubble/popup that appears in the top right of your layout. Think of it as calling the alert() function in JavaScript, only it’s subtle and looks nice.

Gritter for jQuery (Growl)

jGrowl – Unobtrusive Notification System for jQuery
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. It has the ability to create multiple container instances, allowing a developer to raise and create various notifications in various location on the user’s screen.

  jGrowl - Unobtrusive Notification System for jQuery

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to see them easily. An even better idea is using the favicon.ico of the external site, if it is available of course.

 Add a favicon near external links with jQuery

Oursignal.com used jQuery plugins
OurSignal is a awesome visualization that displays the popular stories from Digg, Delicious, Reddit, Yahoo! Buzz and Hacker News in single page. Developed by Stateless Systems, it is nicely implemented with jQuery Plugins.

Oursignal.com used jQuery plugins

UI.Layout Plug-in
This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

UI.Layout Plug-in

About the Author

Comments and Discussions
  • Michal Kozak, 18 February 2010

    Sweet roundup :).

    Actually found two slideshows I didn’t know about before. Thanks.

  • New York Web Designer, 18 February 2010

    Superb… Very useful… Thanks for sharing..

    • LightNoise, 18 February 2010

      Superb…is your smile

      • NonCreep, 21 February 2010

        How creepy dude. Go find a real girl to say that to.

      • NotFooled, 22 February 2010

        The pic of the pretty girl is just to get you to click on the web design company’s link.

      • Ricardo, 08 March 2010

        Yes, this “girl” is commenting on many blogs always with unuseful comments just to put that link. Really annoying.

        And from time to time, they change the pic. But it is always a pic of a pretty girl so it can make the people click on the link. It is a sad technique to get hits…

    • Cleber, 03 May 2010

      you are so beautiful

  • Can Aydo?an, 18 February 2010

    Nice collection. Thanks!

  • Thomas Craig Consulting, 18 February 2010

    Thanks for the post, seems to be a lot of posts regarding sliders as of late, do you have any plans for a post on the cu3er image rotation effect, which is starting to pop up on some designs?

  • Arthur Brown, 18 February 2010

    This is a great list of JQuery Plugins.

  • Maicon, 18 February 2010

    Great collection. Special attention to slideshows.

  • bract.us, 18 February 2010

    Very nice list.
    Any of them are using version 1.4?

  • temp-, 18 February 2010

    Very very useful links.

    I have one question though, there is any way to truncate and also close html tags? Supposing you have a db query with html tags in it.

  • Theo, 18 February 2010

    Great roundup, very useful !

    Thanks for sharing

  • Bill Jones, 18 February 2010

    Wow that is like way cool I like it.

    RT

  • Gary Lau, 18 February 2010

    Hi,

    Just letting you know you have an extra “/” at the end of the link for the Create Beautiful jQuery slider.

    Should be:
    http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

    G

  • Nick N., 18 February 2010

    Great article, thank you.

    Just wanted to point out that the link on the title “Create Beautiful jQuery sliders tutorial” has an extra trailing slash. The image URL is fine though.

  • Kunal, 18 February 2010

    That’s beautiful. Didn’t know about jQuery until this article. Heading now over to Wikipedia to learn about jQuery. You guys made my weekend much more interesting haha.

  • Andreas L, 18 February 2010

    Nice list. Looking at the code for the favicon plug-in, though, it seems it’s pretty much a copy of mine. Even variable names are exactly the same. Perhaps it’s a coincidence but I doubt it.

  • Frank, 18 February 2010

    Thanks for collecting all the useful stuff.

  • Chad, 18 February 2010

    Very nice… always like reading jQuery plugin lists. ;D

  • Ahmed El.Hussaini, 19 February 2010

    Nice collection, many thanks.

  • Recep Yildiz, 19 February 2010

    thank you very much :)

  • tinadsgn, 19 February 2010

    The Full Screen Image Gallery Using jQuery and Flickr is awsome!
    Great article!

  • Jordan Walker, 19 February 2010

    That is a nice round up of plugins. I will be sure to remember them.

  • bored, 19 February 2010

    again? really?

  • Mia, 19 February 2010

    Great roundup :) thanx for your effort in putting this article together -however , you should check your JQuery Callout Plugin , the link is broken :(

  • Konstantin, 20 February 2010

    Awesome roundup!! Thanks for sharing!

  • AlchemyCode, 21 February 2010

    Great article. I’m using jQuery for 2 years now and I’m always glad when article like this pops out :)

  • Designs Wallet, 22 February 2010

    nice stuff

  • Tutorials Palace, 22 February 2010

    Great roundup

  • Ian Devlin, 22 February 2010

    What a wonderful collection of plugins. Very useful indeed. Many thanks for this, an instant bookmark!

  • satish, 22 February 2010

    nice collection really really exact which i looking for
    thanks for sharing
    cheers

  • Görsel, 23 February 2010

    Great article, thank you.

  • ick, 24 February 2010

    Wow… Thx!!! The Rotateimage Effect is so hot! :)

  • khalid olaqy, 26 February 2010

    Great collection , I need it .

  • Bruce, 01 March 2010

    Great post with some really awesome plugins. Love the charts and graphs – just what I need for an upcoming project!

  • abhishek, 02 March 2010

    its a nice collection

  • Deepak kaletha, 06 March 2010

    Thanks for collecting all the useful and nice stuff.

  • Shevaa, 07 March 2010

    Very Helpful article in correct time… Thx

  • nev, 15 March 2010

    very useful thank you!!!!!!!!!!!!!!!!!!!!!!!!!

  • Issa Qandil, 20 March 2010

    Really amazing list, thanks for sharing this :)

  • Jeremy Buff, 21 March 2010

    Great list! I really like the 5th slider. It’s the most unique. :)

  • swapnil, 30 March 2010

    very nice post, thank you.

  • Online RSA, 20 April 2010

    Thanks, I was looking for a jQuery graph library. Was going to use flot, but I think jqPlot that you have recommended is probably just as feature packed (if not more so) and is being more actively developed.

  • building, 22 April 2010

    Great work. Thanks!

  • Mark, 05 May 2010

    This one is amazing too. check the awesome page. that’s the power of jquery

    http://preprocess.me/codes/cloud/index.html

  • Denker, 07 May 2010

    Great article, Thanks.

  • wynajem, 27 June 2010

    Thanks for this great tutorial. Really simple and the final outcome is superb!

  • nikhil, 22 August 2010

    Gr8 collection, like it, thanks for sharing it.

  • slovn, 26 September 2010

    nice stuff, +++

  • Pretty Girl Rock Video, 11 October 2010

    Keri finally dropped an excellent song after the horrible Breaking Point. Pretty Girl Rock is my jam right now and I hope that Keri Hilson has a successful album era this round!

  • ku?ni ljubimci, 23 March 2011

    It looks so amazing. I must do it on some design websites. :)

    Thank you for sharing!

  • Blueprint RSA, 26 May 2011

    Thank you for this very informational blog. I’m not much of a techie myself,but because of you I get to enjoy the web trends and explore other sides of the web. Please continue sharing your thoughts and researches because your effort is very much appreciated. kudos!

  • ANZA, 04 August 2011

    Nice Article ..
    Thank you ……

  • jayendra, 24 January 2012

    Great Collection. Thanks to share this.

  • Diablo, 29 January 2012

    Really great Plugins – thanks alot for sharing them. I´ll try some of them in my blog.

  • rabiei, 04 February 2012

    thank you very much for sharing this Plugins with us.

  • Jeff, 29 March 2012

    Thanks for sharing mate. I will try to use some of those plugins to improve the UI of my website

  • Arjun Rk, 30 April 2012

    Thanks, thats so cool. i like it very much. :)

  • Sebastian, 06 May 2012

    Nice List! Thank you very much!

  • pelangsing, 15 January 2013

    exellence, i will try now. thank 4 plugin

search form
 
image description image description