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

lauthiamkok · 06-03-2009, 01:37 AM

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

Fumigator · 06-03-2009, 06:58 PM

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