Wednesday, September 26, 2007

Simple Gallery Using htaccess & Javascript

There's alot of great galleries out there for images, one of my old school favorites being a Flash-based one called Imagevuex. Recently I've been using a PHP and MySQL based wallpaper script I wrote myself.

But what if I just want to toss a bunch of images in a folder & have thumbnails for them without having to do a bunch when the contents of the folder changes ?, nothing fancy really.

Well, on a server with all the following, which are pretty standard issue anyway, I can.

  • Apache 1.3+

  • mod_autoindex

  • Ability to override "Indexes" in htaccess

  • A simple HTML file with some Javascript in it



First I create a directory to toss my images in, then I place a file named HEADER.html in that directory with the following contents in the file.
<script type="text/javascript">
var list;
var images;

window.onload = function()
{
list = document.getElementsByTagName('ul')[0];
images = document.getElementsByTagName('li');

for(var i=1; i<images.length; i++)
{
var thumb = images[i].firstChild.cloneNode(true);
thumb.innerHTML = '<img src="' + thumb.href.replace(/^about:/gi, '') + '" alt="' + thumb.href + '" style="max-width:100px; max-height:100px;"/>';
with(thumb.style)
{
width = '120px';
height = '120px';
display = 'block';
cssFloat = 'left';
border = '#ccc 1px solid';
margin = '2px';
padding = '2px';
textAlign = 'center';
}
thumb.onmouseover = function()
{
this.style.borderColor = '#999';
}
thumb.onmouseout = function()
{
this.style.borderColor = '#ccc';
}
list.parentNode.appendChild(thumb);
}
list.style.display = 'none';
}
</script>


What this Javascript does is read the usual directory index HTML that Apache generates & turns it into a bunch of clickable thumbnails once the page has been loaded in the browser.

The following htaccess addition will cause that files' contents to be appended right after the opening <body> element in the document, & tweek some of mod_autoindexes' options to get a simpler output from Apache to work with.
<IfModule mod_autoindex.c>
# Use simple XHTML output
# Ignore case in file sorting
IndexOptions XHTML IgnoreCase

# HeaderName is the name of a file which should be prepended to
# directory indexes.
HeaderName HEADER.html

# Ignore html files, mainly HEADER.html
IndexIgnore .??* *.html
</IfModule>


That last bit causes the directory indexing to skip HTML files, if you only put images in that directory you should be just fine.

So, with those two files & my new directory for photos which I'll call "photos", my structure looks somthing like this.
/photos/.htaccess
/photos/HEADER.html
/photos/image.png
/photos/image.jpg
/photos/image.gif


When I look at http://mysite.net/photos/, I get a screen full of thumbnails instead of a list of images once the page loads, if I toss more images in there I get an updated list & I don't have to update anything !

Now somthing to be well aware of is that each actual image is getting loaded here, not smaller thumbnails as it appears, the CSS used just makes it look like thumbnails are used.
Now, if you have maybe 50 photos that are less than 100KB each in the directory, it's only about the size of an MP3 to download in order see every images' thumbnail, but if you toss images straight from you camera where images tend to be 1MB+ each in that directory you're going to end up waiting about as long as it takes to download 25 MP3s just to see the thumbnails.

In either scenario, you aren't going to have to wait for the full images to load after the thumbnails show up, because the full images will already be loaded at that point.

Tuesday, September 25, 2007

Silky Directory Indexes

I really like the Silk Icons at famfamfam, alot more than the default FancyIndex icons used by Apache2 in fact.
So, now seems like a good time to patch those icons into my directory indexes for FancyIndexing.

First I get the zipfile fill of icons, which is actually a zipfile that has two readme files & a directory called icons in it.

Next I navigate to the directory Apache is already using for icons
Alias /icons/ "/usr/share/apache2/icons/"

In my case it's /usr/share/... look for "Alias /icons" in your *.conf file for Apache to find out where it is for you.

Now, I extract the icons folder from the zipfile into Apaches' icons directory & rename the extracted directory to "silk" so that I have the following.
/usr/share/apache2/icons/silk/


Now to change the icons in the Virtual Host container for the site in question, *.htaccess files could also be used to use different icons per-directory.
I'll start with the ones that have listings already, making the following changes to the AddIcon lines.

AddIconByEncoding (CMP,/icons/silk/page_white_zip.png) x-compress x-gzip

AddIconByType (TXT,/icons/silk/page_white_text.png) text/*
AddIconByType (IMG,/icons/silk/picture.png) image/*
AddIconByType (SND,/icons/silk/sound.png) audio/*
AddIconByType (VID,/icons/silk/film.png) video/*

AddIcon /icons/silk/application_double.png .exe
AddIcon /icons/silk/application_xp_terminal.png .bin
AddIcon /icons/silk/page_white_zip.png .Z .z .tgz .gz .zip
AddIcon /icons/silk/page_white_code.png .shtml
AddIcon /icons/silk/page_white_acrobat.png .pdf
AddIcon /icons/silk/page_white_zip.png .txt
AddIcon /icons/silk/page_white_c.png .c
AddIcon /icons/silk/page_white_cplusplus.png .cpp
AddIcon /icons/silk/page_white_dvd.png .dvi
AddIcon /icons/silk/page_white_gear.png .ini .conf .sh .shar .csh .ksh .tcl
AddIcon /icons/silk/page_white_actionscript.png .as
AddIcon /icons/silk/page_white_flash.png .fla .swf
AddIcon /icons/silk/page_white_freehand.png .fh3 .fh4 .fh5 .fh7 .ft7 .fh8 .ft8 .fh9 .ft9 .fh10 .ft10 .fhx
AddIcon /icons/silk/page_white_h.png .h
AddIcon /icons/silk/page_white_php.png .php .php3 .php4 .php5
AddIcon /icons/silk/page_white_office.png .docx .docm .dotx .dotm
AddIcon /icons/silk/page_white_powerpoint.png .pptx .pptm .potx .potm .ppam .ppsx .ppsm
AddIcon /icons/silk/page_excel.png .xlsx .xlsm .xltx .xltm .xlsb .xlam
AddIcon /icons/silk/page_white_ruby.png .rb
AddIcon /icons/silk/page_white_word.png .doc
AddIcon /icons/silk/css.png .css
AddIcon /icons/silk/html.png .html .htm
AddIcon /icons/silk/xhtml.png .xhtml
AddIcon /icons/silk/script_code.png .js
AddIcon /icons/silk/database_table.png .sql
AddIcon /icons/silk/script_gear.png .inc .pl .py
AddIcon /icons/silk/help.png .chm
AddIcon /icons/silk/music.png .wav .mp3 .ogg

AddIcon /icons/silk/folder_delete.png ..
AddIcon /icons/silk/asterisk_yellow.png README
AddIcon /icons/silk/folder_add.png ^^DIRECTORY^^
AddIcon /icons/blank.gif ^^BLANKICON^^


DefaultIcon /icons/silk/page_white.png


Followed by a restart of Apache for good measure.
sudo /etc/init.d/apache2 restart


I now have silky icons on my directory indexes, but apparently it's going to need a little tweeking to tell the difference between "text/text", "text/html", & "text/css" somewhere.