Could someone explain to a noob how this jquery works to create an image gallery?

Question

I don't understand what's happening here. If someone could explain, I would appreciate it. I need to create a photo gallery and have been recommended to look at this code but I don't understand how it works.

$(document).ready(function(){
  imageSwapper(".thumbnails a");
});

function imageSwapper(link) {
  $(link).click(function(){
    $('#largeimage').attr('src', this.href);
    return false;
  });
};

Answer 1

Like this:

// When the document is ready
$(document).ready(function(){
    // Call this function with this string (a CSS selector)
    imageSwapper(".thumbnails a");
});

function imageSwapper(link) {
    // With all the elements matching link (all the <a>'s under <tag class="thumbnails">)
    // Set their onClick to be this anonymous function
    $(link).click(function(){
        // Get the element with id="largeimage"
        // and set it's src attribute to the href of the link we clicked on
        $('#largeimage').attr('src', this.href);
        // Cancel the default action (don't go to the href of the link we clicked on
        return false;
    });
};

Answer 2

there is a container with class thumbnails on document ready event the line:

 imageSwapper(".thumbnails a");

passes the anchor (a) elements in the said container to the function immageSwapper

in function

 $(link).click(function()

binds the click event of passed anchor element with the function:

function(){
  $('#largeimage').attr('src', this.href);
  return false;
}

which sets the src attribute of image which (* supposedly*) show large images to the value of href attribute of clicked anchor element.

Answer 3

This code binds the click event to all links that are children of an element with class thumbnails. When one of this links is clicked it sets the src attribute of the element with id=largeimage.

The html may be something like this:

<div class="thumbnails">
 <a href="image1.jpg"><img src="thumb1.jpg"/></a>
 <a href="image2.jpg"><img src="thumb2.jpg"/></a>
 <a href="image3.jpg"><img src="thumb3.jpg"/></a>
</div>
<img id="largeimage"/>