HI guys, I was reading some tutorial about a crossfading gallery, and I am having a few problems understanding it

Here's the code.
HTML (just the relevant bits)

...  
      <div id="photos">
        <img alt="Glendatronix" src="../../images/glenda_200.jpg" />
        <img alt="Darth Fader" src="../../images/fader_200.jpg" />
        <img alt="Beau Dandy" src="../../images/beau_200.jpg" />
        <img alt="Johnny Stardust" src="../../images/johnny_200.jpg" />
        <img alt="Mo' Fat" src="../../images/mofat_200.jpg" />
     </div>
...

CSS

#photos img {
  position: absolute;
}

#photos {
  width: 180px;
  height: 200px;
  overflow: hidden;
}

SCRIPT

$(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);}, 4000);
  });
}

Now,in the script we call the function rotatePics with a numerical parameter (why 1 and not 0?).
AT the first round currentPhoto in function rotatePics(currentPhoto) { is 1, then we assign numberOfPhotos the number of the pictures (5) and then the currentPhoto value is the result of currentPhoto % numberOfPhotos;
which is 1%5, so 1. IN general the modulus operation will always give a value smaller than the number of pictures, so between 0 and 4, so I wonder what happens at picture 5 and picture 0 since we pass the function a 1 and not a 0?
Next line $('#photos img').eq(currentPhoto).fadeOut(function() { selects the picture with the currentPhoto index, which at the moment is 1 and the fadeOut method calls a function
where the css of the current image (again 1 in this case because the parameter i is 1) is changed, specifically the z-index which with this operation will always equal to 0. So
$(this).css( selects the current css's image (agin current image is 1 so it's z-index is now 0) but $(this).show(); too refers to picture 1 so how can we then show this picture is it has a
z-index of 0?

Recommended Answers

All 3 Replies

I agree that the code you show is confusing. It would have made sense to start at zero. The problem this code has is that it wants to use currentPhoto for the eq() function (which is one-based).

quite a bit, but unfortunately that's what the author has used. Is my analysis of the code somewhat correct? Clearly I am missing something but not quite sure what it is

Yes, analysis appears correct.

I am sure that knowing this, you can make a better one ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.