Modernizing Apache Auto Index Page

Apache auto index pages are plain...

#basic_table_version
#basic_table_htaccess
#basic_table_events
#basic_table_style_orange
#basic_table_style
#photo_gallery_version
#photo_gallery_htaccess
#photo_gallery_events
#photo_gallery_style
#photo_gallery_timthumb_patch
#photo_gallery_timthumb_config

It takes only a little bit to make them much more informative. And a bit more to make them shiny.

Basic Table Version

.htaccess

 Set some things to get useful output from apache. This makes using css nice and easy.

IndexOptions NameWidth=* FancyIndexing HTMLTable SuppressDescription IconsAreLinks XHTML

AddType text/html .html
AddType application/epub+zip .epub
AddType application/x-font-woff .woff
AddType application/x-font-TrueType .ttf
AddType text/xsl .xsl

HeaderName /auto_index_resources/header.html 
ReadmeName /auto_index_resources/footer.html
IndexStyleSheet /auto_index_resources/style_orange.css

AddIconByType (IMG,/auto_index_resources/text-html.png) text/html
AddIcon (IMG,/auto_index_resources/text.png) .cpp
AddIconByType (IMG,/auto_index_resources/Text-x-generic.svg) text/*

AddIcon (IMG,/auto_index_resources/picture.svg) .png .svg .ico .xcf .ai
AddIcon (IMG,/auto_index_resources/gif.svg) .gif .jpg
#AddIcon (IMG,/auto_index_resources/zip.png) .zip .gz .tar .bz .bz2
AddIcon (IMG,/auto_index_resources/cartone.svg) .zip .gz .tar .bz .bz2

AddIcon (IMG,/auto_index_resources/text-html.svg) .html .htm
AddIcon (IMG,/auto_index_resources/php.png) .php

AddIcon (IMG,/auto_index_resources/font.png) .ttf .otf 
AddIcon (IMG,/auto_index_resources/EPUB.svg) .epub
AddIcon (IMG,/auto_index_resources/android.svg) .apk
AddIcon (IMG,/auto_index_resources/pdf_icon.png) .pdf

AddIcon (IMG,/auto_index_resources/list-error.png) error_log
AddIcon /auto_index_resources/folder.svg ^^DIRECTORY^^

DefaultIcon /auto_index_resources/favicon.png

IndexIgnore /cgi-bin 400.shtml 401.shtml 403.shtml 500.shtml 500.php favicon.ico 404.shtml *.fcgi php.ini .ssh .mailsubdom auto_index_resources .svn .smileys

  ## EXPIRES CACHING For good measure ##
    
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
ExpiresByType image/svg+xml "access 1 year"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/javascript "access 1 week"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-font-woff "access 1 year"

    ExpiresDefault "access 2 days"

    
    ## EXPIRES CACHING ##

 /auto_index_resources/footer.html

This holds the container for the preview image, and js. Not necessary for CSS.

<table id="preview2">
<tr><td>Title!</td></tr>
<tr><td><hr /></td></tr>
<tr><td id="preview_container"></td></tr>
<tr><td>col1</td></tr>
</table>

<script src="/auto_index_resources/events.js"></script>

<style>
#preview {
/*display: block;
position: fixed;
opacity:0.85;
z-index:-1;
text-align:center;*/
margin:0em;
}
/*#preview > img
{max-width:300px;max-height:300px;}
*/
#preview2 {position: fixed;
bottom: 0;
z-index: -2;
/*vertical-align:center;*/}
#preview2 > tbody > tr:first-child{display:none}
#preview2 td:first-child{border:none}
#preview2 > tbody > tr > td, #preview2 p{text-align:center;margin:0em;s}
#preview2  figure  img{max-width:500px;}
</style>
 

/auto_index_resources/events.js

Most of this is extra frivolous. Mouseover previews, etc. It included in footer.html. If there is a header.html there will be no location h1 tag (not really a big deal). Putting it in the header.html will make resources load better.

