Demo 11 :: ToolTips

Web BrowsersGet Firefox! have a neat little pop up when you hover over something that has a title attribute. The bad part of this is that it isn't styleable. JQuery mends this by allowing you to replace it with one of your own toolTips. It is very handy.

View the HTML code

<div id="fadingGallery">
    <img src="../lib/img/flowers/blue-to-purple-perennial-flowers-1.jpg" alt="image1" height="300px" width="300px" />
    <img src="../lib/img/flowers/flowers-595.preview.jpg" alt="image2" height="300px" width="300px" />
    <img src="../lib/img/flowers/Flowers-Images.jpg" alt="image3" height="300px" width="300px" />
    <img src="../lib/img/flowers/pretty-pink-flowers-lovely-1.jpg" alt="image4" height="300px" width="300px" />
    <img src="../lib/img/flowers/rose-634.jpg" alt="image5" height="300px" width="300px" />
</div>

View the jQuery code

$(document).ready(function(){
	rotatePics(1);//calls out the rotatePics fucntion
});

function rotatePics(currentPhoto) {
	var numberOfPhotos = $('#fadingGallery img').length;//grabs the number of all the images in the fadingGallery div
	currentPhoto = currentPhoto % numberOfPhotos;//returns the remainder of currentPhoto divided by numberOfPhotos to keep less than the amount of all the photos
	
	$('#fadingGallery img').eq(currentPhoto).fadeOut(function() {//grabs the indexed number of the image currently showing and fades the image from the gallery
		$('#fadingGallery img').each(function(i) {//with this, we give each image a stored value
			$(this).css(
			'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos//with the images we set a z-index for them by offsetting the displayed photo index
			);
		});
		$(this).show();//when the reordering of the picutres happen, the faded one disappears but now being at the bottom of the stack, we show it to be displayed again
		setTimeout(function() {rotatePics(++currentPhoto);}, 3000);//creates a timer to start the rotatePics again with the incremented value of currentPhoto
	});
}