Ashley Hathaway - The Developer

Projects

Wanna play

Bingo?

Try To Test Your

Memory

FlipThru My

Flashcards

ThisIs A

Photo Gallery

Bingo


B	I	N	G	O



		Free

Click the Shuffle button to get started!

Wanna see my code?
Click on the samples below:

Memory Game

Try to find the matches by clicking on 2 squares.

Wanna see my code?
Click on the samples below:

Flashcards

Selectors

Events

Effects

Select the group of flashcards to study. Use >> or << buttons to navigate. The green button shows the answer.

Wanna see my code?
Click on the samples below:

Photo Gallery

Wanna see my code?
Click on the samples below:

<div id="bingoMainWrapper">
    <div id="bkg">
        <table id="head">
            <th>
                <tr>
                    <td>B</td>
                    <td>I</td>
                    <td>N</td>
                    <td>G</td>
                    <td>O</td>
                </tr>
            </th>
        </table>
        
        <table id="card">
            <tr>
                <td id="0"></td>
                <td id="5"></td>
                <td id="10"></td>
                <td id="14"></td>	
                <td id="19"></td>
            </tr>
            <tr>
                <td id="1"></td>
                <td id="6"></td>
                <td id="11"></td>
                <td id="15"></td>	
                <td id="20"></td>
            </tr>
            <tr>
                <td id="2"></td>
                <td id="7"></td>
                <td id="free">Free</td>
                <td id="16"></td>	
                <td id="21"></td>
            </tr>
            <tr>
                <td id="3"></td>
                <td id="8"></td>
                <td id="12"></td>
                <td id="17"></td>	
                <td id="22"></td>
            </tr>
            <tr>
                <td id="4"></td>
                <td id="9"></td>
                <td id="13"></td>
                <td id="18"></td>	
                <td id="23"></td>
            </tr>
        </table>
    </div>
    
    <button id="shuffle">Shuffle</button>
    
    <div id="ball"></div>
</div>

div#bingoMainWrapper {
	font-family: Futura, sans-serif;
	font-weight: normal;
	width: 233px;
	height: 255px;
}

div#bkg {
	background-color: #0080FF;
	background-image: url(../images/images-bingo/bingobkg.jpg);
	width: 215px;
	height: 190px;
	padding: 5px;
}

table#head {
	margin-left: 6px;
}

table#head td {
	background-color: white;
	color: #0080FF;
	font-weight: bold;
	width: 40px;
	height: 30px;
	border-radius: 10px;
	-moz-border-radius: 12px;
	border: 1px dotted #99CCFF;
}

table#card {
	margin:  0px 0px 25px 5px;
}

table#head tr, table#card tr {
	text-align: center;
}

table#card td {
	border: 1px dotted #99CCFF;
	width: 40px;
	height: 30px;
	color: white;
	border-radius: 10px;
	-moz-border-radius: 12px;
	-o-border: 1px solid red;
}

table#card td#free {
	background-color: white;
	color: #0080FF;
	font-weight: normal;
}

#card td:hover {
	cursor: default;
}

.token {
	background-image: url(../images/images-bingo/token.gif);
	background-repeat: no-repeat;
}

#shuffle {
	float: left;
	margin-top: 10px;
	margin-right: 15px;
}

#ball {
	margin-top: 10px;
	*margin-top: 15px;
}