document.addEventListener('DOMContentLoaded', add_listener,false);
function add_listener()
{
 var m =document.createElement("meta");
 m.setAttribute("name", "viewport");
 m.setAttribute("content", "width=device-width");
 document.head.appendChild(m);
 
 
 var tbody = document.body.childNodes[3].firstElementChild;
 //tbody.childElementCount
 //second and last are hr's ...grr
 for(i=2;i<tbody.childElementCount-1;i++)
 {
  // if necessary on i=1
  //if(tbody.children[i].children.length==4)
  var size = tbody.children[i].children[3].innerText;
  var unit = size.substr(size.length-1,1);
  if (size ==="-")
  {
   // do we want to preview directories?
   tbody.children[i].className="hover_txt";
     tbody.children[i].addEventListener("mouseover",tr_iframe_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
  }
  else
  {
   if(unit == "M" || unit == "K")
    size = parseInt(size.substr(0,size.length-1));
   else
   {
    unit = "B";
    size = parseInt();
   }
   var name = tbody.children[i].children[1].innerText;
                        var ext = name.split('.').pop();

   //make sure we aren't previewing super large files
   if((unit === "K" && size<500) || unit==="B")
   {// var name = tbody.children[i].children[1].innerText;
   // var ext = name.split('.').pop();
   // check to see if it is previewable...
    if(ext.toLowerCase() ==="jpg"
     || ext.toLowerCase() ==="mpo"
     || ext.toLowerCase() ==="png"
     || ext.toLowerCase() ==="gif"
     || ext.toLowerCase() ==="ico"
     || ext.toLowerCase() ==="svg"
     || ext.toLowerCase() ==="tiff"
    )
    {//set as tr.preview... then alter a.preview
     tbody.children[i].className="hover_img";
     tbody.children[i].addEventListener("mouseover",tr_image_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }if(ext.toLowerCase() ==="avi"
     || ext.toLowerCase() ==="mp4"
     || ext.toLowerCase() ==="webm"
    )
    {//set as tr.preview... then alter a.preview
     tbody.children[i].className="hover_vid";
     tbody.children[i].addEventListener("mouseover",tr_video_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }
    if(ext.toLowerCase()  ==="oog"
                         || ext.toLowerCase() ==="mp3"
    )
    {//set as tr.preview... then alter a.preview
     tbody.children[i].className="hover_audio";
     tbody.children[i].addEventListener("mouseover",tr_video_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }
    if(ext.toLowerCase() ==="json" && !is3ds()
     || ext.toLowerCase() ==="txt"
     || ext.toLowerCase() ==="js"
     || ext.toLowerCase() ==="css"
     || ext.toLowerCase() ==="txt"
     || ext.toLowerCase() ==="html" 
     || ext.toLowerCase() ==="php"
     || ext.toLowerCase() ==="ncx"
     || ext.toLowerCase() ==="xml"
     || ext.toLowerCase() ==="xhtml"
     || ext.toLowerCase() ==="pdf"
     || name.toLowerCase() ==="error_log"
     || name.toLowerCase() ==="mimetype"
     || name.toLowerCase() ==="error_log"
    )
    {
     tbody.children[i].className="hover_txt";
     tbody.children[i].addEventListener("mouseover",tr_iframe_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }
   }
   else
   {
    if(ext.toLowerCase() ==="jpg"
     || ext.toLowerCase() ==="mpo"
     || ext.toLowerCase() ==="png"
     || ext.toLowerCase() ==="gif"
     || ext.toLowerCase() ==="ico"
     || ext.toLowerCase() ==="tiff"
    )
    {//set as tr.preview... then alter a.preview
     tbody.children[i].className="hover_img";
     tbody.children[i].addEventListener("mouseover",tr_image_large_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }
    if(ext.toLowerCase() ==="avi"
     || ext.toLowerCase() ==="mp4"
     || ext.toLowerCase() ==="webm"
    )
    {//set as tr.preview... then alter a.preview
     tbody.children[i].className="hover_vid";
     tbody.children[i].addEventListener("mouseover",tr_video_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }
    if(ext.toLowerCase()  ==="oog"
     || ext.toLowerCase() ==="mp3"
    )
    {//set as tr.preview... then alter a.preview
     tbody.children[i].className="hover_audio";
     tbody.children[i].addEventListener("mouseover",tr_video_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);
    }

   }
  }
 }
 
 /*xOffset = 10;
 yOffset = 30;
  
 $("tr.hover_img").hover(function(e){
        var _title = this.children[1].children[0].innerText;
    var _date = this.children[2].innerText;
    var _size = this.children[3].innerText;
        var c = ( _title != "") ? "<br/>" + _title + "<br />" + _date + " " + _size : "";
        $("body").append("<p id='preview'><img src='"+ this.children[1].children[0].href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
    },
    function(){
        $("#preview").remove();
    }); 
    $("tr.hover_img").mousemove(
 function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px");

    });*/
//fix this
 /*   $("tr.hover_txt").hover(function(e){
        var _title = this.children[1].children[0].innerText;
    var _date = this.children[2].innerText;
    var _size = this.children[3].innerText;
        var c = ( _title != "") ? "<br/>" + _title + "<br />" + _date + " " + _size : "";
        $("body").append("<p id='preview'><iframe style='max-width:700px;max-height:500px;overflow:hidden;' scroll='0' border='0' src='"+ this.children[1].children[0].href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
    },
    function(){
        $("#preview").remove();
    }); 
    $("tr.hover_txt").mousemove(tr_image_move);*/
/* var h; var b; var c; var d;
 h = document.body.firstElementChild;
 b = document.createElement("span");
 c = document.createElement("span");
 d = document.createElement("span");
 b.innerHTML="&nbsp;"
 d.innerHTML="&nbsp;";
 c.innerText = h.innerText;
 h.innerText="";
 h.appendChild(b);
 h.appendChild(c);
 h.appendChild(d);
*/ 
}
//function tr_image_create_delay()
//{
// genericDelay(tr_image_create,1000);
//}

function tr_image_create(e)
{
 /*var _title = this.children[1].children[0].innerText;
    var _date = this.children[2].innerText;
    var _size = this.children[3].innerText;
        var c = ( _title != "") ? "<br/>" + _title + "<br />" + _date + " " + _size : "";
        $("body").append("<p id='preview'><img src='"+ this.children[1].children[0].href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
 */
 var fig = document.createElement("figure");
 fig.setAttribute("id","preview");
 var img = document.createElement("img");
 img.setAttribute("src", this.children[1].children[0].href);
 fig.appendChild(img);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 // check the height/width of the page
 // copy code from mouseover_popup.js
 //fig.style.top = (e.pageY - xOffset) + "px";
 //fig.style.left = (e.pageX + yOffset) + "px";
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}
function tr_image_large_create(e)
{
 var fig = document.createElement("figure");
        fig.setAttribute("id","preview");
        var img = document.createElement("img");
        img.setAttribute("src", "/auto_index_resources/cache"+this.children[1].children[0].href.replace(window.location.origin,""));
        fig.appendChild(img);
        var cap = document.createElement("figcaption");

        var _title = this.children[1].children[0].innerText;
        var _date = this.children[2].innerText;
        var _size = this.children[3].innerText;
        var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
        cap.innerHTML = c;
        fig.appendChild(cap);

        // check the height/width of the page
        // copy code from mouseover_popup.js
        //fig.style.top = (e.pageY - xOffset) + "px";
        //fig.style.left = (e.pageX + yOffset) + "px";
        document.getElementById("preview_container").appendChild(fig);
        //document.body.appendChild(fig);

        //tr_image_move(e);
}

function tr_iframe_create(e)
{
 // figures cannot contain iframes?
 var fig = document.createElement("div");
 fig.setAttribute("id","preview");
 var ifra = document.createElement("iframe");
 ifra.setAttribute("src", this.children[1].children[0].href);
 ifra.setAttribute("width","500px");
 ifra.setAttribute("height","200px");
 fig.appendChild(ifra);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}
function tr_video_create(e)
{
 var fig = document.createElement("figure");
 fig.setAttribute("id","preview");
 var vid = document.createElement("video");
 vid.setAttribute("autoplay","autoplay");
 vid.setAttribute("src", this.children[1].children[0].href);
 fig.appendChild(vid);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}
function tr_video_create(e)
{
 var fig = document.createElement("figure");
 fig.setAttribute("id","preview");
 var vid = document.createElement("audio");
 vid.setAttribute("autoplay","autoplay");
 vid.setAttribute("src", this.children[1].children[0].href);
 fig.appendChild(vid);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}

function tr_image_move(e)
{
 var p = document.getElementById("preview");
 if(p)
 {
  // check the height/width of the page
  // copied code from mouseover_popup.js fixed semicolons
  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];

  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

  if (typeof e != "undefined"){
   var AA = truebody();
 //console.log(truebody().clientHeight);
   if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
    xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
   } else {
    xcoord += e.pageX;
   }
   if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
    ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
   } else {
    ycoord += e.pageY;
   }

  } else if (typeof window.event != "undefined"){
   if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
    xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
   } else {
    xcoord += truebody().scrollLeft+event.clientX;
   }
   if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
    ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
   } else {
    ycoord += truebody().scrollTop + event.clientY;
   }
  }
  p.style.left="50%";//xcoord+"px";
  p.style.bottom="0px";//top=ycoord+"px";
  //end copied code
  
 // p.style.top = (e.pageY - xOffset) + "px";
 // p.style.left = (e.pageX + yOffset) + "px";
 }
}
function tr_image_destroy()
{
/* var p = document.getElementById("preview");
 if(p)
  document.body.removeChild(p);*/
 var p = document.getElementById("preview");
 if(p)
  document.getElementById("preview_container").removeChild(p);
 //this.class="";
}

// a generic delay before calling a function
// setTimeout runs fn as a child of window, not the tr...
function genericDelay(fn, ms) {
   var timer;
   return function() {
      clearTimeout(timer);
      timer = setTimeout(fn, ms || 500);
   }
};
var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

var defaultimageheight = 300; // maximum image size.
var defaultimagewidth = 300; // maximum image size.

var timer;
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function is3ds()
{
 return navigator.userAgent.indexOf('Nintendo 3DS') == -1;
}

/auto_index_resources/style_orange.css

No classes needed in this css

@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url('/auto_index_resources/electrolize.woff') format('woff');
}
@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans Mono'), local('DroidSansMono'), url('/auto_index_resources/droidsansmono.woff') format('woff');
}


body
{
 font-family: 'Electrolize', sans-serif;
 margin-top: 0em;
 text-shadow:.1em 0.1em 0.3em #FFF, .1em 0.1em 0.1em #FFF;
}
td::selection, a::selection, th::selection, h1::selection, body::selection,img::selection{background: lightgray;}

h1{
 padding-bottom: 0em;
 margin-top: 0em; 
 padding-left: 0.6em;
 padding-right: 0.6em;
 background: orange; 
 display: table;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 text-shadow: .1em 0.1em 0.1em #E8EDFF;
 font-variant: small-caps;
}

a{text-decoration:none; color:black;}
th a:before{}
th a:after{content: " \2195";}
a:hover{}
a:active{}
a:visited{color:dark-gray}


table{
 width: 100%;
 margin-left:auto;
 margin-right:auto;
 border-spacing: 0px;
}

tr:first-child{background: orange !important;}

th:first-child{}
th:last-child{}
th{text-align:right;white-space:nowrap;}
th:nth-child(2){text-align:left;}


tr:hover{
 /*background: darkorange;*/
 -webkit-transition: all 0s ease-in-out;
 -moz-transition: all 0s ease-in-out;
 -o-transition: all 0s ease-in-out;
}
tr{
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
}

/*hide the useless hr-s*/
tr:nth-child(2), tr:last-child{display:none;}

/*clean up the new first non header row*/
tr:nth-child(3) td{border-top: 1px solid orange;}
tr:nth-child(3):hover td{border-top:1px solid orange; padding-top:3px;}


/*highlight the rows*/
tr:nth-child(even){/*background: blanchedalmond;*/background: rgba(255, 165, 0, 0.31);}
tr:nth-child(odd){background-color:rgba(255, 255, 255, 0.34);}
/*tr:nth-child(even):hover{background: darkorange;}*/
tr:hover td{border-bottom:1px dashed orange;border-top:1px dashed orange;padding-bottom:2px;padding-top:2px;}
tr td{padding-bottom:3px;padding-top:3px;}
/*now it works, yay for silent contstant browser updates*/
/*tr:hover:nth-child(odd) td{border-bottom:1px dashed orange;border-top:1px dashed orange;padding-bottom:0px;padding-top:0px;}
tr:nth-child(odd) td{padding-bottom:1px;padding-top:1px;}*/

/*animate the icons based on the parent tr hover state*/
@-webkit-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5} }
@-moz-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
@-ms-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
@-o-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
@keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
tr:hover:nth-child(even) td:first-child a img {
 -webkit-animation: fade 1s infinite;
 -moz-animation: fade 1s infinite;
 -ms-animation: fade 1s infinite;
 -o-animation: fade 1s infinite;
 animation:fade 1s infinate;
 -webkit-animation-timing-function:ease-in-out;
 -moz-animation-timing-function:ease-in-out;
 -ms-animation-timing-function:ease-in-out;
 -o-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
@-webkit-keyframes jig { 0%,100% { -webkit-transform: rotate(0deg); } 25%{-webkit-transform: rotate(-5deg);} 75% { -webkit-transform: rotate(5deg); } }
@-moz-keyframes jig { 0%,100% { -moz-transform: rotate(0deg); } 25%{-moz-transform: rotate(-5deg);} 75% { -moz-transform: rotate(5deg); } }
@-ms-keyframes jig { 0%,100% { -ms-transform: rotate(0deg); } 25%{-ms-transform: rotate(-5deg);} 75% { -ms-transform: rotate(5deg); } }
@-o-keyframes jig { 0%,100% { -o-transform: rotate(0deg); } 25%{-o-transform: rotate(-5deg);} 75% { -o-transform: rotate(5deg); } }
@keyframes jig { 0%,100% { transform: rotate(0deg); } 25%{transform: rotate(-5deg);} 75% { transform: rotate(5deg); } }
tr:hover:nth-child(odd) td:first-child a img {
 -webkit-animation: jig 0.25s infinite;
 -moz-animation: jig 0.5s infinite;
 -ms-animation: jig 0.5s infinite;
 -o-animation: jig 0.5s infinite;
 animation: jig 0.5s infinite;
 -webkit-animation-timing-function:ease-in-out;
 -moz-animation-timing-function:ease-in-out;
 -ms-animation-timing-function:ease-in-out;
 -o-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}


td{
 padding:3px;
 vertical-align:bottom;
 text-overflow: ellipsis;
 overflow: hidden;
}
td[valign=top]{vertical-align:middle;}
td:first-child{
 width:1em;
 text-align:right;
 border-left: 1px solid orange;
}
td:first-child a img {
 width: 1em;
 height: 1em;
}

td:nth-child(2)
{
 max-width:8em;
 white-space:nowrap;
}

td:nth-last-child(2){
 font-family:'Droid Sans Mono', mono;
 width: 11em;
 font-variant: small-caps;
}
td:last-child{
 font-family:'Droid Sans Mono', mono;
 padding-right:5px; 
 border-right: 1px solid orange;
 width:5em;
}


/*clean up new last row*/
tr:nth-last-child(2) td {border-bottom: 1px solid orange;}
tr:nth-last-child(2):hover td{border-bottom: 1px solid orange;padding-bottom:3px;}

/*img{height:1em;}*/

/auto_index_resources/style.css

Similar, alternative css. This one was blue and rounded, and simpler.

@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url('/auto_index_resources/electrolize.woff') format('woff');
}
@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans Mono'), local('DroidSansMono'), url('/auto_index_resources/droidsansmono.woff') format('woff');
}


