The 'innerfade' effect with "Images" using jQuery plug-in
In this tutorial , we will discuss about how to implement 'innerfade' effect on images using jQuery plug-in.
In this tutorial , we will discuss about how to implement 'innerfade' effect on images using jQuery plug-in.
The 'innerfade' effect with "Images" using jQuery plug-in
In this tutorial , we will discuss about how to implement 'innerfade' effect
on images using jQuery plug-in. In the below example, the images displays in
table and changes automatically one by one . this effect is due to the 'innerfade'
effect. In html code , the 'innerfade' is applied on the paragraph inside "div"
with id "portfolio".
innerfadeImage.html
<html>
<head>
<title>InnerFade Example</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jqfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#portfolio').innerfade({
animationtype: 'slide',
speed: 'slow',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '280px'
});});
</script>
</head>
<body>
<font color="red"><h2>The InnerFade Effect with Images</h2></font>
<table border=1>
<td height=260 width=280>
<div id="portfolio">
<p><img src="images/jquery1.jpeg" /></p>
<p><img src="images/jquery2.jpeg" /></p>
<p><img src="images/jquery3.jpeg" /></p>
<p><img src="images/jquery4.jpeg" /></p>
<p><img src="images/jquery5.jpeg" /></p>
</td>
</table>
</body>
</html>
|
OUTPUT
The image inside table, changes in every 750 milliseconds :
Download Source Code
Click
here to see demo
