Image directory viewer

Image directory viewer script

This script will show all images in a directory in a very nice format. Simply copy the code below, then go to your Ziteman file manager in the directory your images are in click on the "MFile" button. Name the script "browse.php".
Now paste the code below into your editor and click on the save button. Now in your image directory, click on the "browse.php" file and voila!

<?
////////////////////////////////////////////////////////////////////////////////////////////////////////
// NAME:
//  imagebrowser.php
//
// VERSION:
//  Version 1.0 - 18/07/01
//
//  Version 1.2 - 05/10/01 (Jeremy.Bouse@UnderGrid.net)
//    - Cleaned up HTML code so it works on both Netscape and IE cleanly
//	as it appeared to only work under IE as written. Stylesheets still
//	need work for Netscape but work under IE
//
//  Version 1.3 - 12/15/01 (Jeremy.Bouse@UnderGrid.net)
//    - Added a mechanic for including a caption file or use a default
//      caption comment under pictures. Done through include() function so
//      caption file can also include any HTML or even PHP code.
//
//  Version 1.4 - 01/29/02 (Jeremy.Bouse@UnderGrid.net)
//    - Cleaned up bug with thumbnails not showing properly past the first
//      page as was reported to me.
//    - Added code to link number of page links per row to make easier to
//      read. Controlled by $pgperrow configuration declaration.
//  Version 1.5 - 01/17/03 (wu@e-shell.org)
//    - Adapted $ind to work with register_globals=off (default since 
//	php-4.2.0), so $ind is now $_GET['ind']
//  Version 1.6 - 04/30/03 (lajgaard@mail.dk)
//    - I have added four new variables. You can now deside what the
//      maximum sizes of you large pictures and thumbnails should be.
//    - the images are now resized to maintain ratio. The thumbnails
//      are no longer the same size. But you can see what i the picture
//      actually contains.
//	Version 1.7 - 07/19/03 (edman007x@mac.com)
//	  - it is now XHTML 1.0 compliant
//	  - i have added a new varible (scale) to decide if you want to scale
//		the pictures that do not excede the max width/height variable
//	  - fixed a bug where images that were wider than tall could exceed
//		the max height varible and images that were taller than wide could
//		exceed the max width variable
//	Version 1.8 09/23/03 (edman007x@mac.com)
//	  - fixed all the $PHP_SELF varibles to $_SERVER['PHP_SELF'] and 
//      allowed people to specifiy it if PHP_SELF dosen't work($this_page)
//    - fixed a typo in the thumbnail resizing(was $newheight, should be $newthumbh)
//    - added default style style sheet to html output so you don't have to make a
//      style sheet if you use the default(you can still use one if you want to)
//
//
//
//
//
//
//
// AUTHOR:
//  Jo Demol (de_paashaas@yahoo.com)
//
// DESCRIPTION:
//  Drop this file in any directory that you want and it automaticaly generates
//  an easy to use browsable interface for your images
//
// RETURNED VARIABLES:
//  no variables are returned
//
// Configuration Variables
// ======================
//
//    scale      : weather or not to scale the large img to the max height/width if it
//                 does not exceed the max height/width limits
//                 0=don't scale    1=scale
//    maxwidth   : the maximum allowed width of the large picture
//    maxheight  : the maximum allowed height of the large picture
//    thumbmaxw  : the maximum allowed width of the thumbnail
//    thumbmaxh  : the maximum allowed height of the thumbnail
//    imgperpage : the number of thumbnail images displayed
//                 its best to give this a value that is a multiple of imgperrow
//    imgperrow  : the number of thumbnail images per row
//    pgperrow   : the number of page links per row
//    typelist   : array that contains the imagetypes shown by the browser
//    currentdir : default the directory where this php file resides,
//                 can be replaced by any directory of your choice
//    title      : enter the title of your page here
//    home       : enter path to your home directory or any other desired directory
//					(where the home link goes to)
//	  this_page	 : the name of this file, $_SERVER['PHP_SELF'] should work, but if it dosen't
//					just use the file name; this is where all the links to this page go
//    captionext : filename extension placed on caption file with same name
//                	as image. (ie - <image>.<ext>.<captionext>)
//					example: image file sunrise.jpg would use the caption
//					file sunrise.jpg.txt with the default captionext
//    caption    : default caption to place under files if no caption file
//                 exists
//    stylesheet : enter the path to your stylesheet here
//					you may enter just '' to use the default(will embed it in the html)
//					you may also enter 'none' to have no style sheet
//                 the stylesheet should have these classes:
//
//                 .imag { border-style : solid;
//                         border-color: blue;
//                         border-width : 1px;}
//                 .thumb { border-style : solid;
//                          border-color: #999999;
//                          border-width : 2px;}
//                  A:link { color: #999999;
//                           text-decoration : none; }
//                  A:visited { color: #999999;
//                              text-decoration : none; }
//                  A:hover { color:blue; }
//                  any of these classses can be adjusted to your needs
//
//
// USAGE:
// to browse through the images use the back and forward images
// click on one of the thumbnails
// or use one of the pagelinks to go directly to another set of images
// clicking on the large image will give you the full image
/////////////////////////////////////////////////////////////////////////////////////////////////////////