/* hack for Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
	#ball { margin-top: 15px; }
}

$(function() {
	
	var usedNums = new Array(76);
	var usedNumsShuffle = new Array(76);
	var bingoLetters;
	var letterNum;
	var basic;
	var randomLetter;
	var currentBall;
	var randomNum;
	var tokenedSquares = new Array();
	var myId;
	var bingoArray = [];
	var matchArray = [];
	var letterColumn; //letter of each column (ex: B-I-N-G-O)
	var range; //num within range...so B-has a range of 1-15; I-range is 16-30 and so on
	var activeCard = false; //tells the card whether it can start
	
	matchArray[0] = [];  //match1;
	matchArray[1] = [];  //match2;
	matchArray[2] = [];  //match3;
	matchArray[3] = [];  //match4;
	matchArray[4] = [];  //match5;
	matchArray[5] = [];  //match6;
	matchArray[6] = [];  //match7;
	matchArray[7] = [];  //match8;
	matchArray[8] = [];  //match9;
	matchArray[9] = [];  //match10;
	matchArray[10] = []; //match11;
	matchArray[11] = []; //match12;

bingoArray[0] = [0,5,10,14,19];  //bingo1;
	bingoArray[1] = [1,6,11,15,20];  //bingo2;
	bingoArray[2] = [2,7,16,21];     //bingo3;
	bingoArray[3] = [3,8,12,17,22];  //bingo4;
	bingoArray[4] = [4,9,13,18,23];  //bingo5;
	bingoArray[5] = [0,1,2,3,4];     //bingo6;
	bingoArray[6] = [5,6,7,8,9];     //bingo7;
	bingoArray[7] = [10,11,12,13];   //bingo8;
	bingoArray[8] = [14,15,16,17,18];//bingo9;
	bingoArray[9] = [19,20,21,22,23];//bingo10;
	bingoArray[10] =[0,6,17,23];     //bingo11;
	bingoArray[11] =[4,8,15,19];     //bingo12;
	
	randNumGenerator();
	
	$('#shuffle').click(function() {
		ballShuffle();
		activeCard = true;	
	});
	
	$('#card td:not(#free)').click(function() {
		
		if (activeCard == false) {
			return;	
		}
		
		if ($(this).html() != range) {
			alert('Oops! The current ball is ' + letterColumn + range + '. Now try again.');
		} else {								
			$(this).addClass('token').unbind('click');
		}
		
		/****** adds id to myId variable ***/				
		myId = $(this).attr('id');

findBingo();
		
	}); 
	
	
	///////////////////////////////////////////
	/********** Random Number Generator ******/
	
	function randNumGenerator() {

for (var i=0; i< 24; i++) {
									
			var col = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
			
			do { //randomNum are the 24 numbers used to fill out the card
				
				randomNum = (col[i]*15) + Math.floor(Math.random()*15) + 1;
			
			}//usedNums is the array holding the card nums
			
			while (usedNums[randomNum]); //will run as long as there is a spot to fill

usedNums[randomNum] = true;
			$('#'+i).html(randomNum);
			
		}
	} //end of randNumGenerator()
	
	
	
	
	///////////////////////////////////////////
	/************* Ball Shuffle **************/
	
	function ballShuffle() {
		
		function randomizer() { //picks a random number between 1-5 for column
			return(parseInt(Math.floor(Math.random()*5)+1));
		}
		
		var rand = randomizer();						
			
		do {
			switch(rand) {
				case 1: 
					letterColumn = 'B-';
					range = (Math.floor(Math.random()*15)+1);
					break;
				case 2:
					letterColumn = 'I-';
					range = (Math.floor(Math.random()*15)+16);
					break;
				case 3:
					letterColumn = 'N-';
					range = (Math.floor(Math.random()*15)+31);
					break;
				case 4:
					letterColumn = 'G-';
					range = (Math.floor(Math.random()*15)+45);
					break;
				case 5:
					letterColumn = 'O-';
					range = (Math.floor(Math.random()*15)+61);
					break;
			}
			
		} 
		while (usedNumsShuffle[range])
		
		usedNumsShuffle[range] = true;
			
		$('#ball').html('Current Ball: ' + letterColumn + range);
 
	}; //end of ballShuffle()
	
	
	
	//////////////////////////////////////////
	/********* Searches for Bingos **********/
	
	function findBingo() { // myId is just a variable/container
		
		for (var i=0; i< bingoArray.length; i++) {//loops through 12 times

for (var j=0; j< bingoArray[i].length; j++) {//loops through 4-5 times
				if (myId == bingoArray[i][j]) {
					matchArray[i].push(myId);
				}
			}// j 
			
			if (bingoArray[i].length == matchArray[i].length) {
				alert('Yay! You got a bingo. Now go away.');
				$('#card td:not(#free)').unbind('click');
			};

}// i
		
	}
	
});//end of main opening function

