<!doctype html>
<html lang="en"><head> <meta charset="UTF-8">
<title>Image Gallery</title>
<style>
body{
margin: 0;
}
a{
text-decoration: none;
color: slateblue;
}
#gallery{
background-color: #d1e9ff;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
/* justify-content: space-between;*/
align-content: flex-start;
/* align-content: space-between;*/
/* align-content: stretch;*/
/* align-items: flex-start;*/
min-height: 100vh;
margin: 0;
padding: 0;
}
.thumb{
background-color: white;
outline: solid lightgrey 1px;
list-style-type: none;
margin: 1pc;
padding: 0.5pc;
font-size: 14pt;
/* Segoe UI is a default Windows 7 font with a thin elegant look. It's also the default UI font for windows itself. */
font-family: Segoe UI, sans-serif;
text-align: center;
width: 27vw;
min-width: 12pc;
max-width: 13pc;
box-shadow: 0 3pt 0.8pc -0.5pc rgba(0,0,160, 1);
}
.thumbImage{
width: 100%;
/* Remove the mysterious gap under wide images */
margin: -0.4pc;
padding-top: 0.4pc;
}
.folderImage{
content: url("data:image/svg+xml;utf8,<svg enable-background='new 0 0 58 58' version='1.1' viewBox='0 0 58 47' xmlns='http://www.w3.org/2000/svg'><path d='m46.324 47h-44.759c-1.03 0-1.779-0.978-1.51-1.973l10.166-27.871c0.184-0.682 0.803-1.156 1.51-1.156h44.759c1.03 0 1.51 0.984 1.51 1.973l-10.166 27.871c-0.184 0.682-0.803 1.156-1.51 1.156z' fill='%23efce4a'/><path d='M 50.268,7 H 25 L 20,0 H 1.732 C 0.776,0 0,0.775 0,1.732 V 44.46 c 0.069,0.002 0.138,0.006 0.205,0.01 L 10.22,17.156 C 10.404,16.473 11.023,16 11.73,16 H 52 V 8.732 C 52,7.775 51.224,7 50.268,7 Z' fill='%23ebba16'/></svg>");
/* reduce its size... */
padding: 0 0.5pc;
padding-top: 0.5pc;
/* ... relative to the image area */
width: 100%;
/* make the padding shrink the item's contents, instead of growing its size */
box-sizing: border-box;
}
.thumbImageCrop{
background-color: white;
/* checkerboard pattern */
background-image: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%);
/* background-position: 0 0, 10px 10px;*/
/* background-size: 20px 20px;*/
background-position: 0 0, 1pc 1pc;
background-size: 2pc 2pc;
max-height: 11pc;
overflow: hidden;
/* makes the border appear inside the image and trace its cropped edges. Also shrinks the image to fit inside of its border */
box-sizing: border-box;
border: solid lightgrey 1px;
}
.fileName{
text-align: center;
margin: 0;
padding-top: 0.5pc;
/* padding-bottom: 1pc;*/
line-height: 1.3em;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head><body>
<ul id="gallery">
</ul>
<script>
(function(){
// loaded files are parsed, and then stored into these variables
var fileList_ary;
var folderList_ary;
// call this after those variables are populated
function allFilesLoaded(){
// generate thumbs
// find gallery
var gallery_elm = document.getElementById("gallery");
var innerHtml_str = '';
// add folders
for(var i=0; i<folderList_ary.length; i++){
var folderName = folderList_ary[i];
// create HTML
var thumbHtml_str = '';
thumbHtml_str += '<li class="thumb">';
thumbHtml_str += ' <a href="' + folderName + '" target="_blank">';
thumbHtml_str += ' <div class="folderImage"></div>';
// thumbHtml_str += ' </div>';
thumbHtml_str += ' <p class="folderName">' + folderName + '</p>';
thumbHtml_str += ' </a>';
thumbHtml_str += '</li>';
// add this thumbnail to the new html
innerHtml_str += thumbHtml_str;
}// for each folder
// add files
for(var i=0; i<fileList_ary.length; i++){
var fileName = fileList_ary[i];
var thumbPath = 'thumbs/' + fileName;
// create HTML
var thumbHtml_str = '';
thumbHtml_str += '<li class="thumb">';
thumbHtml_str += ' <a href="' + fileName + '" target="_blank">';
thumbHtml_str += ' <div class="thumbImageCrop">';
thumbHtml_str += ' <img class="thumbImage" src="' + thumbPath + '">';
thumbHtml_str += ' </div>';
thumbHtml_str += ' </a>';
thumbHtml_str += ' <a href="' + fileName + '" download>';
thumbHtml_str += ' <p class="fileName">' + fileName + '</p>';
thumbHtml_str += ' </a>';
thumbHtml_str += '</li>';
// add this thumbnail to the new html
innerHtml_str += thumbHtml_str;
}// for each file
// populate the gallery
gallery_elm.innerHTML = innerHtml_str;
}// allFilesLoaded()
// check whether the data variables are populated, and then call allFilesLoaded()
function check_allFilesLoaded(){
// if: any data is missing, then abort
if( !fileList_ary ) return;
if( !folderList_ary ) return;
// else: all data exists
allFilesLoaded();
}// check_allFilesLoaded()
// read fileList.txt
var files_xhr = new XMLHttpRequest();
files_xhr.open("GET", "fileList.txt");
files_xhr.responseType = "text";
files_xhr.send();
files_xhr.onload = function(){
if( files_xhr.status === 200 ){
var contents_str = files_xhr.responseText;
var contents_ary = contents_str.split(/[\r\n]+/);
// remove empty lines
for(var i=contents_ary.length-1; i>=0; i--){
if( contents_ary[i].length === 0 ) contents_ary.splice( i, 1 );
}// for each line in contents_ary
fileList_ary = contents_ary;
}// if: success
else
{//if: fail
fileList_ary = [];
}//if: fail
check_allFilesLoaded();
}// onLoad()
// read folderList.txt
var folders_xhr = new XMLHttpRequest();
folders_xhr.open("GET", "folderList.txt");
folders_xhr.responseType = "text";
folders_xhr.send();
folders_xhr.onload = function(){
if( folders_xhr.status === 200 ){
var contents_str = folders_xhr.responseText;
var contents_ary = contents_str.split(/[\r\n]+/);
// remove empty lines
for(var i=contents_ary.length-1; i>=0; i--){
if( contents_ary[i].length === 0 ) contents_ary.splice( i, 1 );
}// for each line in contents_ary
folderList_ary = contents_ary;
}// if: success
else
{//if: fail
folderList_ary = [];
}//if: fail
check_allFilesLoaded();
}// onLoad()
}());
</script>
</body></html>