README.md

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)
*/