body
{
 font-family: 'Electrolize', sans-serif;
}
td::selection, a::selection, th::selection, h1::selection{background:#B9c9FE;}

h1{
 padding-bottom: 0em;
 margin-bottom: 0em; 
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 padding-top:0.3em;
 padding-left: 0.6em;
 padding-right: 0.6em;
 background: #B9C9FE; 
 display: table;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 //border-bottom-left-radius: 1em;
 //border-bottom-right-radius: 1em;
 text-shadow: .1em 0.1em 0.1em #E8EDFF;
 font-variant: small-caps;
}

a{text-decoration:none; color:black;}
th a:before{}
th a:after{content: " \2195";}
a:hover{}
a:active{}
a:visited{color:dark-gray}


table{
 width: 100%;
 margin-left:auto;
 margin-right:auto;
 border-spacing: 0px;
}

tr:first-child{background:#B9C9FE !important;}
tr:first-child:hover{background:#B9C9FE !important;}
th:first-child{border-top-left-radius: 0.4em;}
th:last-child{border-top-right-radius: 0.4em;padding-right:0.5em;}
th{text-align:right;white-space:nowrap;}
th:nth-child(2){text-align:left;}


tr:hover{
 background:rgba(185, 201, 254, 0.80);
 -webkit-transition: all 0s ease-in-out;
 -moz-transition: all 0s ease-in-out;
 -o-transition: all 0s ease-in-out;
}
tr{
 background:rgba(255,255,255,0.50);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
}
tr:nth-child(even){background: rgba(185, 201, 254, 0.50);}
tr:nth-child(even):hover{background:rgba(185, 201, 254, 0.80);}

/*hide the useless hr-s*/
tr:nth-child(2), tr:last-child{display:none;}

td{padding:3px; vertical-align:bottom;}
td[valign=top]{vertical-align:bottom;}
td:first-child{
 width:1em;
 text-align:right;
}
td:first-child a img {
 width: 1em;
 height: 1em;
}
td:nth-child(2)
{
 max-width:8em;
 white-space:nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}
td:first-child{width:1em;text-align:right;border-left:1px solid #B9C9FE;}
td:nth-last-child(2){
 font-family:'Droid Sans Mono', mono;
 width: 11em;
 font-variant: small-caps;
}
td:last-child{
 font-family:'Droid Sans Mono', mono;
 padding-right:5px; 
 border-right:1px solid #B9C9FE;
 width:5em;
}
tr:nth-last-child(2) td {border-bottom:1px solid #B9C9FE;}

//img{height:1em;}

Photo Gallery Version

/photo/.htaccess

pretty much the same

AddHandler application/x-httpd-php53s .php
#AddHandler application/x-httpd-php5s .php

#Options Indexes
#?broken--^

IndexOptions NameWidth=* FancyIndexing HTMLTable SuppressDescription IconsAreLinks XHTML 

AddType text/html .html
AddType application/epub+zip .epub
AddType application/x-font-woff .woff
AddType application/x-font-TrueType .ttf

HeaderName /photo/auto_index_resources/header.html 
ReadmeName /photo/auto_index_resources/footer.html
IndexStyleSheet /photo/auto_index_resources/style.css


AddIconByType (IMG,/auto_index_resources/text-html.png) text/html
AddIcon (IMG,/auto_index_resources/text.png) .cpp
AddIconByType (IMG,/auto_index_resources/Text-x-generic.svg) text/*

AddIcon (IMG,/auto_index_resources/picture.svg) .png .svg .ico .xcf .ai
AddIcon (IMG,/auto_index_resources/gif.svg) .gif .jpg .JPG .MPO
#AddIcon (IMG,/auto_index_resources/zip.png) .zip .gz .tar .bz .bz2
AddIcon (IMG,/auto_index_resources/cartone.svg) .zip .gz .tar .bz .bz2

AddIcon (IMG,/auto_index_resources/text-html.svg) .html .htm
AddIcon (IMG,/auto_index_resources/php.png) .php

AddIcon (IMG,/auto_index_resources/font.png) .ttf .otf 
AddIcon (IMG,/auto_index_resources/EPUB.svg) .epub
AddIcon (IMG,/auto_index_resources/android.svg) .apk
AddIcon (IMG,/auto_index_resources/pdf_icon.png) .pdf

AddIcon (IMG,/auto_index_resources/list-error.png) error_log
AddIcon /auto_index_resources/folder.svg ^^DIRECTORY^^

DefaultIcon /photo/auto_index_resources/binary_file_plain.svg

IndexIgnore /cgi-bin 400.shtml 401.shtml 403.shtml 500.shtml 500.php favicon.ico 404.shtml *.fcgi php.ini .ssh .mailsubdom auto_index_resources events.js footer.html style.css

  /photo/auto_index_resources/footer.html

Only needs the .js. the preview frame was kind of dumb anyway.

<script src="/photo/auto_index_resources/events.js"></script>

/photo/auto_index_resources/events.js 

The javascript is only necessary to replace the filetype icons with previews. The size slider is nice though. Most of this is leftover from the mouseover preview pane. I should clean that up...

document.addEventListener('DOMContentLoaded', add_listener,false);
function add_listener()
{
 var m =document.createElement("meta");
 m.setAttribute("name", "viewport");
 m.setAttribute("content", "width=device-width");
 document.head.appendChild(m);

//adding the element throws off the others below... 
//var size_slider = document.createElement("input");
//size_slider.setAttribute("type","range");
//size_slider.setAttribute("max",30);
//size_slider.setAttribute("min",0);
//size_slider.setAttribute("value",10);
//document.body.insertBefore(size_slider,document.body.children[1]);
 
 var tbody = document.body.childNodes[3].firstElementChild;
 //tbody.childElementCount
 //second and last are hr's ...grr
 for(i=2;i<tbody.childElementCount-1;i++)
 {
  // if necessary on i=1
  //if(tbody.children[i].children.length==4)
  if(typeof(tbody.children[i].children[3].innerText)!="undefined")
   var size = tbody.children[i].children[3].innerText;
  else
   var size = tbody.children[i].children[3].textContent;
  var unit = size.substr(size.length-1,1);
  if (size ==="-")
  {
   // do we want to preview directories?
   /*tbody.children[i].className="hover_txt";
     tbody.children[i].addEventListener("mouseover",tr_iframe_create,false);
     tbody.children[i].addEventListener("mousemove",tr_image_move,false);
     tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);*/
  }
  else
  {
   if(unit == "M" || unit == "K")
    size = parseInt(size.substr(0,size.length-1));
   else
   {
    unit = "B";
    size = parseInt();
   }
                if(typeof(tbody.children[i].children[1].innerText)!="undefined")
                        var name = tbody.children[i].children[1].innerText;
                else
                        var name = tbody.children[i].children[1].textContent;

//   var name = tbody.children[i].children[1].innerText;
                        var ext = name.split('.').pop();

   if(ext.toLowerCase() ==="jpg"
    || ext.toLowerCase() ==="mpo"
    || ext.toLowerCase() ==="png"
    || ext.toLowerCase() ==="gif"
    || ext.toLowerCase() ==="ico"
    || ext.toLowerCase() ==="svg"
    || ext.toLowerCase() ==="tiff"
   )
   {//set as tr.preview... then alter a.preview
    var img_src;
    //make sure we aren't previewing super large files
    if(!((unit === "K" && size<500) || unit==="B"))
    {// var name = tbody.children[i].children[1].innerText;
    // var ext = name.split('.').pop();
    // check to see if it is previewable...
     img_src = 
"/photo/auto_index_resources/cache/"+ tbody.children[i].children[1].children[0].href.replace(window.location.origin,""); 
    }
    else
     img_src = tbody.children[i].children[1].children[0].href;

    tbody.children[i].children[0].children[0].children[0].setAttribute("src", img_src);
    tbody.children[i].children[1].children[0].innerText=decodeURIComponent(name.substr(0,name.length-ext.length-1));
    tbody.children[i].children[3].innerText+=" " + ext;
   }if(    ext.toLowerCase() ==="oog"
    || ext.toLowerCase() ==="mp3"
    || ext.toLowerCase() ==="m4a"
    || ext.toLowerCase() ==="wav"
    /*|| ext.toLowerCase() ==="aif"*/
   )
   {//set as tr.preview... then alter a.preview
    var audio_container = document.createElement("audio");
    /*audio_container.setAttribute("autoplay","false");*/
    audio_container.setAttribute("src", tbody.children[i].children[1].children[0].href);
    audio_container.setAttribute("controls","controls");
    tbody.children[i].children[0].appendChild(audio_container);
    tbody.children[i].children[0].removeChild(tbody.children[i].children[0].children[0]);
    tbody.children[i].children[1].children[0].innerText=decodeURIComponent(name.substr(0,name.length-ext.length-1));
    tbody.children[i].children[3].innerText+=" " + ext;
   }
   if(ext.toLowerCase() ==="avi"
                                || ext.toLowerCase() ==="webm"
    || ext.toLowerCase() ==="mp4"
                        )
                        {//set as tr.preview... then alter a.preview
                                var vid = document.createElement("video");
                                /*vid.setAttribute("autoplay","false");*/
                                vid.setAttribute("preload","none");
    vid.setAttribute("src", tbody.children[i].children[1].children[0].href);
                                vid.setAttribute("controls","controls");
                                tbody.children[i].children[0].appendChild(vid);
                                tbody.children[i].children[0].removeChild(tbody.children[i].children[0].children[0]);
                                tbody.children[i].children[1].children[0].innerText=decodeURIComponent(name.substr(0,name.length-ext.length-1));
                                tbody.children[i].children[3].innerText+=" " + ext;
                        }

   if(ext.toLowerCase() ==="json" && !is3ds()
    || ext.toLowerCase() ==="txt"
    || ext.toLowerCase() ==="js"
    || ext.toLowerCase() ==="css"
    || ext.toLowerCase() ==="txt"
    || ext.toLowerCase() ==="html" 
    || ext.toLowerCase() ==="php"
    || ext.toLowerCase() ==="ncx"
    || ext.toLowerCase() ==="xml"
    || ext.toLowerCase() ==="xhtml"
    || ext.toLowerCase() ==="pdf"
    || name.toLowerCase() ==="error_log"
    || name.toLowerCase() ==="mimetype"
    || name.toLowerCase() ==="error_log"
   )
   {
    /*tbody.children[i].className="hover_txt";
    tbody.children[i].addEventListener("mouseover",tr_iframe_create,false);
    tbody.children[i].addEventListener("mousemove",tr_image_move,false);
    tbody.children[i].addEventListener("mouseout",tr_image_destroy,false);*/
   }
  }
 }
var size_slider = document.createElement("input");
size_slider.setAttribute("type","range");
size_slider.setAttribute("max",20);
size_slider.setAttribute("min",10);
size_slider.setAttribute("value",15);
document.body.insertBefore(size_slider,document.body.children[1]);
size_slider.addEventListener("change",update_preview_size);
//http://stackoverflow.com/questions/9153718/change-the-style-of-an-entire-css-class-using-javascript#answer-14249194
 
 /*xOffset = 10;
 yOffset = 30;
  
 $("tr.hover_img").hover(function(e){
        var _title = this.children[1].children[0].innerText;
    var _date = this.children[2].innerText;
    var _size = this.children[3].innerText;
        var c = ( _title != "") ? "<br/>" + _title + "<br />" + _date + " " + _size : "";
        $("body").append("<p id='preview'><img src='"+ this.children[1].children[0].href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
    },
    function(){
        $("#preview").remove();
    }); 
    $("tr.hover_img").mousemove(
 function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px");

    });*/
//fix this
 /*   $("tr.hover_txt").hover(function(e){
        var _title = this.children[1].children[0].innerText;
    var _date = this.children[2].innerText;
    var _size = this.children[3].innerText;
        var c = ( _title != "") ? "<br/>" + _title + "<br />" + _date + " " + _size : "";
        $("body").append("<p id='preview'><iframe style='max-width:700px;max-height:500px;overflow:hidden;' scroll='0' border='0' src='"+ this.children[1].children[0].href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
    },
    function(){
        $("#preview").remove();
    }); 
    $("tr.hover_txt").mousemove(tr_image_move);*/
/* var h; var b; var c; var d;
 h = document.body.firstElementChild;
 b = document.createElement("span");
 c = document.createElement("span");
 d = document.createElement("span");
 b.innerHTML="&nbsp;"
 d.innerHTML="&nbsp;";
 c.innerText = h.innerText;
 h.innerText="";
 h.appendChild(b);
 h.appendChild(c);
 h.appendChild(d);
*/ 
}
//function tr_image_create_delay()
//{
// genericDelay(tr_image_create,1000);
//}

function update_preview_size(e)
{
 if(this.value==this.max)
  css_getclass('td:first-child a img').style.width="";
 else
 {
  css_getclass('td:first-child a img').style.width=this.value+"em";
  css_getclass('body').style.fontSize=(this.value/15)+"em";
 }
}

function tr_image_create(e)
{
 /*var _title = this.children[1].children[0].innerText;
    var _date = this.children[2].innerText;
    var _size = this.children[3].innerText;
        var c = ( _title != "") ? "<br/>" + _title + "<br />" + _date + " " + _size : "";
        $("body").append("<p id='preview'><img src='"+ this.children[1].children[0].href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
 */
 var fig = document.createElement("figure");
 fig.setAttribute("id","preview");
 var img = document.createElement("img");
 img.setAttribute("src", this.children[1].children[0].href);
 fig.appendChild(img);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 // check the height/width of the page
 // copy code from mouseover_popup.js
 //fig.style.top = (e.pageY - xOffset) + "px";
 //fig.style.left = (e.pageX + yOffset) + "px";
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}
function tr_image_large_create(e)
{
 var fig = document.createElement("figure");
        fig.setAttribute("id","preview");
        var img = document.createElement("img");
        img.setAttribute("src", window.location.origin +"/auto_index_resources/cache"+this.children[1].children[0].href.replace(window.location.origin,""));
        fig.appendChild(img);
        var cap = document.createElement("figcaption");

        var _title = this.children[1].children[0].innerText;
        var _date = this.children[2].innerText;
        var _size = this.children[3].innerText;
        var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
        cap.innerHTML = c;
        fig.appendChild(cap);

        // check the height/width of the page
        // copy code from mouseover_popup.js
        //fig.style.top = (e.pageY - xOffset) + "px";
        //fig.style.left = (e.pageX + yOffset) + "px";
        document.getElementById("preview_container").appendChild(fig);
        //document.body.appendChild(fig);

        //tr_image_move(e);
}

function tr_iframe_create(e)
{
 // figures cannot contain iframes?
 var fig = document.createElement("div");
 fig.setAttribute("id","preview");
 var ifra = document.createElement("iframe");
 ifra.setAttribute("src", this.children[1].children[0].href);
 ifra.setAttribute("width","500px");
 ifra.setAttribute("height","200px");
 fig.appendChild(ifra);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}
function tr_video_create(e)
{
 var fig = document.createElement("figure");
 fig.setAttribute("id","preview");
 var vid = document.createElement("video");
 vid.setAttribute("autoplay","autoplay");
 vid.setAttribute("src", this.children[1].children[0].href);
 fig.appendChild(vid);
 var cap = document.createElement("figcaption");
 
 var _title = this.children[1].children[0].innerText;
 var _date = this.children[2].innerText;
 var _size = this.children[3].innerText;
 var c = ( _title != "") ?  _title + "<br />" + _date + " " + _size : "";
 cap.innerHTML = c;
 fig.appendChild(cap);
 
 
 document.getElementById("preview_container").appendChild(fig);
 //document.body.appendChild(fig);
 
 //tr_image_move(e);
}


function tr_image_move(e)
{
 var p = document.getElementById("preview");
 if(p)
 {
  // check the height/width of the page
  // copied code from mouseover_popup.js fixed semicolons
  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];

  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

  if (typeof e != "undefined"){
   var AA = truebody();
 //console.log(truebody().clientHeight);
   if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
    xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
   } else {
    xcoord += e.pageX;
   }
   if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
    ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
   } else {
    ycoord += e.pageY;
   }

  } else if (typeof window.event != "undefined"){
   if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
    xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
   } else {
    xcoord += truebody().scrollLeft+event.clientX;
   }
   if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
    ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
   } else {
    ycoord += truebody().scrollTop + event.clientY;
   }
  }
  p.style.left="50%";//xcoord+"px";
  p.style.bottom="0px";//top=ycoord+"px";
  //end copied code
  
 // p.style.top = (e.pageY - xOffset) + "px";
 // p.style.left = (e.pageX + yOffset) + "px";
 }
}
function tr_image_destroy()
{
/* var p = document.getElementById("preview");
 if(p)
  document.body.removeChild(p);*/
 var p = document.getElementById("preview");
 if(p)
  document.getElementById("preview_container").removeChild(p);
 //this.class="";
}

