TeamBalthazar.com

TeamBalthazar.com was a personal project. It is an informative site about a group that my friends and I started called Team Balthazar. The site was designed and coded completely by me. It was writen with PHP, Javascript, JQuery, HTML, and CSS. It also features an integrated wordpress blog.

The most techincally challenging part of creating the site was the photogallery. I like how Facebook's photogallerys function, they encourage visitors to continue clicking through the gallery to see the next picture. So I wanted to create something similar. I wrote the photgallery code with Javascript and the JQuery Library.

First I created two arrays, one to hold the URL's for each image and one to hold the description for each image. I called these arrays "photo_array" and "text_array"

I wanted the users to be able to link directly to images so that they can send specific images to their friends. To achieve this I needed to alter the URL of the page depending on what image was being shown. This was accomplished with this code:

window.location.hash = "#"+photo_array[current_img];

This gets the name of the current image, and appends it to the end of the URL of the page after a pound sign. It also makes the URL somewhat meaningful by stating the name of the image in the URL.

When the page first loads it figures out if the user wants to go to the first image in the gallery, or if they want to see a specific image by checking to see if there is a specified image in the URL. If there is then it loads that image, if there isn't then it loads the first image in the array.

current_img = 0;
if(window.location.hash.substr(1)!=null){
	for(var i = 0; i < photo_array.length; i++){
		if(photo_array[i] === window.location.hash.substr(1)){
			current_img = i;
		}
	}
}

Once the correct image position in the array has been determined the page loads the correct information with this code:

function load_img(){
	var img_url = "images/photo_gallery/"+photo_array[current_img];
	$(".photo_box").attr('src', img_url);
	$(".caption").html(text_array[current_img]);
	window.location.hash = "#"+photo_array[current_img];
}

This sets the source of the image on the page to point to the correct image, and changes the description of the image to the text associated with that image. Then it changes the URL of the page to reflect what image is being shown.

The code then waits for an input from the user and cycles through the images in the array when either the arrow on the page is clicked, or an arrow key is pressed on the keyboard. This is the code for when the user wants to move forward through the gallary. Similar code is used for when they want to see the previous image except that you cycle backwards through the array.

$(".right_arrow").click(function(){
	if(current_img < (photo_array.length-1)){
		current_img = current_img+1;
	}
	else{current_img = 0}
	load_img();
});
        
document.onkeyup = KeyCheck;       
function KeyCheck(e){
	var KeyID = (window.event) ? event.keyCode : e.keyCode;
	switch(KeyID){		  
		case 39:
			if(current_img < (photo_array.length-1)){
				current_img = current_img+1;
			}
			else{current_img = 0}
			load_img();
		break;
	}
}