JQuery picture load

Question

Hi everyone,

I need some help in jQuery. What I'm trying to do is to create some sort of a small picture gallery. In this gallery I've got a couple of small pics and one big pic. By clicking a small picture I want jQuery to load and replace the big picture.

Here's a little try which does not work! But probably someone could tell me why.

$(function(){
   $("a.smallpics").click(function(e){
      $(".bigpic")
      .load(function () {
       $(this).hide();
       $('#loader')
      .append(this);
            .removeClass('loading')
       $(this).fadeIn();
      });
      .attr('src', this.href);
      e.preventDefault();
   });
});

and the html

<a href="pic1_big.jpg" class="smallpics" /><img src="pic1_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic2_big.jpg" class="smallpics" /><img src="pic2_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic3_big.jpg" class="smallpics" /><img src="pic3_small.jpg" style="width: 20px; height: 20px" /></a>
<div id="loader" class="loading" /><img src="pic3_big.jpg" class="bigpic" /></div>

So in the best case the script would cover the big picture with a grey half transparent layer, start a spinner and after loading fading the picture in. (Spinner is in background of class 'loading')

Thanks for your help.

Answer 1

You're sort of reinventing the wheel ... for the 4,000,000th time, but it's a good exercise for learning jQuery.

For debugging javascript on a web page nothing beats Firefox + Firebug plugin.

Answer 2

Possibly you are getting a lot of js errors as you are not chaining things correctly, but the logic in your solution is a bit flawed also.

But if I understood your question correctly, you need to hide the bigpic before the load event, and on load event, show it again:

$(function(){
    $('a.smallpics').click(function() {        
        var $bigpic = $('.bigpic');
        var $loader = $('#loader').show();        
        $bigpic.hide().load(function () {
            $loader.fadeOut();
            $(this).fadeIn();
        }).attr('src', $(this).attr('href'));
        return false;
    });
});

Answer 3

You may want to check out this jQuery loader plugin... or this one.