// a generic delay before calling a function
// setTimeout runs fn as a child of window, not the tr...
function genericDelay(fn, ms) {
   var timer;
   return function() {
      clearTimeout(timer);
      timer = setTimeout(fn, ms || 500);
   }
};
var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

var defaultimageheight = 300; // maximum image size.
var defaultimagewidth = 300; // maximum image size.

var timer;
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function is3ds()
{
 return navigator.userAgent.indexOf('Nintendo 3DS') == -1;
}

function cssrules(){
  var rules={}; var ds=document.styleSheets,dsl=ds.length;
  for (var i=0;i<dsl;++i){
    var dsi=ds[i].cssRules,dsil=dsi.length;
    for (var j=0;j<dsil;++j) rules[dsi[j].selectorText]=dsi[j];
  }
  return rules;
};
function css_getclass(name,createifnotfound){
  var rules=cssrules();
  if (!rules.hasOwnProperty(name)) throw 'todo:deal_with_notfound_case';
  return rules[name];
};

/photo/auto_index_resources/style.css

This makes the table-rows into inline block elements. and everything needed to support that. Again Apache puts out a well formatted document, so we do not need classes anywhere.

@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url('/auto_index_resources/electrolize.woff') format('woff');
}
@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans Mono'), local('DroidSansMono'), url('/auto_index_resources/droidsansmono.woff') format('woff');
}


