Change image on time does not work (can’t find whats causing it)

1 Views

I want to make slideshow in wordpress, but for some reason it doesn’t work:

my .js file:

Read More
(function ($) {
    function slideSwitch() {
        var $active = $('#gallery1 IMG.active');

        if ( $active.length == 0 ) $active = $('#gallery1 IMG:last');

        var $next =  $active.next().length ? $active.next()
                : $('#gallery1 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 );
    });

});

CSS styles: 

#gallery1{
    position: relative;
    width:400px;
    height:300px;
}
#gallery1 img{
    position:absolute;
    z-index:8;
}
#gallery1 img.active{
    z-index:10;
}
#gallery1 img.last-active{
    z-index:9;
}

html code: 

 <div id="gallery1">
 <img src="img1.jpg" class="active"/>
 <img src="img2.jpg"/>
 <img src="img3.jpg"/>
  </div>

Chromes developer tools doesn’t show any errors. While firebug, shows this error:
error breakpoints:

But I don’t get it what’s wrong with first image, it loads fine.
Does anyone see the problem?

Post Views: 1

Related posts

Leave a Reply

5 comments

  1. @nez is correct in that your function will not be executed when the DOM is ready because of how you declare your anonymous function. It should look like this:

    (function ($) { 
    function slideSwitch() {
        var $active = $('#gallery1 IMG.active');

        if ( $active.length == 0 ) $active = $('#gallery1 IMG:last');

        var $next =  $active.next().length ? $active.next()
                : $('#gallery1 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 );
    });
}(jQuery));

    This declaration is helpful to make sure that your plugin doesn’t collide with other libraries that might use the dollar sign, it’s a best practice to pass jQuery to an IIFE (Immediately Invoked Function Expression) that maps it to the dollar sign so it can’t be overwritten by another library in the scope of its execution. Straight from their documenation:

    http://docs.jquery.com/Plugins/Authoring

  2. You are doing it wrong.

    You need a no conflict version of JQuery which will run along side prototype by aliasing it as shown in this link: http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

    Then make your code:

    var $j = jQuery.noConflict();

function slideSwitch() {
    var $active = $j('#gallery1 IMG.active');

    if ( $active.length == 0 ) $active = $j('#gallery1 IMG:last');

    var $next =  $active.next().length ? $active.next()
            : $j('#gallery1 IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$j(function() {
    setInterval( "slideSwitch()", 5000 );
});

  3. I could not figure out what might be going wrong with your code, however, here is an alternative to create a slideshow that uses the SlidesJS jquery plugin.

    $("#slides").slides({
    preload: true,        
    play: 2000,
    pause: 2500        
});

    See it in action here (The above code is towards the bottom in the Javascript editor)

  4. First of all – you never executed the first function (that’s why you see an image and nothing happens).

    Try:

    $(function() {

  var slideSwitch = function () {
    var $active = $('#gallery1 IMG.active'),
      $next;

    if ($active.length == 0) {
      $active = $('#gallery1 IMG:last');
    }

    $next = $active.next().length ? $active.next() : $('#gallery1 IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
      });
  }

  setInterval(slideSwitch, 5000);
});

  5. Ok the answer provided solved my problem (don’t know why that person deleted his answer):
    This one worked:

    var $j = jQuery.noConflict();

function slideSwitch() {
var $active = $j('#gallery1 IMG.active');

if ( $active.length == 0 ) $active = $j('#gallery1 IMG:last');

var $next =  $active.next().length ? $active.next()
        : $j('#gallery1 IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
});

    }

    $j(function() {
setInterval( "slideSwitch()", 5000 );
});