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

Question

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

my .js file:

(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?

You may want to verify that your first line is doing what you think it's doing. I don't know where you have this script block defined but if it's in the head or before your images that you've defined then the DOM may not be loaded. Try using the $(document).ready shorthand version which is $(function () { [Here is a previous question on jQuery $(document).ready shorthand](http://stackoverflow.com/questions/6004129/document-ready-shorthand) — JustinMichaels, Aug 02 '12 at 12:03
Can you create an example [jsFiddle](http://jsfiddle.net) that demonstrates the problem? — Anthony Grist, Aug 02 '12 at 12:08
There could be a problem with scopes here, you are extending the JQuery object in a way that I am not sure is supported in ths position. — Sammaye, Aug 02 '12 at 12:08
Infact I am pretty sure if you use: `(function ($) {` you must end with `})(JQuery);` and the function doesn't actually run on page load. — Sammaye, Aug 02 '12 at 12:10

JustinMichaels · Answer 1 · 2012-08-02T12:31:13.570

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

edited Aug 02 '12 at 12:31

answered Aug 02 '12 at 12:24

JustinMichaels

1,092
7
12

Are you still receiving an error when your referencing the dollar sign? – JustinMichaels Aug 02 '12 at 12:49
No, when I use this, I don't get any error, but images do not change. The answer that I written (that person deleted it) is working. – Andrius Aug 02 '12 at 12:51
Sorry, actually it's working. Did you edited? I tried it before, and images didn't change. So both approaches work. Thanks for solution. – Andrius Aug 02 '12 at 12:53
Haha ok because I was thinking that all I am doing is aliasing jQuery to $ inside the scope of the annonymous function. I did not modify the code. I'm glad I could help. – JustinMichaels Aug 02 '12 at 12:55
I checked again and I think last time my browser wasn't refreshed (so it used the other solution), so I thought it is working, but it seems to not be working. So gave best answer for Sammaye – Andrius Aug 02 '12 at 13:17

score 1 · Answer 2 · answered Aug 02 '12 at 12:31

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 );
});

score 0 · Answer 3 · answered Aug 02 '12 at 12:06

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)

score 0 · Answer 4 · answered Aug 02 '12 at 12:12

0

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);
});

answered Aug 02 '12 at 12:12

nez

256
2
6

Maybe you didn't see, but I'm using this function in wordpress, and wordpress do not allow to use $ in jquery. So I have to bypass it. I tried what you suggested and got this error: Uncaught TypeError: Property '$' of object [object Window] is not a function . I was getting this error before I changed function as it is now. – Andrius Aug 02 '12 at 12:24
@oerp first result on Google provides the right code: http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/ – Sammaye Aug 02 '12 at 12:28
Well I tried this one: http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ to be able to use $. Forgot to add (jQuery) at the end, but it doesn't solve it. – Andrius Aug 02 '12 at 12:32
@oerp If you've made changes to your code based on answers provided it's usually a good idea to update the question to reflect that. – Anthony Grist Aug 02 '12 at 12:35
@oerp Are you sure Jquery is actually being loaded into your widget? – Sammaye Aug 02 '12 at 12:38
@oerp Please mark the answer that you used if your problem was solved. – JustinMichaels Aug 02 '12 at 12:45

score 0 · Accepted Answer · answered Aug 02 '12 at 12:43

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 );
});

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

5 Answers5