body
{
 font-family: 'Electrolize', sans-serif;
 margin-top: 0em;
 text-shadow:.1em 0.1em 0.3em #FFF, .1em 0.1em 0.1em #FFF;
 text-align:center;
}
td::selection, a::selection, th::selection, h1::selection, body::selection,img::selection{background: lightgray;}

h1{
 padding-bottom: 0em;
 margin-top: 0em; 
 padding-left: 0.6em;
 padding-right: 0.6em;
 background: orange; 
 display: table;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 text-shadow: .1em 0.1em 0.1em #E8EDFF;
 font-variant: small-caps;
}

a{text-decoration:none; color:black;}
th a:before{}
th a:after{content: " \2195";}
a:hover{}
a:active{}
a:visited{color:darkgray}


table{
 width: 100%;
 margin-left:auto;
 margin-right:auto;
 border-spacing: 0px;
 display:block;
}
tbody{display:block;}

tr:first-child{display:none;}

th:first-child{}
th:last-child{}
th{text-align:right;white-space:nowrap;}
th:nth-child(2){text-align:left;}


tr:hover{
 background: darkorange;
 -webkit-transition: all 0s ease-in-out;
 -moz-transition: all 0s ease-in-out;
 -o-transition: all 0s ease-in-out;
}
tr{
 border:1px solid orange;
 margin-bottom:0.2em;
 display:inline-block;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 max-width:100%;
}

/*hide the useless hr-s*/
tr:nth-child(2), tr:nth-child(3), tr:last-child{display:none;}

/*clean up the new first non header row*/
/*tr:nth-child(3) td{border-top: 1px solid orange;}
tr:nth-child(3):hover td{border-top:1px solid orange; padding-top:3px;}*/


/*highlight the rows*/
tr:nth-child(even){/*background: blanchedalmond;*/background: rgba(255, 165, 0, 0.31);}
tr:nth-child(odd){background-color:rgba(255, 255, 255, 0.34);}
/*tr:nth-child(even):hover{background: darkorange;}*/
/*tr:hover td{border-bottom:1px dashed orange;border-top:1px dashed orange;padding-bottom:2px;padding-top:2px;}*/
tr td{padding-bottom:3px;padding-top:3px;}
/*now it works, yay for silent contstant browser updates*/
/*tr:hover:nth-child(odd) td{border-bottom:1px dashed orange;border-top:1px dashed orange;padding-bottom:0px;padding-top:0px;}
tr:nth-child(odd) td{padding-bottom:1px;padding-top:1px;}*/

