Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 06 2012

07:00

May 23 2011

10:17

Cool and Useful jQuery Image and Content Sliders and Slideshows

Advertisement in Cool and Useful jQuery Image and Content Sliders and Slideshows
 in Cool and Useful jQuery Image and Content Sliders and Slideshows  in Cool and Useful jQuery Image and Content Sliders and Slideshows  in Cool and Useful jQuery Image and Content Sliders and Slideshows

Looking for some cool new (and free) jQuery slider plug-ins and scripts? Then here is the perfect round-up created just for you. Here, we have collected the best of the freshest jQuery plug-ins for creating amazing image and content sliders. Because all of these plug-ins come with different functionality, this guide should help you figure out which one suits you best. Let’s go!

jQuery Image And Content Sliders

Cloud Carousel (demo | download)

Here is a 3-D carousel, with optional auto-reflection that doesn’t require images to be modified or server code to be added. Accurate 3-D perspective and easy integration with basic valid HTML, all with a tiny bit of JavaScript.

Jqueryimage481 in Cool and Useful jQuery Image and Content Sliders and Slideshows

ShineTime (demo | download)

“A new kick-ass jQuery and CSS3 gallery with animated shine effects.” This effect will make user interface elements look like they’re a polaroid photo (or made of glass). The best part is that it’s not that difficult to achieve.

Jqueryimage45 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Nivo Slider (demo | download)

Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. It simply converts a wrapper for images into a slider, and it offers nine unique transition effects.

Jqueryimage3 in Cool and Useful jQuery Image and Content Sliders and Slideshows

MLB.com Content Switcher with jQuery and CSS3 (demo | download)

The goal of this project was to recreate MLB.com’s switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

Jqueryimage51 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Create Scrollable Interface (demo | download)

This jQuery plug-in creates a scrollable interface with which to scroll over a large image in a small area.

Jqueryimage52 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Beautiful Photo Stack Gallery with jQuery and CSS3 (demo | download)

The idea here is to show photo albums with a slider, and when an album is chosen, its images are displayed as a beautiful photo stack. In this stack view, you can browse through images by tucking the one on top under the stack with a slick animation.

Jqueryimage58 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Micro Image Gallery: A jQuery Plugin (demo | download)

Jqueryimage54 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Minimalistic Slideshow Gallery with jQuery (demo | download)

This simple and beautiful slideshow gallery can be easily integrated in your website. The slideshow is in a container, with options to view a thumbnail grid, pause the slideshow and navigate through the pictures. The grid slides out from above and allow the user to navigate the thumbnails.

Jqueryimage55 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Image Slider with Unique Effects (demo | download)

This coin-slider jQuery image plug-in has several transition effects.

Jqueryimage1 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Create image gallery in 4 lines of jQuery (demo | download)

Jqueryimage2 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Slideshow with strip effects (demo | download)

jqFancyTransitions is an easy-to-use jQuery plug-in for displaying photos as a slideshow with fancy transition effects.

Jqueryimage4 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Nivo Zoom (demo | download)

Nivo Zoom is a free jQuery image zoomer intended as a replacement for a lightbox.

Jqueryimage5 in Cool and Useful jQuery Image and Content Sliders and Slideshows

AD Gallery, gallery plugin for jQuery (demo | download)

A highly customizable gallery and showcase plug-in for jQuery.

Jqueryimage6 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Animate Panning Slideshow with jQuery (demo | download)

Jqueryimage7 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Image Scale Carousel (demo | download)

When working with images online, keeping the aspect ratio intact is as important as anything. That is what’s so nice about this jQuery plug-in: you don’t have to worry about sizing all of your images perfectly. It auto-scales your images for you, making implementation super-simple.

Jqueryimage8 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Sudo Slider (demo | download)

Essentially, Sudo Slider is a slider plug-in that allows you to do whatever you want, with whatever HTML you want. It’s both a content and image slider

Jqueryimage9 in Cool and Useful jQuery Image and Content Sliders and Slideshows

GALLERYVIEW (demo | download)

GalleryView is a content gallery plug-in capable of displaying any HTML content in an animated gallery view. Visit the project’s home page for documentation and demonstrations.

Jqueryimage10 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Jquery Plugin MopSlider 2.4 (demo | download)

MopSlider is a slider box that can contain any item with a set height and width. With version 2.5, MopSlider can be added to a page however many times you want. An auto-move function is included.

Jqueryimage11 in Cool and Useful jQuery Image and Content Sliders and Slideshows

