Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jQuery slideshow: what is the idea behind it...

    Hi,
    I have been spending whole evening to understand the code below which i got it from elsewhere,

    Code:
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
    
    </script>
    
    <style type="text/css">
    #slideshow {
        position:relative;
        height:350px;
    }
    
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    
    #slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }
    
    #slideshow IMG.last-active {
        z-index:9;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="slideshow">
        <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
        <img src="image2.jpg" alt="Slideshow Image 2" />
        <img src="image3.jpg" alt="Slideshow Image 3" />
        <img src="image4.jpg" alt="Slideshow Image 4" />
        <img src="image5.jpg" alt="Slideshow Image 5" />
    </div>
    
    </body>
    </html>
    but i still not sure what is the idea behind making the slideshow and I definitely still cannot understand what these two lines mean and what they are for!? 'IMG:last', 'IMG:first' - are 'last' and 'first' part of CSS standard??

    Code:
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');
    This is my own code so far,

    Code:
    function slideSwitch() 
    {
    var $active = $('#contents li.active');
    $active.hide();	
    
    var $next =  $active.next();
    $next.addClass('active');
       
    }
    
    $(function() {
        setInterval( "slideSwitch()", 1000 );
    });
    
    
    <div id="contents">
        <ul>
        <li><img src="image1.jpg" alt="Slideshow Image 1" class="active" /></li>
        <li><img src="image2.jpg" alt="Slideshow Image 2" /></li>
        <li><img src="image3.jpg" alt="Slideshow Image 3" /></li>
        <li><img src="image4.jpg" alt="Slideshow Image 4" /></li>
        <li><img src="image5.jpg" alt="Slideshow Image 5" /></li>
        </ul>
    </div>
    I only managed to hide the .active one but it will not appear again in the next loop!

    What can I do??

    Many thanks if u can look into it for me please...

    L

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    The IMG:first is a jQuery selector filter. jQuery uses a combination of standard CSS and XPath syntax, but don't confuse jQuery code for CSS code, they just use the same syntax.

    http://docs.jquery.com/Selectors/first


  •  

    Posting Permissions

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