SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery cycle center images ?

    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/

    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;
        }
      </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. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.ttmt.org.uk/forum/cycle/

    Got it working with

    Code:
    <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.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •