Script 11.4 View Uploads

Read all image files from the uploads directory and create an image gallery with thumbnails and image meta data. Onclick - open image preview into fullsize image in a separate window.

Output

Click on a preview to view it fullsize in a separate window.

Source
<p>Click on a preview to view it fullsize in a separate window.</p>
<div class="thumb-gallery">
<?php # Script 11.4 - images.php
// This script lists the images in the uploads directory.

$dir = UPLOAD_DIR; // Define the directory to view.

$files = scandir(UPLOAD_DIR); // Read all the images into an array.

// Display each image thumb and caption as a link to the JavaScript function:
foreach ($files as $image) {

 	// Ignore system files starting with a period and any image with _th suffix
	if(substr($image, 0, 1) != '.' && substr(substr($image, 0,strrpos($image,'.')),-3) != THUMB_SUFFIX) { 
		// Get the image's size in pixels:
		$image_size = getimagesize(UPLOAD_DIR."/$image");

		// Make the image's name URL-safe:
		$image_name = urlencode($image);
		
		// Print the information:
		echo "<a class='gallery-item' href=\"javascript:create_window('$image_name',$image_size[0],$image_size[1])\">".getThumbnail($image)."<p class='image-meta'>$image</p></a>\n";
	}	 

} // End of the foreach loop.
?>
</div>