— jQuery: Create Image Fading Links

image-fade_1242739296690
In this tut we will be discussing how to fade images nicely asap(as simple as possible). For that we need jQuery ofcz and some images, lets start building one.

View Demo Download Code

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image Fade</title>

</head>

<body>

<div id="fademe">
<img src="images/1.jpg" id="image1" title='Four Friends' />
<img src="images/2.jpg" id="image2" title='Battery Checkup'/>
<img src="images/3.jpg" id="image3" title='Choki Dhani'/>
<img src="images/4.jpg" id="image4" title='Wah Ustad Wah'/>
<img src="images/6.jpg" id="image5" title='In Goa'/>
<img src="images/9.jpg" id="image6" title='Ganja Man'/>
</div>
<div id='selectors'>
<a href="#" rel="image1" title='Four Friends' >Four Friends</a>
<a href="#" rel="image2" title='Battery Checkup'>Battery Checkup</a>
<a href="#" rel="image3" title='Choki Dhani'>Choki Dhani</a>
<a href="#" rel="image4" title='Wah Ustad Wah'>Wah Ustad Wah</a>
<a href="#" rel="image5" title='In Goa'>In Goa</a>
<a href="#" rel="image6" title='Ganja Man'>Ganja Man</a>
</div>

</body>
</html>

our basic html is ready so lets do some styling

CSS

#fademe{float:left;width:600px;margin: 0 auto;}
#fademe img{
border:5px solid #DDDDDD;}
#selectors{float: left;}
#selectors a{display:block;padding: 4px;}

Add awesome jQuery framework into action

<script src="js/jquery-1.3.2.min.js"></script>

we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function()
{

})

On loading of dom we need to change opacity of each image present in the div of id #fademe, lets change it to <strong>o.2</strong>.

$('#fademe img').css({'opacity':'0.2'})

Now we need a click event on the links, onclick we will store rel attribut of clicked link in a variable after that change the opacity of the image whose id is not same of the clicked link and vice versa.

$('#selectors a').click(function()
{
var whichImage    = $(this).attr('rel');
$('#fademe img:not(#'+whichImage+')').fadeTo('slow',0.2);
$('#fademe img#'+whichImage+'').fadeTo('slow',1);
return false;
});

That’s it

Complete source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Image Fade</title>
	<style>

	#fademe{float:left;width:600px;margin: 0 auto;}
	#fademe img{
				border:5px solid #DDDDDD;}
	#selectors{float: left;}
	#selectors a{display:block;padding: 4px;}
	#selectors a.selected{background-color: #cccccc;}
</style>
	<script src="js/jquery-1.3.2.min.js"></script>
	<script>
		$(document).ready(function()
		{
			$('#fademe img').css({'opacity':'0.2'});
			$('#selectors a').click(function()
			{
				var whichImage	= $(this).attr('rel');
				$('#fademe img:not(#'+whichImage+')').fadeTo('slow',0.2);
				$('#fademe img#'+whichImage+'').fadeTo('slow',1);
				return false;
			});
		})
	</script>
</head>

<body>

<div id="fademe">
	<img src="images/1.jpg" id="image1" title='Four Friends' />
	<img src="images/2.jpg" id="image2" title='Battery Checkup'/>
	<img src="images/3.jpg" id="image3" title='Choki Dhani'/>
	<img src="images/4.jpg" id="image4" title='Wah Ustad Wah'/>
	<img src="images/6.jpg" id="image5" title='In Goa'/>
	<img src="images/9.jpg" id="image6" title='Ganja Man'/>
</div>
<div id='selectors'>
	<a href="#" rel="image1" title='Four Friends' >Four Friends</a>
	<a href="#" rel="image2" title='Battery Checkup'>Battery Checkup</a>
	<a href="#" rel="image3" title='Choki Dhani'>Choki Dhani</a>
	<a href="#" rel="image4" title='Wah Ustad Wah'>Wah Ustad Wah</a>
	<a href="#" rel="image5" title='In Goa'>In Goa</a>
	<a href="#" rel="image6" title='Ganja Man'>Ganja Man</a>
</div>

</body>
</html>

blog comments powered by Disqus