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>