Views Grid Display Images Thumbnail Sequently using jQuery I am trying to make an image catalog using views grid. This is what I have done so far.

Created a views grid and gave the test class to each &lt;td&gt;.

tr class="row-1 row-first"&gt;
 &lt;td class="col-1 col-first test"&gt;
 &lt;td class="col-2 test"&gt;
 &lt;td class="col-3 test"&gt;
 &lt;td class="col-4 test"&gt;
 &lt;td class="col-5 col-last test"&gt;
&lt;/tr&gt;


Then I added my custom Javascript to my .info module file. This works since I can confirm it by viewing the page source.

&lt;script type="text/javascript" src="http://localhost/menara/sites/all/themes/angela/js/custom.js?mii0ef"&gt;&lt;/script&gt;


These are the contents of my custom.js :

(function($){
var lis = $('.test').hide(),    i = 0;

(function displayImages() {
        lis.eq(i++).fadeIn(200, displayImages);
})();
})(jQuery);


When I open Mozilla Firefox there is no Javascript error and the effects are not working.

Please guide me to solve this problem. I am following this great tutorial.

Regards,

mbahlol

UPDATE

aha i found it. this is what i do, based on stackoverflow

(function ($) {
$(function(){
var lis = $('.test').hide(), i = 0;
(function displayImages() {
    lis.eq(i++).fadeIn(800, displayImages);
})();               
})
})(jQuery);
First check if your jQuery file is properly called, if its called than you can add jQuery.noConflict(); first and than replace $ sign with jQuery.