Indexr

Indexr Directory Listing

Indexr Demo›Download Indexr›

Indexr is a small versatile footprint PHP script that lists images and files in any folder on your server. Simply drop the single index.php file into your directory with files or images, and it will list everything in a nice eye-pleasing manner when accessed.

You can use Indexr to quickly set up small gallery, display files for clients online, or simply to resize all images or create thumbnails in a specific folder. You can change sorting order, thumbnail size, CSS and html layout by simply editing the single index.php file. Not only does Indexr list files in folders, but it also creates thumbnails for images and shows additional file information. If you need a simple but pretty directory listing with thumbnails, try Indexr!

PS! Indexr is FREE to download, and is not related to the Imagevue Gallery.

• List all/any filetypes in a specific directory
• Resize images or create thumbnails on-the-fly for any folder
• Displays thumbnail preview for image formats
• Display full-size images with previous/next navigation
• Sort files by date, name or extension
• Filter files by extension
• Easily Customize CSS and layout

Installation

Simply copy the index.php file into your file directory, and access it from your browser. In the demo below, we simply dropped the Indexr index.php file into our /demo/indexr/ directory:

imagevuex.com/demo/indexr/›

System Requirements

• Web server with PHP4 or greater
• GD2 or ImageMagick is required for thumbnails. One of these will normally exist on your server already.

Customization

You can change some options like sorting, thumbnail-size and allowed extensions by editing the index.php file directly. By changing css and html you can give it any look you want. Simply open index.php in any text-editor.

Options

define('THUMB_PREFIX', 'tn_');
 * Sets the thumbnail prefix to be used

define('THUMB_DIMENSIONS', '120x');
 * Thumbnail dimensions in format of 'WIDTHxHEIGHT'
 * If only the width is specified (e.g. '160x'), all thumbnails will be one width but different height.
 * If only the height is specified (e.g. 'x120'), all thumbnails will be one height but different width.
 * If width and height will be empty both, thumbnail will be a copy of original image.

define('THUMB_QUALITY', '85');
 * Thumbnail JPG quality

define('DATE_FORMAT', 'd M Y');
 * Date format

define('ALLOWED_FILES', '*.png|*.jpg|*.gif|*.mp3|*.htm*|*.txt|*.zip');
 * List of masks for allowed files
 * Empty string means all files allowed.
 * You can use shell wildcards:
 *   * - zero or more characters (any);
 *   ? - exactly one character (any).
 * Divide masks with | character.

define('SORT_METHOD', 'date-');
 * Sorting method with possible values:
 *   - name+ - sort by name ascending
 *   - name- - sort by name descending
 *   - date+ - sort by date ascending
 *   - date- - sort by date descending 

define('NUMBER_OF_COLUMNS', 3);
* Number of columns in directory list

CSS Styles

* { margin: 0; padding: 0; outline:0; }
body { background: black; color: #999; font: 12px/18px "Lucida Grande", Candara, Tahoma; margin: 18px 36px;}
span { color: #333;}
h1, h2, h3, h4 { font-weight: normal; line-height:110%; color: #ffa600;}
h2 { font-size: 18px;}
a { text-decoration: none; color: #ffa600; }
a:visited { color: #bb8816; }
.pagemenu a:visited { color: #ffa600;}
a:hover { color: white;}
a.span { color: #333;}
img { border: 9px solid white; }
td { vertical-align: top; }
table table td { padding: 0 18px 18px 0; }
.thumb { text-align: right; }
.thumb img { border: 4px solid #ccc;}
.thumb img:hover { border: 4px solid white;}
.thumbtext { padding: 4px 0px 0px 0px; }
.imagetext, .pagemenu { padding: 0px 0px 9px 9px; }
.indexr { margin: 18px 0px 0px 0px; }
p { margin: 0 0 9px 0; }
form { }