jQuery Image Scroller (demo | download)

Making use of jQuery’s excellent animation features, this image scroller is completely autonomous and begins scrolling once the page loads. The finished widget is completely cross-browser compatible and performs as expected in the latest versions of the most common browsers.

Jqueryimage12 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Image Gallery Using jQuery and Flickr (demo | download)

Jqueryimage13 in Cool and Useful jQuery Image and Content Sliders and Slideshows

jQuery plugin: Wilq32.RotateImage (demo | download)

This is the product of the Wilq32.PhotoEffect snippet. You can use this tiny script to rotate images (at any angle) directly on the client side (e.g. with user-generated content) and animate them using your own functions.

Jqueryimage14 in Cool and Useful jQuery Image and Content Sliders and Slideshows

jQZoom Evolution (demo | download)

JQZoom is a JavaScript image magnifier built on jQuery. The script makes it easy to magnify whatever you want.

Jqueryimage15 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Photo gallery using jQuery and VisualLightBox (demo | download)
Jqueryimage16 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Zoomimage (demo | download)

Jqueryimage17 in Cool and Useful jQuery Image and Content Sliders and Slideshows

YoxView (demo | download)

YoxView is a free lightbox-type media and image viewing jQuery plug-in. It’s easy to use and feature-rich.

Jqueryimage18 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Supersized (demo | download)

This plug-in resizes images to fill the browser while maintaining their dimensions. You can cycles images and backgrounds in a slideshow with transitions and preloading. And navigation controls allow for “Pause/Play” and “Forward/Back.”

Jqueryimage19 in Cool and Useful jQuery Image and Content Sliders and Slideshows

AnythingSlider (demo | download)

Jqueryimage20 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Photo Revealer (demo | download)

With this, you get a line of cropped thumbnails on a string. Clicking the “More Info” button expands a photograph to full size and reveals additional information. Photos are loaded on page load, so there is no waiting after clicks.

Jqueryimage21 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Exposure (demo | download)

Jqueryimage47 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Auto-Playing Featured Content Slider (demo | download)

This is an alternative to the jQuery Coda Slider plug-in. With this, a slide can be any kind of HTML content whatsoever, even a full-size image with overlay. Each slide has a unique thumbnail that, when clicked, takes you to the corresponding slide, with an arrow above indicating the active panel. And it auto-plays!

Jqueryimage22 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Horinaja (demo | download)

Horinaja is a ready-to-use slideshow that can be used with either Scriptaculous/Prototype or jQuery. It allows you to use the mouse wheel for navigation; when the mouse is outside of the slideshow area, it scrolls; when hovering over the slideshow, scrolling pauses.

Jqueryimage23 in Cool and Useful jQuery Image and Content Sliders and Slideshows

S3 Slider (demo | download)

This one’s easy. First, enable the jQuery library, and then include the S3 Slider JavaScript in the head of the page where you want to use it.

Jqueryimage24 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Slide Deck (demo | download)

SlideDeck is a powerful plug-in that lets you organize any type of content into a beautiful and user-friendly slider.

Jqueryimage25 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Galleriffic (demo | download)

A jQuery plug-in for rendering rich fast photo galleries.

Jqueryimage26 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Photo Gallery – Dark Theme (demo | download)

GalleryView decides the best way to animate your filmstrip. When the gallery is wider than the filmstrip, the filmstrip remains stationary and the pointer slides from frame to frame. When the filmstrip is too long for the gallery, the pointer remains still and the filmstrip animates beneath it.

Jqueryimage27 in Cool and Useful jQuery Image and Content Sliders and Slideshows

jQuery morphing gallery (demo | download)

A gallery that “morphs” images between transitions.

Jqueryimage28 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Simple Accordion w/ CSS and jQuery (demo | download)

Designed and implemented with usability in mind, this accordion can come in very useful when organizing a good chunk of content.

Jqueryimage29 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Automatic Image Slider w/ CSS & jQuery (demo | download)

Jqueryimage30 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Create a Slick and Accessible Slideshow Using jQuery (demo | download)

A usable and accessible slideshow widget for your website that uses HTML, CSS and JavaScript (via jQuery).

Jqueryimage31 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Fancy Thumbnail Hover Effect w/ jQuery (demo | download)

Jqueryimage32 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Coda Slider Effect (demo | download)

Jqueryimage33 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Simple Controls Gallery (demo | download)

Want to display images as an automatic slideshow that can be played or paused by the user? Simple Controls Gallery displays an image by fading it into view over the previous one. Navigation controls pop up when the mouse rolls over the gallery.

