I've made my decision

I've decided. I'm going to thoroughly educate myself in JQuery/ Javascript before I attempt the photo gallery. I learn best when I take notes...so here goes!

http://www.w3schools.com/jquery/
<script type="text/javascript" src="jquery.js"></script>Can be used to embed javascript files. Which is really handy when you have long confusing lines code. Oh and remember to put all the stuff in the header if it's in the actual file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>This is the JQuery library. Always include it.

$(selector).action()
This is the syntax.
$ defines JQuery
Selector means things such as this, "p", "p.insertclassnamehere", "#elementswiththisid"
You can select pretty much anything. http://www.w3schools.com/jquery/jquery_selectors.asp
Actions is the thing you do with the selector such as hide(), show().
Hide() and Show() are actually...
hide/show(speed, callback)
Speed is how fast it happens. It can fade in/out and can "fast", "slow", "normal", ___miliseconds
Callback means what happens after all this is done.For example

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

After P is hidden, callback makes the alert spring up.
Toggle() is similar just loads better since it's hide and show combined together. It also has speed and callback
There's also slideUp, slideDown, slideToggle, fadeIn, fadeOut, all with speed and callback
fadeTo has speed, opacity (with 0-1 i think) and callback in that order

There's also html() which changes text to other text

$("p").html("W3Schools");

this changes stuff with p tags to the words "w3schools"
prepend() and append() are similar. Append adds it to the end and prepend adds it to the front

$(document).ready(function(){Insertstuffyouwanttodo});

This ensures that the document is fully loaded before anything runs/ executes. It means "when the DOCUMENT is READY do the FUNCTION of....whatever"
Therefore this kind of thing works too...
$("button").click(function(){})
"when the thing with the BUTTON tag is CLICKED do the FUNCTION of...whatever"
this "whatever" could be
$("p").hide();which means "If it has P tags, hide it."

I think the CLICK is called an event handler. Other event handlers are...
ready, click, dblclick, mouseover

$(selector).animate({params},[speed],[easing],[callback])
Phew. this is crazy. It's custom animation. Okay, we've gone through selector already, animate is an action, gone through callbacks and speed
So params is CSS properties. Just list them out like this

{width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}

 

CSS

css("name") returns the property value of the "name"

css("name","value") sets the css value to "value" for the "name"

css({"property":"value"} assigns css properties (for example

    $("p").css({"background-color":"yellow","font-size":"200%"});
height/width ("__px"); changes the size