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