#mainWrapper2 {
	width: 200px;
	height: 200px;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px dotted silver;
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;
	padding: 20px;
	background-color:#0099FF;
}

#mainWrapper2 div {
	color: #0099FF;
	width: 38px;
	height: 38px;
	max-height: 38px;
	text-align: center;
	float: left;
	margin: 5px;
	display: table;
	background-color: white;
	border: 1px dotted silver;
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;		
}

#mainWrapper2 div.main {
	background-color: white;
	border: 1px dotted silver;
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;	
}

.hover {
	-moz-box-shadow: 1px 1px 2px silver;
	-webkit-box-shadow: 1px 1px 2px silver;
	box-shadow: 1px 1px 2px silver;
}

.matching {
	background-color:#FFFBEA;
	border: 1px dotted #FFFBEA;
}

#mainWrapper2 input {
	width: 38px;
	height: 38px;
	border: none;
	text-align: center;
	display: table-cell;
	line-height: 18px;
	padding-right: 0px;
	font-size: 20px;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none; 
}

.lovers {font-family: 'Lovers Quarrel', cursive;}
.parisienne {font-family: 'Parisienne', cursive;}
.sail {font-family: 'Sail', cursive;}
.badscript {font-family: 'Bad Script', cursive;}
.allura {font-family: 'Allura', cursive;}
.haviland {font-family: 'Mr De Haviland', cursive;}
.greatvibes {font-family: 'Great Vibes', cursive;}
.norican {font-family: 'Norican', cursive;}

