100+ Jquery Slider and Slideshows

Slideshow 2 Integration with Lightbox

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 09:20:00 -0700

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

A simple slideshow with jquery

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 08:51:00 -0700

A simple slideshow-script, started onload or by link, the transition is fading, once started, the script runs nonstop.

Display

The script shows the given images in the selected DIV-container. It is started either automatically on page load or by the click on optional control-elements. On page load the script replaces the contents of the given DIV-container which gives you the opportunity to integrate a static picture or a notice (like: the slideshow requires JavaScript) thus providing a fallback for visitors with JavaScript disabled.

Functionality

The script works thinkable easy. The given pictures lie one upon the other in a DIV-container. The "one upon the other" is realized by the use of the z-index. Whilst sliding through the pictures the topmost picture is faded out and then - as in a pack of cards - put to the bottom of the deck. That´s all.

Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 08:39:00 -0700

Features

Resize images to fill the entire browser window while maintaining proportional dimensions.
Fullscreen slideshow complete with transitions, navigation, captions, and preloading.
Integrate with existing sites or create your own portfolio gallery.

New in Supersized 3.0

Added scrolling – you can have your site on top of Supersized.
Increased performance for larger number of images.
Images are now loaded from an array.
Added thumbnail navigation.

Making a Flickr-powered Slideshow

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 08:30:00 -0700

Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets.

The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

Shutter Effect Portfolio with jQuery and Canvas

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 08:22:00 -0700

We will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect.

This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Skitter - Slideshow for anytime

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 08:08:00 -0700

Skitter - Slideshow for Anytime

More than 20 effects.
Photo description with alpha background.
Auto Slider.
Image url using html or XML..

iCarousel - Horizontal images slider

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 07:40:00 -0700

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content.

It can be a presentation of headlines, small fragments of news or a list of thumbnails.

The nature of the thing being rotated doesn't matter too much here because all those kind of applications share always the same idea: Rotating.

This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful.

It's a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

Spotlight & Preview - Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 07:33:00 -0700

Illustrates how to spotlight the middle item in the carousel. Several techniques illustrated:

Highlight the middle item by switching between a style class 'non-spotlight' (all other visible items have this class) with the style class 'spotlight')
To accomplish the offset start (so that item 1 starts in the middle) set scrollBeforeAmount to 2 and scrollAfterAmount to 2. This will allow scrolling between -1 and 17, yet loads only happen from 1 to 15 (size). Also the firstVisible is set to -1.
The slight bounce is accomplished by setting the animationMethod to YAHOO.util.Easing.backBoth.
carousel.addItem() now allows a third parameter: itemClass that we initially set to 'non-spotlight'
When the user hits next or previous we turn off the spotlight (switching classes) for the previous middle (which is actually the previous firstVisible -- carousel.priorFirstVisible) and highlight the new one
Clicking on an image in the carousel will scroll to the item and show it in the preview.

Version 0.6.3 - 08/18/08

Upgraded demos to use YUI 2.5.2.
Removed extraneous includes for YUI library from demos.
Retested on all browsers.

jCarousel and Thickbox 3

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 07:27:00 -0700

Example of jCarousel working together with Thickbox 3.

jQuery Multimedia Portfolio

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 07:18:00 -0700

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

Prototype UI-Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 07:10:00 -0700

Carousel are great to display a large set of data like images. The current version includes:

Static and Ajax content,
Works with fluid layout,
Vertical and Horizontal

jQuery Infinite Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 07:02:00 -0700

With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page.

This tutorial will walk through the fundamentals of the effect and how to recreate it.

This is a reasonably advanced effect so we need to plan carefully what we’re trying to achieve:

Markup that works without JavaScript (done!)
Initialisation & capture the height and width of the first carousel item (required for calculations)
Create empty list items to pad to fill every page
Generate cloned items on the start and end of the list
Adjust the scroll left position to show the real first item
Create goto method that supports forward and backwards
Generate the next/prev links & bind goto calls

jQuery Infinite Carousel Plugin 1.2 Released

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 06:55:00 -0700

What’s So Great About this Plugin?

Unlike most carousel plugins which stop when they get to the last image,
This one allows the show to go on infinitely without any user intervention.
If you have three images you want to display, after the third image has been
Displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.
Captions are optional.
Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence.
Thumbnails can be styled via CSS.
It’s less than 14K (a minified/compressed version will be available shortly).
Reusable on multiple containers within the same page.
You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos below).

Step Carousel Viewer v1.9

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 02:32:00 -0700

Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three "status" variables are here for that purpose. Some highlights of this script:

Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.
Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.
Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.
Ability for Carousel to auto rotate as dictated by the new parameter: autostep: {enable:true, moveby:1, pause:3000} During this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking Carousel halts auto rotation altogether.
Option to specify two navigational images that's automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth.
Ability to auto generate pagination images based on the total number of panels within a Carousel and positioned anywhere on the page. v1.8 feature
The contents of a Carousel can be updated on demand after the page has loaded with new contents from an external file. v1.8 feature

Creating a Wobbling 3D Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 02:27:00 -0700

We’ll be creating a carousel with the help of the 3d Engine we built in a previous post.

The idea is we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer.

Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

Cloud Carousel - A 3d Carousel in Javascript

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 02:20:00 -0700

There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript's favour, I have created this jQuery carousel plugin.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

Features

