jQuery plugin - ImageFadingSlider 1.0

- Authoring

jQuery plugin

zirho - zirho6@gmail.com - http://www.zirho.co.kr

QnA here

Nov 22 2009

http://plugins.jquery.com/project/ImageFadingSlider

- Download

1. jquery-1.3.2
2. metadata
3. ImageFadingSlider 1.0

- Overview

ImageFadingSlider is a jQuery plugin that implements in javascript, commonly only available to the web developer via Flash or other proprietary plugins.
The following options and examples display the ImageFadingSlider plugin with fading-sliding images. Follow the examples and I hope you enjoy.

This plugin support the Metadata Plugin

Use markup to override plugin default options. It lets an option setting which goes like this able to use.

- Options and default

You can set size, timing and direction or leave random. A direction can be one of (→ ← ↑ ↓ ↗ ↙ ↖ ↘) these or random. If you set the fading time to 1000 and total time to 5000, sliding time will be 4000(total_time - fading_time) automatically.

options

1. item_width (100 px) - slider width (unit pixel)
2. item_height (100 px) - slider height (unit pixel)
3. dist (40 px) - sliding distance (unit pixel)
4. total_time (6000 ms) - each sliding time (unit msec)
5. fading_time (2000 ms) - each fading time (happens end of each ratation) (unit msec)
6. easing (4 move to right bottom) - 0 (↓), 1 (→), 2 (↑), 3 (←), 4 (↘), 5 (↙), 6 (↗), 7 (↖) and "random"

- How to use

1. Download these plugin js files and jquery and include them.

2. Need target div element

3. Add script code in the page

   	
   	jQuery(function($) {
   		$(".ImageFadingSlider").imageFadingSlider();
   	});

- Example

1. Default

   	
   	jQuery(function($) {
   		$("div.ImageFadingSlider").imageFadingSlider();
   	});

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
2. example 1

   	
   	jQuery(function($) {
   		$("div.ImageFadingSlider").imageFadingSlider({easing:"2"});
   	});

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
3. example 2

   	
   	jQuery(function($) {
   		$("div.ImageFadingSlider").imageFadingSlider({item_width:483, item_height:483, easing:"random", dist:200});
   	});

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
4. example 4

   	
   	jQuery(function($) {
   		$("div.ImageFadingSlider").imageFadingSlider({item_width:483, item_height:183, easing:"random", total_time:5000, fading_time:1000});
   	});