100+ jQuery Slider Example

Sunday 19 June 2011

Slideshow 2 Integration with Lightbox

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

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

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

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

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

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

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

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

Example of jCarousel working together with Thickbox 3.

jQuery Multimedia Portfolio

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