A jQuery Plugin to easily crossfade through images
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
tests
LICENSE
README.md

README.md

ScreenShot

imgCrossfade v0.2 / 30-05-2016 #####A jQuery Plugin to easily crossfade through images (same dimensions required) Kevin Köllmann (Koelli91) licensed the GPL-3.0

#Usage

####Include:

<script src="js/imgCrossfade.min.js"></script>

####HTML: For "Standard" Images:

<div id="cycler">
	<img src="one.jpg" class="cf" />
	<img src="two.jpg" class="cf" />
	...
</div>

For Background-Images (the css background-image-property will be applied to the "cycler"):

<div id="cycler">
	<img src="one.jpg" class="cf-bg" />
	<img src="two.jpg" class="cf-bg" />
	...
</div>

The images itself will be completely hidden (display: none), so you don't have to worry about your layout.

####JS: For "Standard" Images:

$(document).ready(function() {
	$("#cycler").imgCrossfade();
});

For Background-Images:

$(document).ready(function() {
	$("#cycler").bgimgCrossfade();
});

####CSS: For both (standard and background-images):

#cycler {
	width: 227px; /* the common width of the images */
	max-width: 100%; /* for responsiveness - choose whatever max-width you'd like */
}

####View in action: http://koelli91.github.io/imgCrossfade/

###Features:

	- Bootstrap-Compatible
	- Lightweight: ~2 KiB (minified)
	- Responsive
	- All browsers (incl. IE6)

###Known Bugs:

	- background-image-transition currently only works in Webkit-Browsers (Chrome and Safari)
	(IE/Edge & FF just switch the background-image instantly after configured interval)

###Options:

$("#cycler").imgCrossfade({
	fading: 'fast'|'medium'|'slow'|<any number in ms>
	interval: <any number in ms>
});
/*
* fading: how long the crossfade should take (Default: 'medium' (= 1500 ms))
* interval: how often the image should change (Default: 7000 ms)
*/