JQuery :: Passing Information To A .click Function?

I have a basic understanding of selecting elements and performing manipulations or effects, but I'm having real trouble grasping the basics of setting up variables, performing maths on variables and biggest of all, how you go about passing information from the HTML into a jquery function.

I have a site where clicking on any photo thumbnail brings up a full-screen lightbox to display the image full-size - I'm using the following to bring in the lightbox:

$(".photo").click(function(){
$("#lightbox").css({"visibility":"visible","z-index":"2"});
$("#lightbox").stop(true, false).animate({opacity:1},800);
});

This works just fine, I also have no problem re-assigning the SRC of a blank image within the lightbox to make sure the correct image renders, my problem is I just don't know how to generate or pass information into this function to begin with to act as a reference point so the code knows what image it should be displaying based on which thumbnail was clicked.

I don't need anything particularly clever, even if each thumbnail simply had a numerical figure associated with it (eg "4") which gave the function something to work with once it was fired - that would be enough.

I know how to do all this in regular JavaScript but I have to admit I'm finding the documentation for jquery really hard work, I'm having real problems grasping the fact that the functions aren't being triggered directly by the HTML.

Another solution would be to get the src of the image that was clicked on, split the string and pull out just the filename (ie 5.jpg) and then prepend a path to it for the final full size image ( largeimage/ + 5.jpg).

I know there are probably pre-made scripts for this kind of thing but I'd like to try and avoid them if possible.