Easy Image Slideshow Plugin with Fade-in Effect - EzFade

EzFade is an easy and fast jQuery plugin for creating an image slideshow with a simple fade-in transition effect and image pre-loader support. When the window's size changed, the plugin will automatically resize the images while keeping aspect ratio to fit within the entire container. Ideal for creating a full page image slideshow/slider for your responsive website/app.

How to use it:

1. Wrap the slideshow images in an wrapper.

<div id="demo">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
...
</div>

2. Include the loading_img.css for the image loading spinner.

<link rel="stylesheet" href="loading_img.css">

3. Load the jQuery library and jQuery EzFade plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="EzFade.js"></script> 

4. Call the plugin on the wrapper and set the height of the slideshow.

<script>
$(document).ready(function(){
$('#demo').EzFade({
height: '400'
});
});
</script>

5. More optional settings.

<script>
$(document).ready(function(){
$('#demo').EzFade({
duration: 3000, // Determines length between transitions. In milliseconds.
parentName: 'EzFade', // Gives the container of slideshow element class of specified string. 
childName: 'EzFadeElm', // Gives the elements of slideshow class of specified string. 
fadeSpeed: 1000, // Determines lenght of fade. In milliseconds.
width: '100%', // Gives slideshow a width.
height: '600', // Gives slideshow a height.
position: 'relative' // Gives slideshow a position.
});
});
</script>

Change log:

2014-03-20

• fixed smaller than bug with max-width:none

---

This awesome jQuery plugin is developed by afs35mm. For more Advanced Usages, please check the demo page or visit the official website.