This website contains information about old Imagevue X2. 
Indexr Directory Listing
August 24th, 2010By mjau-mjau30 Comments
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:
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 listCSS 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{}
Comments are closed in preparation for new website. Use the forum or contact page.
Hey, very nice website!
You might want to replace that “lorem ipsum” here.
Cheers,
Alex
Done! =)
A feature request:
– make it to display the image to fit the browser resolution.
It shouldn’t be complicated.
I modified an old indexr version to save the resolution in a cookie using javascript and in the php add width= or height= (depending on which of them it was bigger) to match the browser resolution.
Maybe is not a good solution but was a 2min hack :)
Of course it won’t help the mobile devices save traffic …
For this, on the fly resizing + caching (like the thumbnails) should be used i guess.
A feature request:
– make it to display the image to fit the browser resolution.
:DD
Id like so muchhh!
any new update???
Exactly what feature are you looking for? Indexr is a side project which is meant to be a minimal utility script. You can use the INDEXR forum to post requests/feedback/questions:
/forum/viewforum.php?f=46
This looks perfect for my site, nice work . How would I go about removing the file extension and other details from showing and perhaps removing the the filters at the top. oh and how about opening the large image in Lightbox or similar ?
Since this is a single-file script you can simply edit it and delete the part with the filters on top (form class=”pagemenu”, line 517) or add .pagemenu {display: none} in the style section.
To remove file information either delete td class=”thumbtext” in lines 572-585 or add .thumbtext { display: none } to styles.
To add Lightbox, add the script to the head section and in 566 change the link so it looks like this:
<a href="name; ?>” rel=”lightbox”>
This is it I think.
The link string should say:
<a href=”<?= $file->name; ?>” rel=”lightbox”>
Has this been tested with PHP 5.4.3? I can not get it to work at all.
Got it! had to remove &.
Hi
Can the target of the thumbnail be set elsewhere.
I have this in a frame and when I click a thumbnail want the target to be “inner.htm”.
Can this be done and what code do I use and which line?
Regads
I believe you just need to edit line 566 and 574. Just add target=”inner.htm”
Is there a way to get it to display folders?
Sorry, not at the moment, but we will consider this for the future update.
> doesn’t list subfolders
this is a deal-breaker for me making this script useless
Is there a way to force a new column? How many files have to list before it goes to a new column?
It always displays 3 columns, you can change this in line 59:
define(‘NUMBER_OF_COLUMNS’, 3);
There are other settings as well that you can edit. The point is to have a single file that you can drop in a folder to display the files inside.
Okay we have moved index to http://github.com/firedev/indexr it should allow us to keep track of suggestions. And I have even created the first issue about subfolders. https://github.com/firedev/indexr/issues/1
This is very nice script. Two things –
1. Doesn’t seem to show vertical pictures properly. Should it rotate them up?
2. It would be nice to click the right side of the image to go to the next image and click the left side to go to the previous image.
For now I have added your issues to github as well.
Beautiful script… 99% what I’m looking for!
How could I go about adding a “Download Photo” link next to each image (both in thumbnail view and in full size view)? Clicking the link should prompt the user where to save the photo on his/her computer. I’d like to avoid the right-click, download method if possible.
Thanks!!
Ray
I will add it to issues for now.
That is outside the scope of this simple script … That would require coding the backend PHP to change the header of a file, so that instead of loading into a page, it will prompt to download instead.
Actually, i found a solution quite easily (thanks to Google search)…
I added the following line to the .htaccess file:
——————
AddType application/octet-stream .jpg
——————
Worked like a charm!
Ray
I’m trying to modify the script to display the contents of a sub-directory (don’t want the script in the directory itself for now).
I have edited line 60 to the following:
define(‘DIRNAME’, dirname(__FILE__) . ‘/sub1/sub2/sub3/’);
When I re-load the script, the page shows the “alt” placeholders for the photos INSIDE sub3 correctly, but the images themselves aren’t shown. I checked the sub3 folder, and a new “thumbs” folder was created inside, but that folder is empty (no physical thumbs created).
I’ve scoured the code, and most file/folder actions are accomplished using the DIRNAME variable, which I appear to have set correctly (judging by the images trying to display and the creation of the thumbs directory). What have I missed editing to keep this folder structure transparent to the script?
Thanks again,
Ray
Hi There,
Awesome script! Realy neat :) But can it also generate thumbnails from pdf files?
Gr,
Bram
Unfortunately, that would require a specific PHP module on your server called “Imagemagik”, else your server is simply not capable of creating thumbnails from PDF files. Since imagemagik is largely unavailable to most servers, Indexr has been built without it …
Hey Mjau-Mjau,
Thanks for your reply! If I could get Imagemagik installed onto
my server would it than be easy to enable indexr to make thumbs
of pdf’s as well? You see, I run a graphic design company and allmost
all of the files I hand out to my clients are in PDF format because
of their capability to include vector’s and such. So it would be realy nice
if I could offer some thumbs to ;)
It certainly possible, but I gotta find a bit of time to fix this first. Could you please add this to Issues on https://github.com/firedev/indexr/issues/? Thanks