/*animate the icons based on the parent tr hover state*/
@-webkit-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5} }
@-moz-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
@-ms-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
@-o-keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
@keyframes fade { 0%,100% { opacity: 1; } 50%{opacity:.5}  }
tr:hover:nth-child(even) td:first-child a img {
 -webkit-animation: fade 1s infinite;
 -moz-animation: fade 1s infinite;
 -ms-animation: fade 1s infinite;
 -o-animation: fade 1s infinite;
 animation:fade 1s infinate;
 -webkit-animation-timing-function:ease-in-out;
 -moz-animation-timing-function:ease-in-out;
 -ms-animation-timing-function:ease-in-out;
 -o-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
@-webkit-keyframes jig { 0%,100% { -webkit-transform: rotate(0deg); } 25%{-webkit-transform: rotate(-1deg);} 75% { -webkit-transform: rotate(1deg); } }
@-moz-keyframes jig { 0%,100% { -moz-transform: rotate(0deg); } 25%{-moz-transform: rotate(-1deg);} 75% { -moz-transform: rotate(1deg); } }
@-ms-keyframes jig { 0%,100% { -ms-transform: rotate(0deg); } 25%{-ms-transform: rotate(-1deg);} 75% { -ms-transform: rotate(1deg); } }
@-o-keyframes jig { 0%,100% { -o-transform: rotate(0deg); } 25%{-o-transform: rotate(-1deg);} 75% { -o-transform: rotate(1deg); } }
@keyframes jig { 0%,100% { transform: rotate(0deg); } 25%{transform: rotate(-1deg);} 75% { transform: rotate(1deg); } }
tr:hover:nth-child(odd) td:first-child a img {
 -webkit-animation: jig 0.25s infinite;
 -moz-animation: jig 0.25s infinite;
 -ms-animation: jig 0.25s infinite;
 -o-animation: jig 0.25s infinite;
 animation: jig 0.25s infinite;
 -webkit-animation-timing-function:ease-in-out;
 -moz-animation-timing-function:ease-in-out;
 -ms-animation-timing-function:ease-in-out;
 -o-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}


td{
 display:block;
 padding:3px;
 vertical-align:bottom;
 text-overflow: ellipsis;
 margin-bottom:0.3em;
}
td[valign=top]{vertical-align:middle;}
td:first-child{
 /*width:1em;*/
 text-align:center;
 /*border-left: 1px solid orange;*/
}
td:first-child a img {
 width: 15em;
 max-width:100%;
 /*height:10em;*/
 /*height: 1em;*/
}

td:nth-child(2)
{
 max-width:15em;
 overflow:hidden;
 margin:auto;
 /*white-space:nowrap;*/
}

td:nth-last-child(2){
 font-family:'Droid Sans Mono', mono;
 /*width: 11em;*/
 font-variant: small-caps;
}
td:last-child{
 font-family:'Droid Sans Mono', mono;
 padding-right:5px; 
 /*border-right: 1px solid orange;*/
 /*width:5em;*/
 text-algin:center;
}


/*clean up new last row*/
/*tr:nth-last-child(2) td {border-bottom: 1px solid orange;}*/
/*tr:nth-last-child(2):hover td{border-bottom: 1px solid orange;padding-bottom:3px;}*/

/*img{height:1em;}*/

/photo/auto_index_resources/cache/.htaccess

Using Timthumb, but using .htaccess redirects. Serve up thumbnailed images automatically, and generate if not present. Nobody needs to know we are using timthumb this way.

#timthumb cache hack
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ /photo/auto_index_resources/timthumb.php?src=$1&w=500&zc=1&q=100 [L]

(/photo)/auto_index_resources/timthumb.php (2.8.10) patch file

Minor changes needed to be made to the popular timthump.php to make it usable with the .htaccess rewrites. notably, setting the directory($this->cachefile = $this->cacheDirectory . '/' . $this.src;), removing the extra "security" bytes at the beginning of the cached file and duplicating the directory structure.

--- timthumb.org.php 2012-03-09 10:52:28.591953121 -0700
+++ timthumb.php 2012-11-17 05:56:31.000000000 -0700
@@ -23,8 +23,11 @@
 define ('VERSION', '2.8.10');                  // Version of this script 
 //Load a config file if it exists. Otherwise, use the values below
 if( file_exists(dirname(__FILE__) . '/timthumb-config.php')) require_once('timthumb-config.php');
-if(! defined('DEBUG_ON') )     define ('DEBUG_ON', false);        // Enable debug logging to web server error log (STDERR)
-if(! defined('DEBUG_LEVEL') )    define ('DEBUG_LEVEL', 1);        // Debug level 1 is less noisy and 3 is the most noisy
+if(! defined('DEBUG_ON') )     define ('DEBUG_ON', true);
+        
+// Enable debug logging to web server error log (STDERR)
+if(! defined('DEBUG_LEVEL') )    define ('DEBUG_LEVEL', 3);
+        //Debug level 1 is less noisy and 3 is the most noisy
 if(! defined('MEMORY_LIMIT') )    define ('MEMORY_LIMIT', '30M');       // Set PHP memory limit
 if(! defined('BLOCK_EXTERNAL_LEECHERS') )  define ('BLOCK_EXTERNAL_LEECHERS', false);    // If the image or webshot is being loaded on an external site, display a red "No Hotlinking" gif.
 
@@ -32,9 +35,11 @@
 if(! defined('ALLOW_EXTERNAL') )   define ('ALLOW_EXTERNAL', TRUE);      // Allow image fetching from external websites. Will check against ALLOWED_SITES if ALLOW_ALL_EXTERNAL_SITES is false
 if(! defined('ALLOW_ALL_EXTERNAL_SITES') )  define ('ALLOW_ALL_EXTERNAL_SITES', false);    // Less secure. 
 if(! defined('FILE_CACHE_ENABLED') )   define ('FILE_CACHE_ENABLED', TRUE);     // Should we store resized/modified images on disk to speed things up?
-if(! defined('FILE_CACHE_TIME_BETWEEN_CLEANS')) define ('FILE_CACHE_TIME_BETWEEN_CLEANS', 86400); // How often the cache is cleaned 
+if(! defined('FILE_CACHE_TIME_BETWEEN_CLEANS')) define ('FILE_CACHE_TIME_BETWEEN_CLEANS', PHP_INT_MAX);
+ // How often the cache is cleaned 
 
-if(! defined('FILE_CACHE_MAX_FILE_AGE') )  define ('FILE_CACHE_MAX_FILE_AGE', 86400);    // How old does a file have to be to be deleted from the cache
+if(! defined('FILE_CACHE_MAX_FILE_AGE') )  define ('FILE_CACHE_MAX_FILE_AGE', PHP_INT_MAX);
+    // How old does a file have to be to be deleted from the cache
 if(! defined('FILE_CACHE_SUFFIX') )   define ('FILE_CACHE_SUFFIX', '.timthumb.txt');   // What to put at the end of all files in the cache directory so we can identify them
 if(! defined('FILE_CACHE_PREFIX') )   define ('FILE_CACHE_PREFIX', 'timthumb');    // What to put at the beg of all files in the cache directory so we can identify them
 if(! defined('FILE_CACHE_DIRECTORY') )   define ('FILE_CACHE_DIRECTORY', './cache');    // Directory where images are cached. Left blank it will use the system temporary directory (which is better for security)
@@ -49,7 +54,7 @@
 //Image size and defaults
 if(! defined('MAX_WIDTH') )    define ('MAX_WIDTH', 1500);         // Maximum image width
 if(! defined('MAX_HEIGHT') )    define ('MAX_HEIGHT', 1500);        // Maximum image height
-if(! defined('NOT_FOUND_IMAGE') )  define ('NOT_FOUND_IMAGE', '');        // Image to serve if any 404 occurs 
+if(! defined('NOT_FOUND_IMAGE') )  define ('NOT_FOUND_IMAGE', 'http://'+$_SERVER['SERVER_NAME'] +'/stargate/120px-Stargate-earth-glyph.svg.png');        // Image to serve if any 404 occurs 
 if(! defined('ERROR_IMAGE') )   define ('ERROR_IMAGE', '');         // Image to serve if an error occurs instead of showing error message 
 if(! defined('PNG_IS_TRANSPARENT') )  define ('PNG_IS_TRANSPARENT', FALSE);  //42 Define if a png image should have a transparent background color. Use False value if you want to display a custom coloured canvas_colour 
 if(! defined('DEFAULT_Q') )    define ('DEFAULT_Q', 90);         // Default image quality. Allows overrid in timthumb-config.php
@@ -272,7 +277,10 @@
    $this->debug(1, "Local image path is {$this->localImage}");
    $this->localImageMTime = @filemtime($this->localImage);
    //We include the mtime of the local file in case in changes on disk.
-   $this->cachefile = $this->cacheDirectory . '/' . FILE_CACHE_PREFIX . $cachePrefix . md5($this->salt . $this->localImageMTime . $_SERVER ['QUERY_STRING'] . $this->fileCacheVersion) . FILE_CACHE_SUFFIX;
+   $this->cachefile = $this->cacheDirectory . '/' . 
+$this->src;
+//echo $this->src;
+//FILE_CACHE_PREFIX . $cachePrefix . md5($this->salt . $this->localImageMTime . $_SERVER ['QUERY_STRING'] . $this->fileCacheVersion) . FILE_CACHE_SUFFIX;
   }
   $this->debug(2, "Cache file is: " . $this->cachefile);
 
