I'm too tired to comment this atm (it's 4:20 am here); just copy and paste it; when you call it, the page defaults to 6 pictures per page, 3 pictures a row, making 2 rows at offset 0. You can change the default values in the first few lines of code.
$imgWidth specifies the width of the thumbnails, the height is calculated based on it, so the proportions are kept (makes for ugly tables though, if the images are very disparate in height / width ratio).
<?php
//For demonstration only, import the url parameters for limit, offset and images per Row
$g_lim = -1;
$g_off = -1;
$g_pRow = -1;
import_request_variables("gP", "g_");
$offset = ($g_off == -1) ? 0 : $g_off; // Populate via get / post / database whatever
$limit = ($g_lim == -1) ? 6 : $g_lim; // number of images to read per page
$imgPerRow = ($g_pRow == -1) ? 3 : $g_pRow; // images per Row;
$imgWidth = 80;
$counter = 0; // Count the number of images
$pics = array(); // array to store the image names in
$lastImgToDisplay = 0;
// Parse the content of a directory (doesnt parse subdirectories, could be done by recursive call to this function)
function read_directory($directory) {
global $pics, $counter, $offset, $limit, $lastImgToDisplay;
$dir = opendir($directory);
while ($file = readdir($dir)) { //the actual parsing
if ($counter == ($offset + 1) * $limit) { //no need parsing more images than neccessary
$lastImgToDisplay = $counter;
}
if (is_file("$file")) { //make certain the element is a file, not "." or ".." e.g.
if (is_image($file)) { //make sure the file is an image
$pics[$counter] = $file; //add to the image array
$counter++;
}
}
}
if ($lastImgToDisplay == 0) {$lastImgToDisplay = $counter;}
closedir($dir);
}
// Check if a file is an image
function is_image($eval) {
if ((strpos($eval, ".jpg") === false) and (strpos($eval, ".gif") === false)) {
return false;
} else {
return true;
}
}
$directory = getcwd(); //specify the directory
read_directory($directory); //populate the image array
?>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all
function enlarge(which,e){
//Render image code for IE 4+ and NS6
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX
crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY
crossobj.innerHTML='<div align=right id=drag><b onClick=closepreview()>X</b></div><img src="'+which+'">'
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
//Render image code for NS 4
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
//if NOT IE 4+ or NS 4, simply display image in full browser window
else
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
</script>
<script language="JavaScript1.2">
//drag drop function for NS 4////
/////////////////////////////////
var nsx,nsy,nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for IE 4+ and NS6////
/////////////////////////////////
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>
</head>
<body>
<div id="showimage" style="position:absolute;visibility:hidden;border:1px solid black"></div>
<center>
<br><br><br>
<?php if ($counter <> 0) { // make certain there are images to display ?>
<table cellspacing="2" cellpadding="2">
<?php //display the images
for ($i = $offset * $limit; $i < $lastImgToDisplay; $i++) {
if (($i - $offset * $limit) % $imgPerRow == 0) {
print "<tr>\n";
}
$imgData = getImageSize($pics[$i]);
$imgHeight = ($imgWidth / $imgData[0]) * $imgData[1];
print "<td>\n<a href=\"#\" onClick=\"return enlarge('".$pics[$i]."',event)\"><img width=\"$imgWidth\" height=\"$imgHeight\" src=\"$pics[$i]\" border=\"0\"></a>\n</td>\n";
if ((($i - $offset * $limit) % $imgPerRow == $imgPerRow - 1)) {
print "</tr>\n";
}
}
if (($lastImgToDisplay - 1 - $offset * $limit) % $imgPerRow != $imgPerRow - 1) {
for ($i = 0; $i < ($imgPerRow - 1 - (($lastImgToDisplay - 1 - $offset * $limit) % $imgPerRow)); $i++) {
print "<td> </td>";
}
print "</tr>";
}
print "</table><br><br>";
print "<div align=\"center\">";
if ($offset > 0) {
print "<a href=\"picIndex.php?lim=$limit&off=".($offset - 1)."&pRow=$imgPerRow\">Previous</a> ";
}
print "Page ";
for ($i = 0; $i < intval($counter / $limit) + ($counter % $limit > 0 ? 1 : 0); $i++) {
if ($i <> $offset) {
print " <a href=\"picIndex.php?lim=$limit&off=$i&pRow=$imgPerRow\">".($i + 1)."</a>";
} else {
print " <font size=\"+1\"><b>".($i + 1)."</b></font>";
}
}
if (($offset + 1) < (intval($counter / $limit) + ($counter % $limit > 0 ? 1 : 0))) {
print " <a href=\"picIndex.php?lim=$limit&off=".($offset + 1)."&pRow=$imgPerRow\">Next</a>";
}
} else {
print "<tr><td>Sorry, there no images are available at the moment.</td></tr>";
}
?>
</body>
</html>
