PhotoDrop - a simple photo gallery

Here is the javascript code. (Requires JQuery)

$(document).ready(function() {
	var id = null;
	var file = null;
	var w = $(window).width();
	var h = $(window).height();
	var thumb = $(".thumb").length;
	$('body').append("<div id='photoZoom'></div>");
	$('body').append("<div id='previous'><</div><div id='next'>></div>");
	$('#photoZoom').append("<img src='' class='fullPhoto'/>");
	$('#photoZoom').hide();
	$('#previous').hide();
	$('#next').hide();
	$('.thumb').click(function() {
		file = $(this).attr("src");  
		id = $(this).attr("id"); 
		$('.fullPhoto').css("max-width", w-100);
		$('.fullPhoto').css("max-height", h-100);
		$('.fullPhoto').css("margin-top", "-800px");
		$('.fullPhoto').attr("src", file);
		$('#photoZoom').fadeIn("fast");
		if(id < thumb){
			$("#next").fadeIn("fast");
		}
		if(id > 1){
			$("#previous").fadeIn("fast");
		}
		$('.fullPhoto').animate({
    		marginTop: 50,
    		opacity:100
  		}, 500, function() {
    		// Animation complete.
  		});
	});
	$('#photoZoom').css("width", w);
	$('#photoZoom').css("height", h);
	$('#photoZoom').click(function() {
		$('.fullPhoto').animate({
    		marginTop: 500,
    		opacity: 0
  		}, 500, function() {
    		// Animation complete.
  		});
  		$(this).fadeOut("slow");
  		$('#previous').fadeOut("fast");
		$('#next').fadeOut("fast");
  		id = null;
	});
	$('#previous').click(function() {
		id = id -1;
		if(id==1){
			$(this).fadeOut("fast");
		}
		file = $("#"+id).attr("src");
		$('.fullPhoto').animate({
    		marginTop: 500,
    		opacity: 0
  		}, 500, function() {
			$('.fullPhoto').css("margin-top", "-800px");
			$('.fullPhoto').attr("src", file);
  			$('.fullPhoto').animate({
    			marginTop: 50,
    			opacity: 100
  			}, 500, function() {
				if(id < thumb){
					$("#next").fadeIn("fast");
				}
				if(id > 1){
					$(this).fadeIn("fast");
				}
  			});
  		});
  	});
	$('#next').click(function() {
		id++;
		if(id==thumb){
			$(this).fadeOut("fast");
		}
		file = $("#"+id).attr("src");
		$('.fullPhoto').animate({
    		marginTop: 500,
    		opacity: 0
  		}, 500, function() {
			$('.fullPhoto').css("margin-top", "-800px");
			$('.fullPhoto').attr("src", file);
  			$('.fullPhoto').animate({
    			marginTop: 50,
    			opacity: 100
  			}, 500, function() {
				if(id < thumb){
					$(this).fadeIn("fast");
				}
				if(id > 1){
					$("#previous").fadeIn("fast");
				}
  			});
  		});
  	});
	$(window).resize(function() {
		w = $(window).width();
		h = $(window).height();
		$('.fullPhoto').css("max-width", w-100);
		$('.fullPhoto').css("max-height", h-100);
		$('#photoZoom').css("width", w);
		$('#photoZoom').css("height", h);
	});
});

CSS Style

.thumb{
	max-width:100px;
	max-height:100px;
	margin:5px;
	cursor:pointer;
}
#photoZoom{
	background-color:#000;
	position:fixed;
	left:0;
	top:0;
	text-align:center;
	overflow:hidden;
}
.fullPhoto{
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-top:-800px;
}
#previous, #next{
	position:fixed;
	font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;
	color:#666;
	background-color:#000;
	padding:10px;
	padding-top:0;
	padding-bottom:25px;
	height:30px;
	width:30px;
	font-size:50px;
	line-height:50px;
	top:48%;
	-moz-border-radius: 10px;
	border-radius: 10px;
	cursor:pointer;
}
#previous{
	left:5px;
}
#next{
	right:5px;
}
#previous:hover, #next:hover{
	color:#fff;
}

This php code generates the actual gallery by loading the images directly from the 'photos' directory

if($handle = opendir('photos')) {
	$x = 1;
	while (false !== ($file = readdir($handle))) {
		if(strpos($file, "jpg") || strpos($file,"jpeg") || strpos($file,"png") || strpos($file,"gif") ){
			echo '
			<img src="photos/'.$file.'" class="thumb" id="'.$x.'"/>
			';
			$x++;
    	}
	}
	closedir($handle);
}

Demo

Code

Download