Slide show using jQuery
Slide show using jQuery
ARE YOU READY TO GET INTO THE CODE?
1) create a css file and named it style.css and add the below styles in that and save it.
#demo { padding: 20px; }
#title { font-size: 10px; font-family: Verdana, Helvetica, Arial, sans; }
a#prev, a#next { font-size: 14px; font-family: Verdana, Helvetica, Arial, sans; color: #000; text-decoration: none; }
a#prev:hover, a#next:hover {text-decoration: underline; }
.pics {
height: 222px;
width: 222px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
.nav { margin: 5px 0 }
#nav a { margin: 0 2px; padding: 3px 5px; border: 1px solid #ccc; background: #fff; text-decoration: none }
#nav a.activeSlide { background: #ccc }
#nav a:focus { outline: none; }
2) Download Jquery “jquery-1.3.2.min.js" Download Jquery
3)Download Jquery Cycle plugin -- “jquery.cycle.all.min.js” click to download and save it as jquery.cycle.all.min.js.
4) Now Create a blank html page with your favorite editor and save it as test.html
Now save the below code in test.html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">< head >
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/ >
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JQuery Example 1</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
});
</script>
</link></meta></head>
<body>
<div id="demo">
<a id="prev" href="#">prev</a> | <a id="next" href="#">next</a>
<div id="slideshow" class="pics">
<img src="images/beach1.jpg" alt="This is First"/>
<img src="images/beach2.jpg" alt="This is Second"/>
<img src="images/beach3.jpg" alt="This is Third"/>
</div>
<div id="title"></div>
</div>
</body>
</html>
thats it check it in your favorite browser.
