Menu
Center jQuery Cycle slideshow and text
Hi all
I have a slideshow using the jquery cycles plugin.
[url]http://www.ttmt.org.uk/forum/cyclecenter/
The images used have different widths and have titles.
I need to have the slideshow and title centered.
The images are in div’s which also contain the <p> elements.
I’ve done it like this because I’m doing it in WordPress and this is how it’s structured there.
[code]
<div id=”slideshow”>
<div><img src=”01.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”02.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”03.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”04.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”05.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”06.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
</div>
I had the images centered before using this jquery code
[url]http://www.ttmt.org.uk/forum/cycle/
[code]
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slideshow div’).each(function(){
$(this).css({marginLeft: -$(this).width()/2})
});
$(‘#slideshow’).cycle({
fx: ‘fade’,
speed: 800,
timeout: 3000,
pause: 1,
next: ‘#next’,
prev: ‘#prev’,
});
});
</script>
//
#slideshow{
margin:0 auto
}
#slideshow img{
left:50%!important;
background:white
}
but this used this html
[code]
<div id=”slideshow”>
<img src=”01.jpg” alt=”” />
<img src=”02.jpg” alt=”” />
<img src=”03.jpg” alt=”” />
<img src=”04.jpg” alt=”” />
<img src=”05.jpg” alt=”” />
<img src=”06.jpg” alt=”” />
</div>
How can I now center the slideshow and title ?
[code]
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<script type=”text/javascript” src=”http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js”></script>
<style type=”text/css” media=”screen”>
*{
margin:0;
padding:0;
}
/*
#slideshow{
margin:0 auto
}
#slideshow img{
left:50%!important;
background:white
}
*/
#slideshow{
margin:0 auto;
}
#slideshow div{
border: 1px solid green;
background:white;
left:50%!important;
}
#slideshow p{
border: 1px solid red;
text-align:center;
}
</style>
</head>
<body>
<div id=”slideshow”>
<div><img src=”01.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”02.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”03.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”04.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”05.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
<div><img src=”06.jpg” alt=”” /><p class=”wp-caption-text”>Image title</p></div>
</div>
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slideshow div’).each(function(){
$(this).css({marginLeft: -$(this).width()/2})
});
$(‘#slideshow’).cycle({
fx: ‘fade’,
speed: 800,
timeout: 3000,
pause: 1,
next: ‘#next’,
prev: ‘#prev’,
});
});
</script>
</body>
</html>