Jqueryimage34 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Popeye (demo | download)

jQuery.popeye is an advanced image gallery script built on jQuery. Use it to save space when displaying a collection of images, and offer users an elegant way to show big versions of images without disrupting the page flow.

Jqueryimage35 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Simple demo (demo | download)

Jqueryimage36 in Cool and Useful jQuery Image and Content Sliders and Slideshows

ImageFlow (demo | download)

ImageFlow is an unobtrusive and user-friendly JavaScript image gallery.

Jqueryimage37 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Moving Boxes (demo | download)

Jqueryimage38 in Cool and Useful jQuery Image and Content Sliders and Slideshows

SlideViewerPro (demo | download)

SlideViewerPro is a fully customizable jQuery image gallery engine that allows you to create outstanding sliding galleries or interactive galleries in blog posts.

Jqueryimage39 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Pirobox (demo | download)

Jqueryimage40 in Cool and Useful jQuery Image and Content Sliders and Slideshows

jQuery simple panorama viewer (demo | download)

This small plug-in for jQuery will display any image on the page that has the class panorama as an interactive panorama.

Jqueryimage41 in Cool and Useful jQuery Image and Content Sliders and Slideshows

A Beautiful Apple-style Slideshow Gallery (demo | download)

Jqueryimage42 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Flickr Photobar Gallery (demo | download)

The aim here was to build a bottom photo bar that one could easily integrate into a website. It is hidden initially and slides up when the handle is clicked. The photo sets are first shown and when one of them is chosen; all of the set’s images can be viewed as thumbnails; when a thumbnail is clicked, the full view appears as an overlay.

Jqueryimage60 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Step Carousel Viewer (demo | download)

Step Carousel Viewer displays images and even rich HTML by side-scrolling them left and right. Users can jump to any panel on demand or browse the gallery by scrolling through any number of panels at a time. A smooth sliding animation is used to transition between items. And don’t worry, you can tame this script to do exactly want you want: two public methods, two custom event handlers, and three “status” variables are available for this purpose.

Jqueryimage43 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Zoom-Info (demo | download)

Jqueryimage46 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Box Slider (demo | download)

Jqueryimage49 in Cool and Useful jQuery Image and Content Sliders and Slideshows

jQuery Panel Gallery (demo | download)

An attractive and beautiful image slideshow plug-in, with a classic transition effect.

Jqueryimage53 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Image Highlighting and Preview with jQuery (demo | download)

A nice way to allow users to view bigger versions of images with some context.

Jqueryimage56 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Interactive Photo Desk (demo | download)

With this utility, photos can be dragged and dropped, stacked and deleted, with each action resembling a real-world action.

Jqueryimage57 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Multimedia Gallery for Images, Video and Audio (demo | download)

Jqueryimage59 in Cool and Useful jQuery Image and Content Sliders and Slideshows

Awesome Mobile Image Gallery Web App (demo | download)

A simple mobile image gallery, using the amazing jQTouch jQuery plug-in for mobile Web development. jQTouch has native animations, automatic navigation and themes for mobile Webkit browsers like those on the iPhone, iPod Touch, G1 and Pre.

Jqueryimage61 in Cool and Useful jQuery Image and Content Sliders and Slideshows

(al)(rb)

Sponsored post
feedback2020-admin
04:05

January 07 2011

13:21

Creating And Distributing Presentations On The Web

Advertisement in Creating And Distributing Presentations On The Web
 in Creating And Distributing Presentations On The Web  in Creating And Distributing Presentations On The Web  in Creating And Distributing Presentations On The Web

Delivering great presentations is an art, and preparing the slides for them very much so, too. But we’re not going to talk about that. We’re also not going to get into the debate about whether to use open or closed technologies to create slide decks — this is something you need to hash out yourself, and there are some interesting discussions going on.

What I will talk about is how I (and you, of course) can use the Web to find content for your talks, record them, share them with others and save them for future audiences. I’ll also explain how to share it all for free and how to convert closed formats into open ones by using the Web.

In 2010 I delivered a boatload of talks that people attended, downloaded, commented on and remixed for their own training sessions and presentations. I love to share my research and information, because when you set them free they can inspire and help others to get their own voices heard. Here’s how I did it.

Free Tools For Recording And Spicing Up Talks

Let’s begin with the only paid-for system I use in the whole process: I write my slides in Apple’s iLife application Keynote. I use it because when I do my work I’m usually offline (on trains, in airport lounges, in hotel rooms without free connectivity, etc.).

