Image Browser

Sometimes a client will provide a bunch of photos – which is great – but when they’re in a bunch of different folders, it can be hard to sort through and find the right one. So, just toss your web-friendly photos into a directory on their website, and use the script below to nicely display all the photos.

It makes thumbnails (with my ThumbFly script from earlier) and saves them to a temp directory for caching. Photos are sorted by sub-directory, and the image name is revealed on hover. It’s easy to make this script modal-box friendly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Image Browser</title>
	<style type="text/css">
	<!--
	*{margin:0;padding:0;outline:0;}
	.clear{clear:both;}
	h2 {clear:both;margin: 5px 0 20px 0;background:#f3f3f3;padding:3px;border: 1px solid #555;}
	body {background:#292929;text-align:center;font-size: 62.5%;font-family:Verdana, Geneva, sans-serif;}
	#page {background:#fff; width:960px;margin: 20px auto;padding:20px;text-align:left;overflow:hidden;}
	a {display:block;width:125px;height:125px;overflow:hidden;margin:3px;float:left;position:relative;border: 1px solid #555;}
	a span {position:absolute;bottom:200px;left:0px;width:125px;background:#ccc;line-height:14px;}
	a:hover span {bottom:0px;}
	a img {border:none;}
	-->
	</style>
	<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.colorbox-min-1.3.6.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	$("a[href$='jpg']").colorbox();
	});
	</script>
</head>

<body id="home">
	<div id="page">
	Click to enlarge.
<?php

function get_imgs($type) {
	$i = '0';
	foreach(glob("*.$type") as $img) {
		echo '<a href="'.$img.'" title="'.$img.'" rel="'.$dir.'" class="popup">';
		echo '<img src="'.thumbfly( array( 'src' => $img, 'w' => 125, 'h' => 125 ) ). '" title="'.$img.'" />';
		echo '<span>'.$img.'</span>';
		echo '</a>'."n";
		++$i;
	}
	foreach(glob("*/",GLOB_ONLYDIR) as $dir) {
		if ($dir == 'tmp-tf/') continue;
		echo '<h2>'.$dir.'</h2>';
		foreach(glob("$dir*.$type") as $img) {
			echo '<a href="'.$img.'" title="'.$img.'" rel="'.$dir.'" class="popup">';
			echo '<img src="'.thumbfly( array( 'src' => $img, 'w' => 125, 'h' => 125) ). '" title="'.$img.'" />';
			echo '<span>'.str_replace(dirname($img),'',$img).'</span>';
			echo '</a>'."n";
			++$i;
		}
	}
	echo '<p class="clear">' . $i . ' ' . $type . ' match' . ( ($i != '1') ? 'es' : '' ) . '</p>';
}
	get_imgs('jpg'); repeat for 'gif' and/or 'png'
?>
<?php include('tf.php'); /*include ThumbFly function*/ ?>
	</div>
</body>
</html>

Leave a Reply

Your email address will not be published.

%d bloggers like this: