jquery gallery fade in/out

Question

Hi There,

I am building a simple image gallery based on the following markup:

<div id="image-list">
<ul>
<li id="image-1">
<img src="myimage1.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-2">
<img src="myimage2.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-3">
<img src="myimage3.jpg" width="500" height="500" alt="My Image" />
</li>
</ul>
</div>
<ul id="thumb-list">
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li>
</ul>

I have styled this using CSS so that only one of the larger images is visible at one time (using overflow: hidden with a fixed container height).

I am then using jquery to absolutely position the UL within the container to show each image, using the following markup:

$('#thumb-list li img').click(function() {
    var image = $(this).parent().attr('id').substring(6);
    var position = $('#image-' + image).position();
    $("#image-list ul").css({'top' : '-' + position.top +'px'});
});

Basically I want to fade out the entire "#image-list ul" while it's position is changed and then fade it back in to show the new image.

Could someone suggest the most efficient way to do this? - any help is much appreciated!

Answer 1

Remove the height and width from you img tags, css can take care of that.

CSS

#image-list{

      position:relative; 
      height:500px;
      width:500px;

}

#image-list img{

      height:500px;
      width:500px;

}

#image-list li{

      position:absolute;
      top:0;
      right:0;

}

JS

$('#thumb-list li img').click(function() {

      var image = $(this).parent().attr('id').substring(6);
      $('#image-' + image).fadeIn("slow").siblings().fadeOut("slow");

});

are you using prototype or jquery?

if your using jquery, instead of relying on the .css() function try the .hide() function as it does exactly the same thing as css({'display' : 'none'}). and .fadeIn() will animate the return of your div. on first load they'll all be visible so instead of hiding them with css tell jquery to hide all of them with this command.

$('#thumb-list il').hide();

Answer 2

Another solution might be to use a plug-in and then modify your styles so that your page doesn't look broken if someone has Javascript disabled.

Check out: http://medienfreunde.com/lab/innerfade/

It's quite easy to use and hard to mess up. Good luck! :)