Keynote is great: I can resize and mask images, embed video, export as PDF, and there are a lot of beautiful, subtle and effective animations and transitions. Creators of slide tools should view Keynote as a model, and 280slides actually did so. Apple should also consider using a standardized format for HTML slides to import; in fact, this is one of the interesting discussions going on.

If I need to use high-quality images, I don’t spend money or time getting licensed content. Instead, I go to the advanced search option on Flickr, find photos with Creative Commons licenses and use these. All I need to do then is publish a link with each photo in my slides. Even I can do that much for copyright law.

Advanced-search in Creating And Distributing Presentations On The Web
Flickr’s advanced search interface lets you specify the license of photos. You’ll probably want “Creative Commons” or “license-free.” Also check out The Commons for good old photos that have been donated to Flickr by libraries and museums.

Sharing Slides, Archiving The Originals

When I finish working, I give my talk using Keynote and export it as a PDF for sharing on the Web. I share my talk by uploading it to SlideShare, which entails the following:

  • The talk gets converted to an embeddable Flash movie;
  • The talk becomes an HTML transcript shown on the SlideShare website;
  • The talk is hosted on its server, which means I don’t have to pay for traffic;
  • People can “favorite,” bookmark and comment on my slides.

In addition to hosting my work on SlideShare, I usually also zip the original Keynote file; Keynote doesn’t format presentations as individual files, but rather as a folder of resources. I upload them to Amazon S3, where I pay a few pennies a month to store heaps of data. This is my back-up archive should anything terrible happen to SlideShare or my computer.

Asking For Feedback, Offering Code Examples

Another interesting service for speakers is SpeakerRate, where people can — wouldn’t you guess? — rate speakers and their talks. SpeakerRate also has an API that allows you to pull out the ratings in case you want to show them off on your portfolio.

I normally host code examples from my presentations on GitHub. There, they are accessible, and I can update and edit the code without having to create my own ZIP files for people to download. It’s incredibly useful for making quick changes in response to what people have requested in comments and for reacting to questions you received during the talk.

Hosting your code on GitHub automatically begins the process of versioning. People can embed and alter your original examples, and the code is displayed with color-coding, making it readable.

Setting up an account on GitHub and getting your code in there is pretty straightforward — just follow the simple tutorial.

Recording Talks

I normally record my talks so that I can listen to them in the gym and other places where I can’t write. There’s a free tool for this that works across all platforms. It’s called Audacity. Just hit the record button and it will create the audio file where you specify.

Editing in Audacity is as easy as cropping the things you don’t want:

Audacity2 in Creating And Distributing Presentations On The Web
Large view

You can save the audio in MP3 or OGG (among other formats). I usually save them as MP3s and then add them to iTunes for tagging so that I can add cover art and other extras to prep them for the iPod.

Syncing Audio And Slides

With SlideShare, you can also create a “Slidecast” of your talks, which means syncing the audio and the slides. It’s a cool feature, but I don’t like the editor as it is; the handles used to define the start and end times of slides don’t allow them to be close together — and that can throw off the syncing. It’s also a time-consuming process. I’m working on some alternatives, and correspondence with SlideShare indicates that it is, too. Regardless, I’ve found that Slidecasts get a lot of visitors, so it can be worth it.

Recording Video

There was seldom a camera to record me wherever I spoke last year, and an amazing amount of recorded talks never see the light of day. If no camera is available to record your talk, then you can record the screen as you present.

One of Keynote’s lesser-known features is that you can record a video of your slides with a voiceover. Simply go to Play → Record Slideshow before giving your talk:

Why-of-html5 in Creating And Distributing Presentations On The Web
Large view

When you’re finished, export the video to QuickTime by going to File → Export:

Export in Creating And Distributing Presentations On The Web
Large view

If you don’t use Keynote or if you jump in and out of your presentation, then record the presentation on your computer screen. There are a few pieces of software to choose from for that.

VLC is a video player that’s free and compatible with all operating systems. It can also record the screen; go to File → Open Capture Device → Screen. You can record a high-quality video of everything that goes on. There’s even a feature that records a part of the screen by following the cursor.

Open-source in Creating And Distributing Presentations On The Web
Large view

Simply check the “Streaming/Saving” checkbox, click “Advanced,” and define a suitable location and settings for your video:

Presentation3 in Creating And Distributing Presentations On The Web
Large view

