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.gifWhen 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.
4 comments:
Thanks for this posting - it works great in Firefox, Chrome and Safari, but the images won't load in IE7 or IE8 - the frame will appear, but not the actual image
any thoughts on a fix?
I updated the code for "HEADER.html" in the post. I tested it in MSIE8 using both compatibility and standards modes on Vista.
thanks very much - that fixed it - as I said before, thanks for this posting it now works great in ALL browsers - WELL DONE!
Post a Comment