Cross Fade Image Gallery

Images gently fade into each other for a beautiful image gallery.

Demo

Step 1

First Write out our html file


<div class="img_xfade">
    <img src="img/coffee_01.jpg" alt="Coffee Cup" />
    <img src="img/coffee_02.jpg" alt="Coffee Cup" />
     <img src="img/coffee_03.jpg" alt="Coffee Cup" />
    <img src="img/coffee_04.jpg" alt="Coffee Cup" />
</div>

Step 2

Next, write your javascript out in a separate file


// JavaScript Document

var slideImages = $('.img_xfade img');
var numberOfImages = slideImages.length;

slideImages.hide();

rotatePics(1);

function rotatePics(currentPhoto){
	
	// will return 0 when currentPhoto = numberOfImages
	currentPhoto = currentPhoto % numberOfImages
	
	slideImages.eq(currentPhoto)
		       .fadeOut(function(){
		  
					slideImages.each(function(i){
			
						$(this).css(
							'z-index', ( ((numberOfImages - i ) + currentPhoto) % numberOfImages) );
				
					}) // end each loop
					
					$(this).siblings().show();
		
					//$(this).siblings().not(':visible').show();
		
					setTimeout(function(){
				  		rotatePics(++currentPhoto);
					}, 5000)
			
				});// end fade out function	


};

Step 3

Lastly, attach your javascript files to your page


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