Screencasts are generally a great idea. Instead of performing live demos in my presentations, I record screencasts and embed them in Keynote. That way, I don’t need an Internet connection — they’re usually unreliable at conferences — and I can talk over the recording while on stage, rather than having to click, enter information and talk at the same time.

To screencast with a program other than VLC, I usually use the commercial app iShowU. When I was still using Windows, I had Camtasia. Both of these sit on your screen and let you record and pause easily:

Presentation4 in Creating And Distributing Presentations On The Web
Large view

Nowadays, I also use hosted services.

Screenr is absolutely fabulous for this purpose. Just start the applet on the page, grant it access to your machine, and start recording. You have five minutes, with audio. When you’re finished, the movie is automatically converted, and you can export the video to YouTube. The video conversion happens more or less in real time. All you need to sign into Screenr is a Twitter account. With Screenr you can also tweet an embeddable version of the video. If you need similar service for longer videos, check out Screencast-o-matic.

Converting Video

The free tool I use is MPEG Streamclip, and it’s available for Mac and Windows. Drag your video onto it, and select the format you need:

Mpeg-stream2 in Creating And Distributing Presentations On The Web
Large view

There are a lot of presets — iPod, iPad and so on:

Compression in Creating And Distributing Presentations On The Web
Large view

Automatic Conversion And Hosting For Audio And Video

As you know, embedding videos on websites with HTML5 can be a pain, particularly when it comes to encoding them. Different browsers require different codecs.

There is, however, a simple way: Archive.org hosts all kinds of useful content. (The WayBackMachine, which keeps snapshots of how websites looked at a certain time, is probably the best known.) And you can host content there if you license it with Creative Commons. The good news? Archive.org automatically converts your content to HTML5-friendly formats!

Check out the recording of my talk on HTML5 for gaming. I recorded it with Audacity and saved and uploaded it as an MP3. The Ogg version was created by Archive.org. To embed it on a Web page, I just need to do this (line breaks added for readability):

<audio controls>
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.ogg">
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.mp3">
</audio>

The same goes for video: free, fast hosting without limits, and automatic conversion. What more could you want?

Converting SlideShare To HTML

SlideShare creates embeddable Flash versions of my Keynote files (saved as PDF). I want to go with open technology and convert them back to HTML and images. You can do this with the mobile version of SlideShare.

If you call up a SlideShare presentation on a mobile device, you’ll get an HTML version with JavaScript and images. You can simulate this by sending the user agent of, for example, an iPad to the page before displaying it. In PHP, this takes a few lines of code:

$url = 'http://www.SlideShare.net/cheilmann/
        the-why-of-html5-for-games-development';
$url = preg_replace('/.net\//','.net/mobile/',$url);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0(iPad; U; CPU iPhone OS 3_2
like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko)
Version/4.0.4 Mobile/7B314 Safari/531.21.10");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$page = curl_exec($ch);
curl_close($ch);
echo $page;

Slidesharemobile in Creating And Distributing Presentations On The Web
Large view

I’ve scraped and converted the results, and now I can embed the SlideShare presentation as HTML and images using the converter tool:

Slideshareconverter in Creating And Distributing Presentations On The Web
Large view

I still want to fix a few things, such as making the images preload intelligently and adding proper alternative text. SlideShare creates transcripts of your slides on the page, but if there are slides without images, then the two go out of sync. I’ve emailed the company about it, and a fix might be released soon.

Summary

When it comes to publishing presentations online, a lot can be automated by using the Web as a platform and taking advantage of conversion services. Many developers are working on Web-based presentation tools, and I am quite sure we’ll see a collaborative presentation platform come into existence this year, although the task might not be as easy as it sounds. I have listed the hidden requirements of presentation systems before, and some things still need to be fixed. Keep your eyes open and help the cause.

(al)


© Christian Heilmann for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: embedding, presentations, slideshows, Tutorials, video

February 18 2010

20:43

35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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 in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

125-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

JQueryImageScroller-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

Slidingbox-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Create Beautiful jQuery sliders tutorial
With this tutorial, you can develop a beautiful jQuery slider that has an added image description and name. The final result is a smooth and visually pleasing slideshow which could be easily integrated into any site.

Beautifuljquery-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

Fullscreen-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

71-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

133-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

135-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

126-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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 Imagegrid-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

103-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

59-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

26-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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

27-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

121-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

134-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

136-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

65-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

66-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

74-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

47-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

Spoilers-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

109-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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

36-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

72-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

19-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

18-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

8-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

113-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

90-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

120-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

33-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

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.

129-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...