Skip to content

Entries tagged "fancybox".

Instant image gallery with Apache's mod_autoindex and fancybox

For some time now I've been using Google's Picasaweb for sharing some photos with friends and relatives, however in the recent years I've been trying to distance myself from Google's services and run my own since I have the know-how and the resources, plus Picasaweb has a ridiculously small quota - 1 GB.
As such I've decided to just put the images in some directory online and let mod_autoindex list them, but this kind of listings can be hard to browse since you have to go back all the time for a new image's link - and here's where fancybox is useful.
fancyBox is a tool that offers a nice and elegant way to add zooming
functionality for images, html content and multi-media on your webpages.
It is built at the top of the popular JavaScript framework 
jQuery and is both easy to implement and a snap to customize.


And here's what needs to be done:
1. Create a directory called fancybox in the root directory of your web site
2. Download https://github.com/fancyapps/fancyBox/zipball/v2.1.3 and upload the source and lib directories from it to the directory we created at step 1
3. In the same fancybox directory create a HTML file called fancybox.html with the following contents: http://img.nux.ro/fancybox/fancybox.txt
4. Upload your directory containing the pictures to the web site
5. Create in the said directory an .htaccess file with the following contents:
Options +Indexes
ReadmeName /fancybox/fancybox.html
6. You're done, you can now browse to www.yourwebsite.tld/imagedirectory and enjoy the experience

Here's a demo: http://img.nux.ro/tuxwallpapers/

Voila! A nice, simple gallery involving no server-side scripting languages, just using the powerful Apache server and Javascript.
Credits go to Matt who's blog post gave me the idea and my friend Adrian who suggested fancybox and helped adjusting the Javascript code to my needs (since I have zero js skills). Thanks!