Works with most browsers (tested on IE6-IE9, Firefox (incl V4), Chrome, Opera, Safari).
Accurate 3d perspective.
Optional auto reflections - no need to modify your images or add server code.
Easy integration with basic valid HTML and a tiny bit of JavaScript.
Small 5Kb (minified) script..
Degrades gracefully with Javascript turned off.
Fully accessible with no CSS or text only browsers.
Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
Optional mouse wheel support as of version 1.0.2.
It's completely free.

jQuery Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 02:11:00 -0700

Options can be passed to the jquery.carousel method in the form of an associative array:

Direction determines the direction of the carousel (horizontal by default)
Loop, set to true, allows you to define a carousel that loops (false by default)
DispItems determines the number of items to display per step (default 1)
Pagination, set to true, allows you to display a paginated carousel. (false by default)
PaginationPosition (depends on pagination) determines the page position relative to the main slide container. (inside by default)
NextBtn sets the html needed to render the 'Next' button. ("Next" span by default)
PrevBtn sets the html needed to render the 'Previous' button. ("Previous" span by default)
BtnsPosition determines the position of buttons relative to the main slide container. (inside by default)
NextBtnInsert (depends on btnsPosition) determines how the nextBtn element is inserted into the DOM. (appendTo par défaut)
PrevBtnInsert (depends on btnsPosition) determines how the prevBtn element is inserted into the DOM. (prependTo by default)
AutoSlide, set to true, allows you to automatically click the Next button at a given interval. (false by default)
AutoSlideInterval (depends on autoSlide) determines the delay between each click using the autoSlide option (3000 default)
DelayAutoSlide (depends on autoSlide) allows you to set a time delay between two co-existing carousels (0 default)
CombinedClasses, set to true, allows you to emulate multiple classes in IE6 (false by default)
Effect allows you to define animated effects that use jQuery to transition from one item in the carousel to the next (slide by default, effects integrated into jQuery - see the documentation).
SlideEasing (if: effect="slide"), enables the easing effect in the slide animation (swing by default, see the documentation for the plugin easing.js for combinations if necessary)
AnimSpeed (if: effect="slide") determines the speed of the animation when using slide. (normal by default)

jQuery Image Scale Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 02:03:00 -0700

It auto scales the images you put into it to the appropriate height and width keeping their aspect ratio in place.

When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else.

This is what's so nice about this jQuery plug-in; you don't have to worry about all of your images being perfectly sized for this slider.

The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.

Pretty jQuery carousels Kirousel - Joomla! 1.5 plugin

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 01:56:00 -0700

Kirousel is a Joomla! 1.5 plugin which displays pretty JQuery carousels in article contents.

Features list
Kirousel has many options :

Root to every kirousels' folders
Scrolling effects
Horizontal
Vertical
Fading
Boucing
Diaporama
Loop
Pagination
Number of images to show for each time
Scroll delay for the diaporama effect
Ability to display many kirousels in the same article

By default, your kirousel will load defined parameters in the plugin configuration, but you can also specify different parameters for each of your kirousels by writing them directly in the tag.

Tiny Carousel with jquery

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 01:23:00 -0700

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library.

Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

Features

Can slide vertical or horizontal
Supports navigation by button or paging
The point where the carousel starts can be set
Animation time can be set in milliseconds or to 'instant'
Number of block to move at a time can be set
A interval can be set to slide automaticaly every given milliseconds
Easy customizable
Dual licensed under the MIT or GPL Version 2 licenses.
Lightweight its only 100 lines of code. mimified the size is 2,29 kb

jQuery.carouFredSel Plugin scroll one or multiple items simultaneously

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 01:14:00 -0700

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction.

The carouFredSel-plugin was built using the jQuery-library.
It is dual licensed under the MIT and GPL licenses.

Carousel with wrap effect with jquery

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 01:07:00 -0700

This carousel actually wraps slides as they're bumped off the edges. That is, if a slide is bumped off the right edge, it reappears in equal measure from the left edge.

The 'on' slide is always centered, widened and given full opacity. The other slides huddle around it, narrower and semi-opaque.

An auto-rotator turns on each slide in turn, or you can force a slide on by clicking it (interrupting the auto-rotate).

Clicking the 'on' slide takes you to its corresponding URL, specified in the config file.

jQuery Feature Carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 01:00:00 -0700

This plug-in was intended to be used to display feature stories on a home page of a website, but can be used for any reason and is highly customizable.

It will always display three images at the same time, with all the rest hidden behind the center image.

I have detailed instructions for using the plug-in, as well as a list of all the options and some frequent questions.

Features

Arrange div's of content in a 3-D, rotating carousel.
Currently supports one flanking 'feature' on either side of center feature.
Show clickable indicators (blips) of what feature is currently at the center.
Display text overlay on bottom of feature (can be included anywhere on image using CSS, and below image using an option)
Speed, effects, locations, and more are all changeable.
See in action on Rowan University's homepage.
Works in Chrome, FireFox, Safari, and IE7+. Limited support for IE6.

If you have any questions about the carousel, please post a comment below.

3d-Carousel with Jquery

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 00:56:00 -0700

Very special in this slider is mouse scroll option..!

Uber-customsiable video carousel

noreply@blogger.com (Anbu) — Sun, 19 Jun 2011 00:46:00 -0700

This carousel and featured-content rotator excels in two areas: firstly, it serves both video and graphic content, and secondly, it is super-customisable in terms of where the three components of the carousel - namely the slides, the tabs and the 'more info' area - are positioned within it.

An XML file controls all behavioral and visual aspects of the carousel, though default settings can be overridden at the point of instantiation.Uber-customsiable video carousel