Question

I added this script

<script type="text/javascript">
    var x = 2;
//console.log('Not broken');
$('.email_image li:gt(0)').css({opacity:0});


setInterval(function() {
   // function slideshow() {
    var m = $('.email_image li').size();
    x += 1;
    console.log('Not broken');
    if (x > m) {
        x = 1;
    }
    $(".email_image ul li:visible").animate({
        opacity: 0
    });
    $(".email_image ul li:nth-child(" + (x) + ")").animate({
        opacity: 1
    });
//    }
}, 5000);
    </script>

to the index.php of my template. I want to use the script to create a simple slideshow for some set of images. The loop just runs once and stops. Outside Joomla, it works perfectly but in Joomla, it just runs once and stops. Does Joomla have issues with the setInterval function. What is way around this issue?

Here are the links to the demos in Joomla and out of Joomla respectively
Joomla demo
Outside Joomla demo

Answer 1

Even though jQuery path is correct and included fine but $ returns something other than jQuery (seems like a conflict):

function $(el){if(!el)return null;if(el.htmlElement)return Garbage.collect(el);if([window,document].contains(el))return el;var type=$type(el);if(type=='string'){el=document.getElementById(el);type=(el)?'element':false;}
if(type!='element')return null;if(el.htmlElement)return Garbage.collect(el);if(['object','embed'].contains(el.tagName.toLowerCase()))return el;$extend(el,Element.prototype);el.htmlElement=function(){};return Garbage.collect(el);}

Here is the error coming on console:

Uncaught TypeError: Cannot call method 'css' of null

---

For jQuery, try replacing each instance of $ with jQuery.

Or you can $ like this:

(function($){
   // your code here
})(jQuery);