//---Variables---

$scale      = 0;
$maxwidth   = 565;
$maxheight  = 410;
$thumbmaxw  = 75;
$thumbmaxh  = 75;
$imgperpage = 10;
$imgperrow  = 5;
$pgperrow   = 10;
$currentdir = getcwd ();
$typelist   = array("jpg","jpeg","gif","png","JPG");
$imagelist  = array();
$title      = "Images in Directory";
$stylesheet = '' ;
$home       = "{$_SERVER['PHP_SELF']}";
$this_page  = "{$_SERVER['PHP_SELF']}";
$caption    = "";
$captionext = "txt";

//--- ind is put to zero when the script is first called uppon---

if(!isset($_GET['ind'])) 
    $_GET['ind'] = 0;
$index = $_GET['ind'];

//---the following code iterates through the directory and puts any image found in the imagelist array---

$dp=opendir($currentdir);
while ( false != ( $file=readdir($dp) ) ) {
        if (is_file($file) && $file!="." && $file!=".."){

$extention = explode(".",$file);
            $extfield = count($extention)-1;
            $extention = $extention[$extfield];

if( in_array($extention,$typelist) ){
                array_push ($imagelist,$file);
            }
        }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title><?= $title ?></title>
      <?
      if ($stylesheet == ''){
      	//--insert the default style sheet into html if none specified
      	echo '<style type="text/css">'
      		.'.imag { border-style : solid;'
      			.'border-color: blue;'
      			.'border-width : 1px;}'
			.'.thumb { border-style : solid;'
				.'border-color: #999999;'
				.'border-width : 2px;}'
			.'A:link { color: #000000;'
				.'text-decoration : none; }'
			.'A:visited { color: #999999;'
				.'text-decoration : none; }'
			.'A:hover { color:blue; }'
			.'</style>';
      } elseif ($stylesheet == 'none') {
      //--no style sheet if that is what you want
      } else {
      	echo "<link rel=\"STYLESHEET\" href=\"$stylesheet\" />";
      }
      ?>
</head>
<body>

<table align="center" border="0">
 <tr>
  <td>
<?       if($index-1 >= 0) {?>
   <a href='<?= $this_page ?>?ind=<?= $index-1 ?>'>[ prev ]</a>
<?       } ?>
  </td>
  <td>
	  <?

//--- This is where the large pictures are resized so that they maintain ratio---

$sizeee = getimagesize ("$imagelist[$index]");
		$imgwidth = $sizeee[0];
		$imgheight = $sizeee[1];
		
if ($scale == 1 || $imgwidth > $maxwidth || $imgheight > $maxheight) {   // decide if img needs to be scaled	
		$newwidth = $imgwidth/($imgheight/$maxheight);
		$newheight = $imgheight/($imgwidth/$maxwidth);
		if ($imgwidth < $imgheight) {
		
			
			
			
			if ($newwidth > $maxwidth)
			
				{
				
				?>
				<a href="<?= $imagelist[$index] ?>" target="_blank">
					<img src="<?= $imagelist[$index] ?>" width="<?= $maxwidth ?>" height="<?= $newheight ?>" alt="" />
				</a>
				<?
				} else {
				
				?>
				<a href="<?= $imagelist[$index] ?>" target="_blank">
					<img src="<?= $imagelist[$index] ?>" width="<?= $newwidth ?>" height="<?= $maxheight ?>" alt="" />
				</a>
				<?
	 			}
			} else { 
		
			
			if ($newhight > $maxheight)
				
				{
				
				?>
				<a href="<?= $imagelist[$index] ?>" target="_blank">
					<img src="<?= $imagelist[$index] ?>" width="<?= $newwidth ?>" height="<?= $maxheight ?>" alt="" />
				</a>
				<?
				} else {
				
				
				?>
				
				<a href="<?= $imagelist[$index] ?>" target="_blank">
					<img src="<?= $imagelist[$index] ?>" width="<?= $maxwidth ?>" height="<?= $newheight ?>" alt="" />
				</a>
				
				<?
		
	
	   
		}
		}
                } else { ?>
	<a href="<?= $imagelist[$index] ?>" target="_blank">
		<img src="<?= $imagelist[$index] ?>" width="<?= $imgwidth  ?>" height="<?= $imgheight ?>" alt="" />
	</a>
	<?	}
	  ?>
  </td>
  <td>
<?       if($index+1 < count($imagelist) ) {?>
   <a href="<?= $this_page ?>?ind=<?= $index+1 ?>">[ next ]</a>
<?       } ?>
  </td>
 </tr>
 <tr>
  <td>
  </td>
  <td>
   <center><?
         if (file_exists ($imagelist[$index]. "." . $captionext) &&
             is_file ($imagelist[$index]. "." . $captionext) &&
             !is_dir ($imagelist[$index]. "." . $captionext)) 
           include $imagelist[$index]. "." . $captionext;
         else
           echo $caption; ?>
   </center>
  </td>
  <td>
  </td>
 </tr>
</table>

<table align="center">
 <tr><td></td>
<?

//---this code generates the thumbnails based on the configuration settings---

$nrpages = ceil( count($imagelist)/$imgperpage );

for($j=0;$j<$nrpages;$j++)
{
    if( $index >= ($j*$imgperpage) && ($index < (($j+1) * $imgperpage)) ) {
        for($i=($j*$imgperpage);$i<(($j+1) * $imgperpage);$i++) {
            if(($i%$imgperrow == 0) && ($i > 0)) { ?>
 </tr>
 <tr>
<?          } 
            if($i <count($imagelist)  ) {
               $path = "$this_page?ind=".$i; ?>
  <td>

//--- This is where the thumbnails are resized so that they maintain ratio---

$sizeee = getimagesize ("$imagelist[$i]");
		$imgwidth = $sizeee[0];
		$imgheight = $sizeee[1];
		
		$newthumbw = $imgwidth/($imgheight/$thumbmaxh);
		$newthumbh = $imgheight/($imgwidth/$thumbmaxw);
		if ($imgwidth < $imgheight) {
		
			
			
			
			if ($newthumbw > $thumbmaxw)
			
				{
				
				?>
				<a href="<?= $path ?>">
					<img src="<?= $imagelist[$i] ?>" width="<?= $thumbmaxw ?>" height="<?= $newthumbh ?>" alt="" />
				</a>
				<?
				} else {
				
				
				?>
				<a href="<?= $path ?>">
					<img src="<?= $imagelist[$i] ?>" width="<?= $newthumbw ?>" height="<?= $thumbmaxh ?>" alt=""  />
				</a>
				<?
	 			}
			} else { 
		
			
			if ($newthumbh > $thumbmaxh)
				
				{
				
				?>
				<a href="<?= $path ?>">
					<img src="<?= $imagelist[$i] ?>" width="<?= $newthumbw ?>" height="<?= $thumbmaxh ?>" />
				</a>
				<?
				} else {
				
				
				?>
				
				<a href="<?= $path ?>">
					<img src="<?= $imagelist[$i] ?>" width="<?= $thumbmaxw ?>" height="<?= $newthumbh ?>" alt="" />
				</a>
				
				<?
		
	
	   
		}
		}
	  ?>
  </td>
<?          }
        }
    }
}
?>
 </tr>
</table>
<br />
<center>
<?
//---this code generates links based on the configuration settings---
//---only puts $pgperrow page links per row to make cleaner---

for($j=0;$j<$nrpages;$j++) { 
   if(($j%$pgperrow == 0) && ($j > 0)) { ?>
    <br />
<? } ?>
    <a href="<?= $this_page ?>?ind=<?= ($j*$imgperpage) ?>">[page <?= ($j+1) ?>]</a>
<? } ?>
</center>
<center><a href="<?= $home ?>">[ home ]</a></center>
</body>
</html>