Question

I know this is going to be super simple for someone but i’ve just spent 2 hours trying to figure it out.

How do I use a function inside of jquery no conflict. I keep getting Uncaught ReferenceError: swapImages is not defined (anonymous function) if I don’t use jquery no conflict the code works fine. (I have to use no conflict as it’s built into WordPress)

jQuery(document).ready(function ($) {
    function swapImages() {
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.show(function () {
            $active.show().removeClass('active');
            $next.show().addClass('active');
        });
    }
    // Run our swapImages() function every 5secs
    setInterval('swapImages()', 500);
})

See the original question here

Answer 1

The problem is that you use setInterval improperly. Never pass a string but always pass a function – passing a string is just as bad as using eval:

setInterval(swapImages, 500);

Then you do not need any global variables/functions.

In case you need to pass any arguments to the function, you’d wrap it in an anonymous function:

setInterval(function() { /* your code/function call */ }, 500);