SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with jquery slide show navigation

    I am trying to implement an inline block navigation which can have numbers and a pause button but I don't know how,
    here is the code;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Easy Jquery Auto Slideshow Image Rotator</title>
    <style type="text/css">
    body {
    margin:0;
    padding:0;
    color: #4E3D4E;
    font: normal 0.6em sans-serif, Arial;
    background-color: #EDEDED;
    width: 100%;
    }
    h1 {
    padding-left: 55px;
    font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.0.5em;
    }
    a {
    outline: none;
    }
    </style>

    <style type="text/css">
    /* rotator in-page placement */
    div#rotator {
    position:relative;
    height:345px;
    margin-left: 15px;
    }
    /* rotator css */
    div#rotator ul li {
    float:left;
    position:absolute;
    list-style: none;
    }
    /* rotator image style */
    div#rotator ul li img {
    border:1px solid #ccc;
    padding: 4px;
    background: #FFF;
    }
    div#rotator ul li.show {
    z-index:500
    }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">

    function theRotator() {
    //Set the opacity of all images to 0
    $('div#rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div#rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('rotate()',6000);

    }

    function rotate() {
    //Get the first image
    var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

    };

    $(document).ready(function() {
    //Load the slideshow
    theRotator();
    });
    </script>

    </head>
    <body>

    <h1>Jquery Auto Image Rotator</h1>

    <div id="rotator">
    <ul>
    <li class="show"><a href="#link1"><img src="images/image-1.jpg" width="500" height="313" alt="pic1" /></a></li>
    <li><a href="#link2"><img src="images/image-2.jpg" width="500" height="313" alt="pic2" /></a></li>
    <li><a href="#link3"><img src="images/image-3.jpg" width="500" height="313" alt="pic3" /></a></li>
    <li><a href="#link4"><img src="images/image-4.jpg" width="500" height="313" alt="pic4" /></a></li>
    </ul>
    </div>

    </body>
    </html>

  2. #2
    SitePoint Enthusiast javadecaf's Avatar
    Join Date
    Apr 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This may not be helpful, since your obviously trying to write your own, but have you considered using a pre-written jQuery plugin, such as jQuery Cycle? It's really easy to implement, and you could avoid "reinventing the wheel" as they say. Then again, it may not do everything you want - just thought I'd mention it.


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
  •