$(function() {

//the values we have to work with within the set of cards
	var nums = [];
		nums[0] = "<p class='lovers'>A</p>";
		nums[1] = "<p class='parisienne'>A</p>";
		nums[2] = "<p class='sail'>A</p>";
		nums[3] = "<p class='badscript'>A</p>";
		nums[4] = "<p class='allura'>A</p>";
		nums[5] = "<p class='haviland'>A</p>";
		nums[6] = "<p class='greatvibes'>A</p>";
		nums[7] = "<p class='norican'>A</p>";
	
	var array1; //first set of cards
	var array2; //seconds set of cards (matching set)
	var arrayAll; //bot sets of cards
	
	//randomly sorting through the set of cards
	function randomSort() {
		return(parseInt(Math.floor(Math.random()*8)));
	}
	
	//tracks your clicks, or what you select
	var click1 = undefined;
	var click2 = undefined;
	var click1id = undefined;
	var click2id = undefined;
	var clickCounter = 1;
	var matchIds = new Array(); //IDs of matches			
	var td = "";
	var tds = "";
	var tr = "";
	
	//randomly sorts the values within the sets of cards
	array1 = nums.sort(randomSort).toString();
	array2 = nums.sort(randomSort).toString();
	arrayAll = array1 + "," + array2;
	var arrayNums = arrayAll.split(',');
	arrayNums.sort(randomSort);
	
	
	//assigns each card an ID and face value then sticks it in the browser
	for(var i=0; i< arrayNums.length; i++) {
		tds += "<td id='" +i+ "'>" +arrayNums[i]+ "</td>";
		
		if ( i == 0 ) {
			tds = "<tr>" +tds;
		} else if ( i == 3 || i == 7 || i == 11 ) {
			tds += "</tr><tr>";
		} else if ( i == 15 ) {
			tds += "</tr>";
		} 
	}
	
	
	$('#mainWrapper2 table').html(tds);
	
	//hides the values of the cards
	$('#mainWrapper2 table td p').hide();
	
	//placeholder to show and hide the values on the cards
	showHide();
	
	//will show and hide the values with each click
	function showHide() {				
		
		//hover event and hover class are 2 diff things
		$('#mainWrapper2 table td').hover(
			function(){ $(this).addClass('hover') },
			function(){ $(this).removeClass('hover') }
		);	
		
		
//-------------------------------------------------------------------------------------
		$('#mainWrapper2 table td').click(function() {
			
			$('p', this).show(); /* show the value on the card */
			$('p', this).attr('unselectable', 'on'); /* gets rid of text highlighting when you click on a square */
			
			
			// first click===================================
			if ( clickCounter == 1 ) {
				
				// if this is the card you're clicking on or it's your first of an unmatched set
				if (( $(this).attr('id') == click1id ) || ( click1id == undefined )) {
					counterCheck( $(this).attr('id'), $('p', this).attr('class') );
				}
				clickCounter = 2;
			
			
			// second click ==================================
			} else if ( clickCounter == 2 ) { 
				
				// only complete the function if this isn't a dblclick
				if ( $(this).attr('id') != click1id ) { 
					counterCheck( $(this).attr('id'), $('p', this).attr('class') );
				
				// and if it is a double click...
				} else {
					// let's change it to act like a single click
					click2 = click1;
					click2id = click1id;
					clickCounter = 2;	
				}
				
				
			} 
			// ===============================================
			
		}); /* end of mainWrapper td */
		
	
	
	}; /* end of showHide() */
	
	
	/* ---------------------------------------- */
	function counterCheck(position, fontname) {
		
		//-------------------------------------------------
		if ( clickCounter == 1 ) {
			click1 = fontname; // $('p', this).attr('class')
			click1id = position; // $(this).attr('id')
			
			//view();
		
		//-------------------------------------------------
		} else if ( clickCounter == 2 ) {
			click2 = fontname;
			click2id = position;
									
			
			if ( click1 == click2 ) { //if your fonts match up - YOU HAVE A MATCH!
				
				$('#'+ click1id).unbind('hover').removeClass('hover').addClass('matching');
				$('#'+ click2id).unbind('hover').removeClass('hover').addClass('matching');
									
				matchIds[matchIds.length] = click1id;
				matchIds[matchIds.length] = click2id;
				
				loopAction(); //hides the non-matches, shows the matches
				
				if (matchIds.length == 16) { //if you've found all the matches - YAAAAY!
					alert('you won!');
				}
			} else { //if your font styles don't match up
				setTimeout(function(){ //hide the card value after duration - for Safari
					alert('try again');
					loopAction(); 
				}, 200);
				
			}
			
			//view();
			reset();
			clickCounter = 1; 
		}
	}
	
	/* ---------------------------------------- */
	function view() {
		alert('click1: ' + click1 +
			  '\n' + 'click2: ' + click2 +
			  '\n' + 'click1id: ' + click1id +
			  '\n' + 'click2id: ' + click2id +
			  '\n' + 'clickCounter: ' + clickCounter);
			  
	}
	
	/* ---------------------------------------- */
	function reset() {
		click1 = undefined;
		click2 = undefined;
		click1id = undefined;
		click2id = undefined;
		clickCounter = 1;
	}
	
	/* ---------------------------------------- */
	function loopAction() {
		
		$('#mainWrapper2 table td p').each(function() {
			$(this).hide();

for(var a=0; a < matchIds.length; a++) {
				if($(this).parent().attr('id') == matchIds[a]) {
					$(this).show();
					$(this).parent().unbind('click');
				} 
			};					
		});
	}

//resets the values on the cards
	tds = 0;
});

<div id="flashCardWrapper">
    <div id="question" class="flashCard">
        <div id="textBoxQ" class="textBox"></div>
    </div>
    <div id="answer" class="flashCard">
        <div id="textBoxA" class="textBox"></div>
    </div>
</div>

<div id="cardGroups">    
    <div id="innerCardGroups">
        <div id="selectors">Selectors</div>
        <div id="events">Events</div>
        <div id="effects">Effects</div>
    </div>
</div>

div#main {
	width: 400px;
	height: 255px;
}

#flashCardWrapper {
	width: 400px;
	height: 150px;
	margin: 0px 0px 10px 25px;
	font-family: Arial, Helvetica, sans-serif;
}

.flashCard {
	width: 200px;
	height: 150px;
}

#flashCardWrapper div#question {
	background-image:url(../images/images-flashcards/questionCard.png);
	position: absolute;
	z-index: 1;
}

#flashCardWrapper div#answer {
	background-image: url(../images/images-flashcards/answerCard2.png);
	position: absolute;
	left:20px;
	z-index: 0;
}

.textBox {
	width: 120px;
	height: auto;
	max-height: 75px;
	position: absolute;
	top: 60px;
	text-align: center;
}

#textBoxQ {
	font-size: 18px;
	color: rgb(0, 113, 188); 
	left: 55px;
}
			
#textBoxA {
	font-size: 12px;
	color: rgb(0, 146, 69); 
	right: 55px;
}

#btnA {
	background-image: url(../images/images-flashcards/answerBtn.png);
	width: 12px;
	height: 12px;
	z-index: 1000;
	position: absolute;
	top: 180px;
	left: 218px;
}

/* Safari & Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
	button#prevBtn, button#nextBtn { padding: 4px; }
}

/* //////////////////////////// for PREV NEXT BTN ///////////////////////////// */
#prevNextBtnsWrapper {
	width: 105px;
	height: 20px;
	margin: 0px auto;
	font-size: 12px;
}

#prevBtn {
	float: left;
	width: 40px;
}

#nextBtn {
	float: right;
	width: 40px;
}

/* //////////////////////////// for TABLE THUMBNAILS ///////////////////////// */
#flashcardsTable {
	height: 40px;
	width: 365px;
	display: block;
	margin: 10px auto;
	table-layout: fixed;
	font-family: Arial, Helvetica, sans-serif;
}

#flashcardsTable td {
	width: 12px;
	//background: silver !important;
	font-size: 10px;
	text-align: center;
	padding: 4px;
}

td.tdBlue {
	background: rgb(116, 187, 222) !important;
}

/* //////////////////////////// for flashcard subject groupings ///////////////////////// */
#cardGroups {
	height: 20px;
	margin: 10px 0px;
	color: rgb(0, 113, 188);
}

#innerCardGroups {
	margin: 0px auto;
	height: 30px;
	width: 280px;
}

#innerCardGroups>div {
	float: left;
	margin-right: 30px;
	cursor: pointer;
}

#innerCardGroups div:last-child {
	margin-right: 0px;
}

#innerCardGroups>div:hover {
	color: rgb(0, 146, 69); 
}

$(function() {
	
	$('#answer').hide();	
	
	/* /////////////////// FLASHCARD BTN Functions ///////////////////////// */
	$('#btnA').toggle(
		function() {
			$('#answer').fadeIn().animate({left: "225px"}, 300);
		},
		function() {
			$('#answer').animate({left: "25px"}, 300);
			$('#answer').fadeOut();
		}
	);

/* ////////////////////// text GENERATOR functions ///////////////////// */
	/* ///////// jQuery Selectors flash cards /////////// */
	var selectorsQ = [];
	selectorsQ[0] = ":first";
	selectorsQ[1] = ":last";
	selectorsQ[2] = ":even";
	selectorsQ[3] = ":odd";
	selectorsQ[4] = ":eq(index)";
	selectorsQ[5] = ":gt(index)";
	selectorsQ[6] = ":lt(index)";
	selectorsQ[7] = ":not(selector)";
	selectorsQ[8] = ":header";
	selectorsQ[9] = ":animated";
	selectorsQ[10] = ":contains(text)";
	selectorsQ[11] = ":empty";
	selectorsQ[12] = ":hidden";
	selectorsQ[13] = ":visible";
	selectorsQ[14] = "[attribute]";
	selectorsQ[15] = "[attribute=value]";
	selectorsQ[16] = "[attribute!=value]";
	selectorsQ[17] = "[attribute$=value]";
	selectorsQ[18] = "[attribute^=value]";
	
	var selectorsA = [];
	selectorsA[0] = "selects the first element";
	selectorsA[1] = "selects the last element";
	selectorsA[2] = "selects all even tr elements";
	selectorsA[3] = "selects all odd tr elements";
	selectorsA[4] = "selects element of a certain index number";
	selectorsA[5] = "selects elements greater than the index number";
	selectorsA[6] = "selects elements less than the index number";
	selectorsA[7] = "will select everything except for specified selector";
	selectorsA[8] = "will select all header elements; ex: h1, h2, h3...";
	selectorsA[9] = "selects all animated elements";
	selectorsA[10] = "will select all elements that contain the specified text";
	selectorsA[11] = "All elements with no child (elements) nodes";
	selectorsA[12] = "All hidden p elements";
	selectorsA[13] = "All visible tables";
	selectorsA[14] = "All elements with a href attribute";
	selectorsA[15] = "All elements with a href attribute value equal to";
	selectorsA[16] = "All elements with a href attribute value not equal to";
	selectorsA[17] = "All elements with a href attribute value ending with";
	selectorsA[18] = "All elements with a href attribute value starting with";
	
	
	/* ///////// jQuery Events flash cards /////////// */
	var eventsQ = [];
	eventsQ[0] = "bind()";
	eventsQ[1] = "blur()";
	eventsQ[2] = "change()";
	eventsQ[3] = "click()";
	eventsQ[4] = "dblclick()";
	eventsQ[5] = "delegate()";
	eventsQ[6] = "die()";
	eventsQ[7] = "error()";
	eventsQ[8] = "focus()";
	eventsQ[9] = "hover()";
	eventsQ[10] = "live()";
	eventsQ[11] = "mouseenter()";
	eventsQ[12] = "ready()";
	eventsQ[13] = "resize()";
	eventsQ[14] = "select()";
	eventsQ[15] = "submit()";
	eventsQ[16] = "toggle()";
	eventsQ[17] = "unbind()";
	
	var eventsA = [];
	eventsA[0] = "Add one or more event handlers to matching elements";
	eventsA[1] = "Triggers, or binds a function to the blur event of selected elements";
	eventsA[2] = "Triggers, or binds a function to the change event of selected elements";
	eventsA[3] = "Triggers, or binds a function to the click event of selected elements";
	eventsA[4] = "Triggers, or binds a function to the dblclick event of selected elements";
	eventsA[5] = "Add one or more event handlers to current, or future, specified child elements";
	eventsA[6] = "Remove all event handlers added with the live() function";
	eventsA[7] = "Triggers, or binds a function to the error event of selected elements";
	eventsA[8] = "Triggers, or binds a function to the focus event of selected elements";
	eventsA[9] = "Binds one or two functions to the hover event of selected elements";
	eventsA[10] = "Add one or more event handlers to current, or future, matching elements";
	eventsA[11] = "Triggers, or binds a function to the mouse enter event of selected elements";
	eventsA[12] = "Binds a function to the ready event of a document";
	eventsA[13] = "Triggers, or binds a function to the resize event of selected elements";
	eventsA[14] = "Triggers, or binds a function to the select event of selected elements";
	eventsA[15] = "Triggers, or binds a function to the submit event of selected elements";
	eventsA[16] = "Binds two or more functions to the toggle between for the click event for selected elements";
	eventsA[17] = "Remove an added event handler from selected elements";
	
	
	/* ///////// jQuery Effects flash cards /////////// */
	var effectsQ = [];
	effectsQ[0] = "animate()";
	effectsQ[1] = "delay()";
	effectsQ[2] = "fadeIn()";
	effectsQ[3] = "fadeOut()";
	effectsQ[4] = "fadeTo()";
	effectsQ[5] = "fadeToggle()";
	effectsQ[6] = "hide()";
	effectsQ[7] = "show()";
	effectsQ[8] = "slideDown()";
	effectsQ[9] = "slideToggle()";
	effectsQ[10] = "stop()";
	effectsQ[11] = "toggle()";
	
	var effectsA = [];
	effectsA[0] = "Performs a custom animation (of a set of CSS properties)";
	effectsA[1] = "Sets a delay for all queued functions for the selected element";
	effectsA[2] = "Gradually changes the opacity from hidden to visible";
	effectsA[3] = "Gradually changes the opacity from visible to hidden";
	effectsA[4] = "Gradually changes the opacity to a specified opacity";
	effectsA[5] = "Toggles between fading in and fading out";
	effectsA[6] = "Hides selected elements";
	effectsA[7] = "Shows hidden selected elements";
	effectsA[8] = "Gradually changes the height from hidden to visible";
	effectsA[9] = "Toggles between slideUp() and slideDown() for selected elements";
	effectsA[10] = "Stops a running animation on selected elements";
	effectsA[11] = "Toggles between hide() and show(), or custom functions";
	
	
	
	
	///////////////////////////////////////

if (i==0) {
				i=ctrlArray[set].questions.length;
		};

i--;

if (i< ctrlArray[set].questions.length) {
			$('#textBoxQ').html(ctrlArray[set].questions[i]);
			$('#textBoxA').html(ctrlArray[set].answers[i]);
				
		};
		
		thumbBuild();
	});	
});/* //////////////////////// end of main script /////////////////////// */

