Using Lightbox with Apache directory listings as an image gallery
Posted by Matt | Tags: apache, directory, gallery, lightbox, tutorial
As you may know, if it can’t find an index.html the apache web server will show a list of files in the current directory. I was browsing through lists of images on my file server the other day and I thought, wouldn’t it be nice to have a next button? So I started digging around.
In the end I used a wonderful little script called Lightbox 2 and a bit of JavaScript Prototype magic to produce this (try clicking on the image files).
The directory listings are provided by an apache module going by the name of mod_autoindex. This module allows you to insert a custom header and footer through the directives HeaderName and ReadmeName. The plan is to insert some HTML that includes the Lightbox code and tags all the links to images with the rel=lightbox attribute that Lightbox uses to function.
Create a directory called lightbox in your server’s document root. Download Lightbox 2 and extract it to that directory (go to http://www.yourwebsite.com/lightbox to try it out). To get the Lightbox ‘loading’ and ‘next’ images to show up, you need to edit a couple of lines in the configuration section of js/lightbox.js that comes with Lightbox. Change the following
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
to look like
LightboxOptions = Object.extend({
fileLoadingImage: '/lightbox/images/loading.gif',
fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
I also adjusted resizeSpeed to 9 to make it feel a little snappier, change this to your taste.
Now create a new file called lightbox.html in your /lightbox directory and copy and paste the following:
<script src="/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="/lightbox/js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// Insert the lightbox stylesheet into <head>
var stylesheet = new Element('link', { 'rel': 'stylesheet',
'href': '/lightbox/css/lightbox.css',
'type': 'text/css',
'media': 'screen'
});
$$('head')[0].appendChild(stylesheet);
// Check for links preceded by the image icon provided by mod_autoindex.
// On my setup the src attribute in the img tag preceding a link to an image
// is "/icons/image2.gif". This is used to identify links to images.
$$("a").each( function(elmt) {
// The default output is tabular, so check the previous cell for the img tag
imgelmt = elmt.up().previous().down()
// If the FancyIndexes option is set, the output is formatted differently
if (imgelmt == undefined) { imgelmt = elmt.previous('img') }
if (imgelmt.readAttribute('src') == "/icons/image2.gif")
{
elmt.setAttribute('rel', 'lightbox[images]');
// As ps suggested, provide a link to the image in the lightbox description
link = "<a href='" + elmt.readAttribute('href') + "'>" +
elmt.innerHTML.stripScripts().stripTags() + "</a>";
elmt.setAttribute('title', link );
}
} );
// --></script>
Now all you have to do is tell apache to include this file in its directory listing page. Simply paste the following two lines into a file named .htaccess and copy it to any directory that you want Lightbox to appear in.
Options Indexes ReadmeName /lightbox/lightbox.html
Et voila! No php, no databases to maintain. Image galleries don’t get much simpler than that.
Thanks! I modified your instructions to upload only the images folder to the root!
I had spent my lunch trying to edit the .js ;(
You saved me countless hours of frustration.
Hey thanks a lot for this tip. I use it now to spice up my fancy indexes!!
Still, I wonder if you could help me adding the filename to the image description.
I think it has something to be like:
elmt.setAttribute(‘title’, ?????????????)
But how do I read out the name of the current image?
I’m sorry, this is my first look at JavaScript, I don’t know how to set this variable..
Thank YOU anyway!!!
Good idea. You’re on the right lines. To get the filename you need to read the href attribute. You should also make sure that people can’t somehow embed code into your page using strange filenames; below I’ve used the Prototype stripScripts() and stripTags() functions. This is the line you are looking for:
elmt.setAttribute(‘title’, elmt.readAttribute(‘href’).stripScripts().stripTags() );
Put this in the last if statement. Don’t forget to add a semicolon to the end of the other line! I’ve updated the code in the post.
Hope that helps.
WOW!
Now of course, it would be even better, if the image name would display spaces correctly; and would be a clickable link to the actual image so one could download it..
But as a workaround I made the right-click working in the directory index, and thanks to you one knows already the name of the picture!
I don’t want to waste your time anymore.
It works great, and you, Sir, made my day! Thanks!!!
Sure, I didn’t think about formatting spaces nicely. I guess it’s easier just to read the innerHTML of the link instead of the href attribute. As for a link to the image file, you can include html in the title attribute which will show up in the description.
I’ve updated the post again to include these features. Thanks for helping me make it better
Any more suggestions are welcome.
Thanks, works like a charm, it really spices up the listing pages
Hi Matt,
thank you for your great tutorial.
I tried to establish this simple galery but i got a problem with the apache (version 2.2)
errorlog says the following:
“.htaccess: ReadmeName not allowed here”
even in the cfg file ReadmeName is not working, maybe this issue is connected with some changes in the autoindex mod -> http://httpd.apache.org/docs/current/mod/mod_autoindex.html
do you have any idea what could be wrong?
thank you for an reply!
greets,
nick
Hi Nick
I don’t think this functionality has changed since Apache 1.3.6. Is HeaderName working? Are you sure you have mod_autoindex enabled?
Do you have an AllowOverride directive in your config? You must have at least AllowOverride Indexes for this to work, although this shouldn’t make a difference if putting ReadmeName in the main config file doesn’t work.
Matt
Hi,
I just wanted to contribute a little bit here. For sites with very large images lightbox has a tendency to be unusable. To fix it do the following (lightbox v2.05):
- In lightbox.css, change line 2 from:
#lightbox img{ width: auto; height: auto;}
to
#lightbox img{ max-width: 800px; width: auto; height: auto; }
- In lightbox.js, right before “Bug Fixed by Andy Scott”, line 260, add:
if (imgPreloader.width > 800) {
imgPreloader.height = imgPreloader.height / imgPreloader.width * 800;
imgPreloader.width = 800;
}
– if the above doesn’t display correctly in this post, I got the info from:
http://lokeshdhakar.com/forums/discussion/5362/solved-how-to-limit-displayed-image-width-size/p1
I also had an issue where the images loaded far down on the page in firefox 9. To fix that:
- In lightbox.js change line 231 from:
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
to
var lightboxTop = arrayPageScroll[1] + 120;
Thats it. Thanks for these instructions Matt. You saved me a lot of time