0

I have a slideshow, its only changing photos. I need to add a new div box on top of each photo. At the moment jquery code takes just #slideshow and .active. How to amend it to grab also new div class ".newbox" (.newbox1 for first photo, .newbox2 for second and so on). Each time a different box has to come up on top of different photos. This is my photo slideshow jquery code:

function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $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>

My html:

div id="slideshow">
   <div class="active">
        <a href="http://www.mylink.com/" target="_blank"><img src="http://route/img.jpg" alt="alt" /></a>

    <div class="newbox1"></div>
div class="newbox2"></div>
div class="newbox3"></div>
div class="newbox4"></div>
div class="newbox5"></div>
    </div>

1 Answer 1

0

You have messed up your HTML at least in the post. You can add active class to the newbox div elements and then get rid of it when the slide is changed. In a word you don't need the div with the "active" class.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.