Jquery cycle center images?

JavaScript
1

Jquery cycle center images ?

Hi all

I’m using the jQuery cycles plugin to create a slideshow.

The images have different widths how.

How can I keep the slideshow centered when the images change width.

http://www.ttmt.org.uk/forum/cycle/


<!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;
    }
  </style>


</head>

<body>

  <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><!-- #slideshow -->


  <script type="text/javascript">

    $(document).ready(function() {
       $('#slideshow').cycle({
            fx: 'fade',
            speed: 800,
            timeout: 3000,
            pause:     1,
            next: '#next',
            prev: '#prev',
        });
    });

  </script>

</body>

</html>
2

http://www.ttmt.org.uk/forum/cycle/

Got it working with


<script type="text/javascript">

    $(document).ready(function() {
       $('#slideshow').cycle({
            fx: 'fade',
            speed: 800,
            timeout: 3000,
            pause:     1,
            next: '#next',
            prev: '#prev',
            before: function() { 
              //$('#slideshow').animtae({$(this).css({left: '50%', marginLeft: -$(this).width()/2}) }); 
              $('#slideshow').css({left: '50%', marginLeft: -$(this).width()/2});
            }
        });  
    });

  </script>

This seems to working ok but it’s a bit jumpy between the image. Is it possible to animate this movement.

I tried with this, but it doesn’t work and doesn’t look right.


$('#slideshow').animate({$(this).css({left: '50%', marginLeft: -$(this).width()/2}) });