Previewing files on web server?

Question

I am currently browsing the files (mostly images) on our server using HTTP, in the most primitive way (a very inefficient way).

To quickly glance a file, I need to click on and open it. Then exit, onto the next file. Very inefficient.

Is there a way that I can preview these files without opening them, just like what we do on our Mac/Windows system.

Answer 1

You could use Fancybox to get both a thumbnail view, and to open images without leaving the page. You can configure Apache to display your directory as a gallery, and add in thumbnails of your image into the DOM.

Try the instructions found here. The demo on that page doesn't seem to be working, but the instructions do work. The instructions there don't cover adding thumbnails, but in my abbreviated instructions below I added in a step to get them:

• Download Fancybox

• Create a fancybox directory at the root level of your site, and add the files from the Fancybox download.

• Create a fancybox.html file in the fancybox directory and load the Fancybox library and set the config options. See the example here.

• (My addition) Add a line to fancybox.html to insert a thumbnail into the Apache directory listing. Here's just a simple line you might add after line 26 in the linked example file:

      $(this).html("<img src='"+ $(this).attr('href') +"' width='200'>" + title);
  

• Create a .htaccess file in your image directory (and be sure .htaccess files are usable by Apache)

• Add these lines to the .htaccess file:

  Options +Indexes
  ReadmeName /fancybox/fancybox.html
  

• Navigate to your image directory

You can modify the Apache directory listing page to make it as pretty as you like. See this article on styling the directory listing. Probably any other gallery library you like could be used with a similar method, the important thing is that the ReadmeName option lets you inject javascript and css which you can use to manipulate the DOM.