Center jQuery Cycle slideshow and text

**ttmt** · 03-30-2012 09:06 AM

Center jQuery Cycle slideshow and text

Hi all

I have a slideshow using the jquery cycles plugin.

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

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>

**Padonak** · 03-31-2012 02:03 PM

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">
body{padding:0px;margin:0px;}
#slideshow{text-align:center;width:100&#37;;}
#slideshow div{background:white;width:100%;}
</style>
<script type="text/javascript">
$(window).load(function(){$('#slideshow p').addClass("wp-caption-text");$('#slideshow').cycle({fx:'fade',speed:800,timeout:3000,pause:1,next:'#next',prev:'#prev',});});
</script>
</head>
<body>
<div id="slideshow">
<div><img src="http://www.ttmt.org.uk/forum/cycle/01.jpg" alt="" /><p>Image title 1</p></div>
<div><img src="http://www.ttmt.org.uk/forum/cycle/02.jpg" alt="" /><p>Image title 2</p></div>
<div><img src="http://www.ttmt.org.uk/forum/cycle/03.jpg" alt="" /><p>Image title 3</p></div>
<div><img src="http://www.ttmt.org.uk/forum/cycle/04.jpg" alt="" /><p>Image title 4</p></div>
<div><img src="http://www.ttmt.org.uk/forum/cycle/05.jpg" alt="" /><p>Image title 5</p></div>
<div><img src="http://www.ttmt.org.uk/forum/cycle/06.jpg" alt="" /><p>Image title 6</p></div>
</div>
</body>
</html>

Thread: Center jQuery Cycle slideshow and text

Thread Tools

Display

Center jQuery Cycle slideshow and text

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions