Posted By

kyokutyo on 03/22/08

Tagged

list
image

Versions (?)

Last Edited at 03/22/08 07:39am

Statistics

Viewed 744 times

Favorited by 6 user(s)

Related snippets

Display pictures in the directory

/ Published in: PHP

[directory]
â”œindex.php //this snippet
â”œimageA.jpg
â”œimageB.gif
â””imageC.png

This snipet displays the thumbnail of the picture file that exists in the
same directory.
When the thumbnail image is clicked, the original size image is displayed.

options:
filetype, width, height, pagetitle

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<?php
$fileTypes = array('jpg','jpeg','gif','png');
$width = 100;
$height = 100;
$pageTitle = "Pictures";
 
// *************************************************************
 
$f = join(',*.', $fileTypes);
$f = '*.'.$f;
$height += 20;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title><?php echo $pageTitle; ?></title>
<style type="text/css">
<!--
* { margin:0; padding:0; }
h1 { background:#eee; font-weight:normal; padding:3px 5px; font-size:medium; }
ul { margin-top:10px; list-style:none; }
ul li { width:<?php echo $width; ?>px; height:<?php echo $height; ?>px; float:left; padding:5px; overflow:hidden; margin-bottom:10px; }
ul li span { height:20px; font-size:medium; font-style:italic; }
ul li a img { width:<?php echo $width; ?>px; border:dotted 1px #ddd; }
-->
</style>
  </head>
  <body>
    <h1><?php echo $pageTitle; ?></h1>
    <ul>
<?php $loop = 1; foreach (glob("{".$f."}", GLOB_BRACE) as $fileName) { ?>
      <li>
        <span><?php echo $loop; ?></span>
        <a href="<?php echo $fileName; ?>" target="_blank"><img alt="<?php echo $fileName; ?>" src="<?php echo $fileName; ?>" /></a>
      </li>
<?php $loop++; } ?>
    </ul>
  </body>
</html>