www.webdeveloper.com
Results 1 to 2 of 2

Thread: Center jQuery Cycle slideshow and text

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    Center jQuery Cycle slideshow and text

    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>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    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>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles