How to make display “AJAX Loading.gif” at image gallery section? (jQuery)

Question

I need a little help, i'm trying how to make display "AJAX loading.gif" is an animated gif at image content.

When you click a thumbnail, the image takes loading but it doesn't show animated gif, i'm wondering how...

http://bksn.mx/opequimar/renta_descripcion.html

JS:

$(".thumbnails a").click(function(){

  $("#bigpic").attr("src", $(this).attr("href"));

  $("#largeimage").attr("href", $(this).attr("rel"));
  $('#bigpic').fadeIn('slow');
  return false;
});

HTML:

Image content:

<div id="novedades_imagepubli">

<a href="img/barco1.jpg" id="largeimage"><span></span><img src="img/barco1.jpg" id="bigpic" width="375" height="250"/></a>


</div>

Thumbnails:

<div class="thumbnails">
<a href="img/1.jpg" rel="img/1.jpg"><img src="img/thumbnails/thumbnail1.jpg" /></a>
<a href="img/2.jpg" rel="img/2.jpg"><img src="img/thumbnails/thumbnail2.jpg" /></a>
</div>

The div of AJAX gif is <div class="ajaxgif"></div> but is not implented yet.

Answer 1

You could try this, first hide your div on page load

<div class="ajaxgif">Loading...</div>

Note that you can also put the animating gif in the div, I put in loading for simplicity.

For your javascript:

$(function(){   
   var gif = $('.ajaxgif'); 
   gif.hide();

   $(".thumbnails a").click(function(e){
     gif.show('slow'); 
     $("#bigpic").attr("src", $(this).attr("href"));
     $("#largeimage").attr("href", $(this).attr("rel"));
     $('#bigpic').fadeIn('slow', function(){ gif.hide('slow') }); 
     e.stopPropagation(); 
   });
});