Unable to get a jQuery script work in Firefox

Question

I have the rotatePics jquery script in my webpage:

$(document).ready(function(){
  rotatePics(1);
});

function rotatePics(currentPhoto) {
  var numberOfPhotos = $('.photos img').length;
  currentPhoto = currentPhoto % numberOfPhotos;

  $('.photos img').eq(currentPhoto).fadeOut(function() {
  // re-order the z-index
    $('.photos img').each(function(i) {
      $(this).css(
        'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
      );
    });
    $(this).show();
    setTimeout(function() {rotatePics(++currentPhoto);}, 5000);
  });
}

I have the following in my header section of the homepage:

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Here is the HTML in the homepage:

<div id="imageanimation">
  <table id="picturetable">
    <tr>
      <td class="photos"></td>
      <td class="photos"></td>
      <td class="photos"></td>
      <td class="photos"></td>
    </tr>
  </table>
</div> <!-- close imageanimation div -->

 <!-- Your website would not let me upload images -->

Here is the CSS:

#picturetable {
 float:left;
 height:212px;
 margin:0 auto;
 position:relative;
 left:15px;
 z-index:-1;
 }

.photos img {
  position: absolute;
}

.photos {
  width: 212px;;
  height: 212px;
  overflow: hidden;
  padding:5px;
  padding-top:10px;
  padding-bottom:10px;
}

What am I doing wrong?

Answer 1

Try to move

function rotatePics(currentPhoto) {
   ...
}

Before the

$(document).ready(function(){
  rotatePics(1);
});

Also, install the firebug plugin and see if it gives any error.

Answer 2

You are trying to select by position but eq() require a selector. you probably meant

$('.photos:eq('+currentPhoto+') img')

Answer 3

now let me guess....you would like something like this http://jsfiddle.net/WzVWj/. hit the Run button to see. anyway, next time use jsfiddle to describe your problem better as Matt suggested