Menu
Hi
I’m working on a slideshow using the jQuery Cycle plugin (more info @ [url]http://jquery.malsup.com/cycle/
Best wishes
Rachel
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Content rotation with fading effect using JQuery</title>
<script src=”js/jquery-1.3.2.js”></script>
<script src=”js/jquery.cycle/jquery.cycle.all.min.js”></script>
<script type=”text/javascript”>
$.fn.cycle.defaults.timeout = 6000;
$(function() {
// run the code in the markup!
$(‘table pre code’).not(‘#skip,#skip2’).each(function() {
eval($(this).text());
});
$(‘#s2,#s3,#s4’).cycle({
fx: ‘fade’,
speed: ‘fast’,
timeout: 3000,
next: ‘#next2’,
prev: ‘#prev2’
});
$(‘#pause2’).click(function() {
$(‘#s2,#s3,#s4’).cycle(‘pause’);
});
$(‘#resume2’).click(function() {
$(‘#s2,#s3,#s4’).cycle(‘resume’);
});
});
function onBefore() {
$(‘#output’).html(“Scrolling image:<br>” + this.src);
//window.console.log( $(this).parent().children().index(this) );
}
function onAfter() {
$(‘#output’).html(“Scroll complete for:<br>” + this.src)
.append(‘<h3>’ + this.alt + ‘</h3>’);
}
</script>
<style type=”text/css”>
<!–
.description {
font-size: 14px;
text-align:right;
}
.price {
font-size: 24px;
text-align:right;
}
.row {
height: 250px;
width: 400px;
}
.row1 {
height: 150px;
width: 400px;
}
.row3 {
height: 150px;
width: 400px;
}
#s2 .row img {
float: left;
margin-top: 5px;
margin-right: 20px;
}
#s3 .row img {
float: left;
margin-top: 5px;
margin-right: 20px;
}
#s4 .row img {
float: left;
margin-top: 5px;
margin-right: 20px;
}
.clearflt {
clear: both;
}
–>
</style>
</head>
<body>
<table cellspacing=”20″><tr><td>
<h1>Latest Offers</h1>
<div class=”nav”><a id=”prev2″ href=”#”>Prev</a> <input type=”button” id=”pause2″ value=”Pause” /> <input type=”button” id=”resume2″ value=”Resume” /> <a id=”next2″ href=”#”>Next</a></div>
<div id=”s2″ class=”pics”>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
</div>
<div class=”clearflt”> </div>
<div id=”s3″ class=”pics”>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
</div>
<div class=”clearflt”> </div>
<div id=”s4″ class=”pics”>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
<div class=”row”>
<img src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg” width=”200″ height=”200″ />
<p class=”description”>59 Reg vauxhall Corsa 1.0 Life 3 Door</p>
<p class=”price”>From £19999</p>
</div>
</div>
</td></tr>
</table>
</body>
</html>