html_galery_generator.sh

#!/bin/bash

thumb_width=209
thumb_height=300
thumb_step=8

echo "var pages=[" > "galery_data.js"
find -type d | while read filename; do
if [ "$filename" != "." ]; then
    echo -n "'" >> "galery_data.js"
    find "$filename" -type f | grep "\.jpg$\|\.png$\|\.gif$" | awk -v w=$thumb_width -v h=$thumb_height -v s=$thumb_step -F'\t' 'BEGIN { n=0 } { title=$1; sub(/[^/]*$/,"",title); if (n==0) print "<h1>" title "</h1>"; if ( n % s == 0 ) print n "<img src=\"" $1 "\" style=\"width: " w "px; height: " h "px\">"; n=n+1;}' | tr '\n' ' ' >> "galery_data.js"
    echo "'," >> "galery_data.js"
    #break
fi
done
echo "''];" >> "galery_data.js"

echo '<html>
<head>
<title> Galery preview </title>
<script type="text/javascript" src="galery_data.js"></script>
<script type="text/javascript" src="galery_script.js"></script>
</head>
<body onload="setPage(0);">
<form name="main" method="get" action="?" enctype="application/x-www-form-urlencoded">
<input type="button" name="" value="<" onclick="prevPage();"/>
<input type="text" name="current" value="0" size="3" onchange="setPage(parseInt(this.value));"/>
<input type="button" name="" value=">" onclick="nextPage();"/>
</form>
<div id="preview">
</div>
</body>
</html>' > galery.html

echo 'function setPage(n) {
    var preview = document.getElementById("preview");
    while (preview.hasChildNodes())
        preview.removeChild(preview.firstChild);
    var child = document.createElement("div");
    child.innerHTML = pages[n];
    preview.appendChild(child);
    document.forms["main"].current.value = n;
}

function nextPage() {
    var n = parseInt(document.forms["main"].current.value);
    if (n+1<pages.length) {
        n = n + 1;
        setPage(n);
    }
}

function prevPage() {
    var n = parseInt(document.forms["main"].current.value);
    if (n>0) {
        n = n - 1;
        setPage(n);
    }
}' > galery_script.js