35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

February 18th, 2010

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 – Google Charts GUI with jQuery
This jQuery is a basic frontend GUI to be used with Google’s charts API. - 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 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 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

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.


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

Tags: ,

66 comments for „35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects
  1. Michal Kozak on February 18th, 2010 at 5:08 am

    Sweet roundup :).

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

    • designfreek on February 19th, 2010 at 1:02 am

      Even i wasn’t aware of that.. Jquery can really produce magic.. While stumbling around i found plugin of jquery.. I love this!

    • Figus on May 17th, 2010 at 5:40 pm

      There is always something to discover. Best things are commercial though: ajax zoom gallery rocks! It zoomifies slides of any size and resolution. Here is a link: and the examples

    • 3Dom on May 8th, 2011 at 12:03 pm

      Agreed Michael, Agreed

      Good research, good commenting platform, love it.

      @Michael, if you were looking for slideshows, here’s another one for your reference. Nice and customisable (hope this isn’t seen as link dropping, but here goes..)

  2. New York Web Designer on February 18th, 2010 at 6:40 am

    Superb… Very useful… Thanks for sharing..

    • LightNoise on February 18th, 2010 at 7:12 am

      Superb…is your smile

      • NonCreep on February 21st, 2010 at 12:44 pm

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

      • NotFooled on February 22nd, 2010 at 10:30 am

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

      • Ricardo on March 8th, 2010 at 3:51 am

        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 on May 3rd, 2010 at 7:46 pm

      you are so beautiful

  3. Can Aydo?an on February 18th, 2010 at 6:59 am

    Nice collection. Thanks!

  4. Thomas Craig Consulting on February 18th, 2010 at 11:28 am

    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?

  5. Arthur Brown on February 18th, 2010 at 11:44 am

    This is a great list of JQuery Plugins.

  6. Maicon on February 18th, 2010 at 1:39 pm

    Great collection. Special attention to slideshows.

  7. on February 18th, 2010 at 2:13 pm

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

  8. temp- on February 18th, 2010 at 2:19 pm

    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.

  9. Theo on February 18th, 2010 at 2:58 pm

    Great roundup, very useful !

    Thanks for sharing

  10. Bill Jones on February 18th, 2010 at 4:00 pm

    Wow that is like way cool I like it.


  11. Gary Lau on February 18th, 2010 at 4:03 pm


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

    Should be:


  12. Nick N. on February 18th, 2010 at 5:33 pm

    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.

  13. Kunal on February 18th, 2010 at 7:47 pm

    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.

  14. Andreas L on February 18th, 2010 at 8:54 pm

    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.

  15. Frank on February 18th, 2010 at 10:57 pm

    Thanks for collecting all the useful stuff.

  16. Chad on February 18th, 2010 at 11:44 pm

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

  17. Ahmed El.Hussaini on February 19th, 2010 at 12:34 am

    Nice collection, many thanks.

  18. Recep Yildiz on February 19th, 2010 at 12:38 am

    thank you very much :)

  19. tinadsgn on February 19th, 2010 at 1:45 am

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

  20. Jordan Walker on February 19th, 2010 at 6:37 am

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

  21. bored on February 19th, 2010 at 2:21 pm

    again? really?

  22. Mia on February 19th, 2010 at 7:10 pm

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

  23. Konstantin on February 20th, 2010 at 6:29 am

    Awesome roundup!! Thanks for sharing!

  24. AlchemyCode on February 21st, 2010 at 10:31 pm

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

  25. Designs Wallet on February 22nd, 2010 at 2:19 am

    nice stuff

  26. Tutorials Palace on February 22nd, 2010 at 2:41 am

    Great roundup

  27. Ian Devlin on February 22nd, 2010 at 12:32 pm

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

  28. satish on February 22nd, 2010 at 9:24 pm

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

  29. Görsel on February 23rd, 2010 at 5:14 am

    Great article, thank you.

  30. ick on February 24th, 2010 at 1:46 pm

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

  31. khalid olaqy on February 26th, 2010 at 12:31 pm

    Great collection , I need it .

  32. Bruce on March 1st, 2010 at 11:22 pm

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

  33. abhishek on March 2nd, 2010 at 11:22 am

    its a nice collection

  34. Deepak kaletha on March 6th, 2010 at 4:30 am

    Thanks for collecting all the useful and nice stuff.

  35. Shevaa on March 7th, 2010 at 9:38 pm

    Very Helpful article in correct time… Thx

  36. nev on March 15th, 2010 at 9:39 am

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

  37. Issa Qandil on March 20th, 2010 at 3:25 am

    Really amazing list, thanks for sharing this :)

  38. Jeremy Buff on March 21st, 2010 at 9:59 pm

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

  39. swapnil on March 30th, 2010 at 10:32 pm

    very nice post, thank you.

  40. Online RSA on April 20th, 2010 at 6:13 pm

    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.

  41. building on April 22nd, 2010 at 12:23 pm

    Great work. Thanks!

  42. Mark on May 5th, 2010 at 11:24 am

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

  43. Denker on May 7th, 2010 at 11:18 am

    Great article, Thanks.

  44. wynajem on June 27th, 2010 at 3:28 am

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

  45. nikhil on August 22nd, 2010 at 11:01 pm

    Gr8 collection, like it, thanks for sharing it.

  46. slovn on September 26th, 2010 at 1:32 am

    nice stuff, +++

  47. Pretty Girl Rock Video on October 11th, 2010 at 1:19 am

    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!

  48. ku?ni ljubimci on March 23rd, 2011 at 10:36 pm

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

    Thank you for sharing!

  49. Blueprint RSA on May 26th, 2011 at 5:29 am

    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!

  50. ANZA on August 4th, 2011 at 5:33 pm

    Nice Article ..
    Thank you ……

  51. jayendra on January 24th, 2012 at 11:09 am

    Great Collection. Thanks to share this.

  52. Diablo on January 29th, 2012 at 12:11 pm

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

  53. rabiei on February 4th, 2012 at 11:23 am

    thank you very much for sharing this Plugins with us.

  54. Jeff on March 29th, 2012 at 1:46 pm

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

  55. Arjun Rk on April 30th, 2012 at 10:32 am

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

  56. Sebastian on May 6th, 2012 at 10:04 pm

    Nice List! Thank you very much!

  57. pelangsing on January 15th, 2013 at 10:38 am

    exellence, i will try now. thank 4 plugin