@@ -794,11 +802,17 @@
   $tempfile4 = tempnam($this->cacheDirectory, 'timthumb_tmpimg_');
   $context = stream_context_create ();
   $fp = fopen($tempfile,'r',0,$context);
-  file_put_contents($tempfile4, $this->filePrependSecurityBlock . $imgType . ' ?' . '>'); //6 extra bytes, first 3 being image type 
+  //file_put_contents($tempfile4, $this->filePrependSecurityBlock . $imgType . ' ?' . '>'); //6 extra bytes, first 3 being image type 
   file_put_contents($tempfile4, $fp, FILE_APPEND);
   fclose($fp);
   @unlink($tempfile);
   $this->debug(3, "Locking and replacing cache file.");
+  $filename = $this->cachefile;
+$dirname = dirname($filename);
+if (!is_dir($dirname))
+{
+    mkdir($dirname, 0755, true);
+}
   $lockFile = $this->cachefile . '.lock';
   $fh = fopen($lockFile, 'w');
   if(! $fh){
@@ -807,6 +821,7 @@
   if(flock($fh, LOCK_EX)){
    @unlink($this->cachefile); //rename generally overwrites, but doing this in case of platform specific quirks. File might not exist yet.
    rename($tempfile4, $this->cachefile);
+   chmod($this->cachefile, 0644);
    flock($fh, LOCK_UN);
    fclose($fh);
    @unlink($lockFile);
@@ -1019,14 +1034,17 @@
   }
   $fp = fopen($this->cachefile, 'rb');
   if(! $fp){ return $this->error("Could not open cachefile."); }
-  fseek($fp, strlen($this->filePrependSecurityBlock), SEEK_SET);
-  $imgType = fread($fp, 3);
-  fseek($fp, 3, SEEK_CUR);
-  if(ftell($fp) != strlen($this->filePrependSecurityBlock) + 6){
+  //fseek($fp, strlen($this->filePrependSecurityBlock), SEEK_SET);
+
+list($width, $height, $type, $attr) = getimagesize ( $this->cachefile);
+//echo $width +" " +$height +" "+$type+" "+ $attr ;
+//  $imgType = fread($fp, 3); //pwdecho $imgType;
+  fseek($fp, 0, SEEK_CUR);
+/*  if(ftell($fp) != strlen($this->filePrependSecurityBlock) + 6){
    @unlink($this->cachefile);
    return $this->error("The cached image file seems to be corrupt.");
-  }
-  $imageDataSize = filesize($this->cachefile) - (strlen($this->filePrependSecurityBlock) + 6);
+  }*/
+  $imageDataSize = filesize($this->cachefile);// - (strlen($this->filePrependSecurityBlock) + 6);
   $this->sendImageHeaders($imgType, $imageDataSize);
   $bytesSent = @fpassthru($fp);
   fclose($fp);
@@ -1035,7 +1053,7 @@
   }
   $content = file_get_contents ($this->cachefile);
   if ($content != FALSE) {
-   $content = substr($content, strlen($this->filePrependSecurityBlock) + 6);
+   //$content = substr($content, strlen($this->filePrependSecurityBlock) + 6);
    echo $content;
    $this->debug(3, "Served using file_get_contents and echo");
    return true;
@@ -1045,12 +1063,13 @@
   }
  }
  protected function sendImageHeaders($mimeType, $dataSize){
-  if(! preg_match('/^image\//i', $mimeType)){
-   $mimeType = 'image/' . $mimeType;
-  }
-  if(strtolower($mimeType) == 'image/jpg'){
+//  if(! preg_match('/^image\//i', $mimeType)){
+//echo "!!!!!!!!!! "+$mimeType+ " !!!!!!!!!!!!";
+//   $mimeType = 'image/' . $mimeType;
+//  }
+//  if(strtolower($mimeType) == 'image/jpg'){
    $mimeType = 'image/jpeg';
-  }
+//  }
   $gmdate_expires = gmdate ('D, d M Y H:i:s', strtotime ('now +10 days')) . ' GMT';
   $gmdate_modified = gmdate ('D, d M Y H:i:s') . ' GMT';
   // send content headers then display image
@@ -1217,6 +1236,7 @@
  protected function serveImg($file){
   $s = getimagesize($file);
   if(! ($s && $s['mime'])){
+   print_r($s);
    return false;
   }
   header ('Content-Type: ' . $s['mime']);

/auto_index_resources/timthumb-config.php

This was used on directories with very large images. up the memory:

<?php define ('MEMORY_LIMIT', '128M');?>