<div id="thumbWrapper" class="floatL">
    <table id="photoGalleryTable">
        <tr>
            <td></td>
            <td></td>
            <td><img src="images/imagesphotoGallery/thumb-rabbit.jpg"></td>
            <td><img src="images/imagesphotoGallery/thumb-myBunny.jpg"></td>
            <td></td>
            <td><img src="images/imagesphotoGallery/thumb-poised.jpg"></td>
        </tr> 
        
        <tr>
            <td></td>
            <td class="blank"><a href="#"></a></td>
            <td><img src="images/imagesphotoGallery/thumb-bunnyGroup.jpg"></td>
            <td><img src="images/imagesphotoGallery/thumb-faceDown2.jpg"></td>
            <td><a href="#"></a></td>
            <td></td>
        </tr>
        
        <tr>
            <td><img src="images/imagesphotoGallery/thumb-faceDown.jpg"></td>
            <td><a href="#"></a></td>
            <td></td>
            <td class="blank"><a href="#"></a></td>
            <td></td>
            <td><img src="images/imagesphotoGallery/thumb-bunnyCups.jpg"></td>
        </tr>
        
        <tr>
            <td></td>
            <td><img src="images/imagesphotoGallery/thumb-goofy.jpg"></a></td>
            <td><a href="#"></a></td>
            <td><img src="images/imagesphotoGallery/thumb-eating.jpg"></td>
            <td class="blank"><a href="#"></a></td>
            <td></td>
        </tr>
        
        <tr>
            <td class="blank"><a href="#"></a></td>
            <td></td>
            <td><img src="images/imagesphotoGallery/thumb-grayStare.jpg"></td>
            <td></td>
            <td><a href="#"></a></td>
            <td><img src="images/imagesphotoGallery/thumb-footsies.jpg"></td>
        </tr>
    </table>
</div>

Projects

Wanna play

Bingo?

Try To Test Your

Memory

FlipThru My

Flashcards

ThisIs A

Photo Gallery

Bingo

HTML

CSS

JavaScript

Memory Game

HTML

CSS

JavaScript

Flashcards

HTML

CSS

JavaScript

Photo Gallery

HTML

CSS

JavaScript