Cool and Useful jQuery Image and Content Sliders and Slideshows


[IMG]************************************************************ **********************[/IMG]
[IMG]************************************************************ ***********************8[/IMG] [IMG]************************************************************ ***********************9[/IMG] [IMG]************************************************************ ***********************10[/IMG]
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.

http://mgmt.noupe.com/wp-content/upl...ryimage481.jpg

ShineTime (demo | download)

“A new kick-*** 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.

http://www.smashingmagazine.com/wp-c...eryimage45.jpg

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.

http://www.smashingmagazine.com/wp-c...ueryimage3.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage51.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage52.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage58.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage54.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage55.jpg

Image Slider with Unique Effects (demo | download)

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

http://www.smashingmagazine.com/wp-c...ueryimage1.jpg

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

http://www.smashingmagazine.com/wp-c...ueryimage2.jpg

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.

http://www.smashingmagazine.com/wp-c...ueryimage4.jpg

Nivo Zoom (demo | download)

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

http://www.smashingmagazine.com/wp-c...ueryimage5.jpg

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

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

http://www.smashingmagazine.com/wp-c...ueryimage6.jpg

Animate Panning Slideshow with jQuery (demo | download)

http://www.smashingmagazine.com/wp-c...ueryimage7.jpg

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.

http://www.smashingmagazine.com/wp-c...ueryimage8.jpg

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

http://www.smashingmagazine.com/wp-c...ueryimage9.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage10.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage11.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage12.jpg

Image Gallery Using jQuery and Flickr (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage13.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage14.jpg

jQZoom Evolution (demo | download)

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

http://www.smashingmagazine.com/wp-c...eryimage15.jpg

Photo gallery using jQuery and VisualLightBox (demo | download)
http://www.smashingmagazine.com/wp-c...eryimage16.jpg

Zoomimage (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage17.jpg

YoxView (demo | download)

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

http://www.smashingmagazine.com/wp-c...eryimage18.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage19.jpg

AnythingSlider (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage20.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage21.jpg

Exposure (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage47.jpg

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!

http://www.smashingmagazine.com/wp-c...eryimage22.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage23.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage24.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage25.jpg

Galleriffic (demo | download)

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

http://www.smashingmagazine.com/wp-c...eryimage26.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage27.jpg

jQuery morphing gallery (demo | download)

A gallery that “morphs” images between transitions.

http://www.smashingmagazine.com/wp-c...eryimage28.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage29.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage30.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage31.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage32.jpg

Coda Slider Effect (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage33.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage34.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage35.jpg

Simple demo (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage36.jpg

ImageFlow (demo | download)

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

http://www.smashingmagazine.com/wp-c...eryimage37.jpg

Moving Boxes (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage38.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage39.jpg

Pirobox (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage40.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage41.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage42.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage60.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage43.jpg

Zoom-Info (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage46.jpg

Box Slider (demo | download)

http://www.smashingmagazine.com/wp-c...eryimage49.jpg

jQuery Panel Gallery (demo | download)

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

http://www.smashingmagazine.com/wp-c...eryimage53.jpg

Image Highlighting and Preview with jQuery (demo | download)

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

http://www.smashingmagazine.com/wp-c...eryimage56.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage57.jpg

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

http://www.smashingmagazine.com/wp-c...eryimage59.jpg

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.

http://www.smashingmagazine.com/wp-c...eryimage61.jpg

(al)(rb)

http://feeds.feedburner.com/~ff/Noup...bU:V_sGLiPBpWU http://feeds.feedburner.com/~ff/Noup...bU:F7zBnMyn0Lo http://feeds.feedburner.com/~ff/Noup...bU:gIN9vFwOqvQ http://feeds.feedburner.com/~ff/Noupe?d=7Q72WNTAKBA