Views Grid Display Images Thumbnail Sequently using jQuery

Question

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 <td>.

tr class="row-1 row-first">
 <td class="col-1 col-first test">
 <td class="col-2 test">
 <td class="col-3 test">
 <td class="col-4 test">
 <td class="col-5 col-last test">
</tr>

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

<script type="text/javascript" src="http://localhost/menara/sites/all/themes/angela/js/custom.js?mii0ef"></script>

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

Answer 1

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.