Question

I need some jquery help. I have a simple image gallery and I’d like to add some jquery effect (particulary fading in/out of the images in #actimg). Keep in mind, Im not very familiar with jquery.

js

<script type="text/javascript">
function showPic (whichpic) {
  if (document.getElementById) {
  document.getElementById('actimg').src = whichpic.href; 
  return false; 
 } else {
  return true;
 } 
}
</script>

and body

<ul>
<li><a onclick="return showPic(this)" href="images/girl_01.jpg"><img height="50px" width="50px" src="images/girl_01.jpg" /></a></li>
<li><a onclick="return showPic(this)" href="images/girl_02.jpg"><img height="50px" width="50px" src="images/girl_02.jpg" /></a></li>
<li><a onclick="return showPic(this)" href="images/girl_03.jpg"><img height="50px" width="50px" src="images/girl_03.jpg" /></a></li>
</ul>

<img id="actimg" src="images/girl_04.jpg" alt="" />

Answer 1

function showPic (whichpic) {
  if (document.getElementById) {
  $('#actimg').fadeOut('slow');
  document.getElementById('actimg').src = whichpic.href; 
  $('#actimg').fadeIn('slow');
  return false; 
 } else {
  return true;
 } 
}

I have added two lines around the line where you change the source of the #actimg img tag. The one just before fades the #actimg out and the one just after fades it back in.

—- EDIT —-

change:

  $('#actimg').fadeOut('slow');
  document.getElementById('actimg').src = whichpic.href; 
  $('#actimg').fadeIn('slow');

to:

  $('#actimg').fadeOut(250);
  setTimeout(function() {
      document.getElementById('actimg').src = whichpic.href; 
      $('#actimg').fadeIn(250);
  }, 250);

This will fadeOut the #actimg element, then it will change the source of that element and fadeIn the element. Note that the fadeOut duration should be the same or less than the duration of the timeout so that the fade can complete before the source of the image is changed.