View images in local directories. Use left and right arrow keys to navigate. \ key to go back to the main directory.
Per
// ==UserScript==
// @name Local Image Viewer
// @description View images in local directories. Use left and right arrow keys to navigate. \ key to go back to the main directory.
// @namespace localimgviewer
// @include file:///*
// @version 4
// @grant none
// ==/UserScript==
var fileLinks;
var fileList = [];
var addr = [
location.href, // full addr
location.href.substring(location.href.lastIndexOf('/') + 1) // file name
];
var curPos = 0;
var nextPos = 0, prevPos = 0;
var nextFile, prevFile;
var div = null;
if(!isAnImage(addr[1])) { // folder
addr[0] = addr[0][addr[0].length - 1] == '/' ? addr[0] : addr[0] + '/';
console.log('Viewing folder ' + addr[0]);
fileLinks = document.getElementsByClassName('file');
for(var i=0, f='', c=0; i<fileLinks.length; i++) {
f = fileLinks[i].getAttribute('href');
if(f.indexOf('/') != -1) f = f.substring(f.lastIndexOf('/') + 1);
if(isAnImage(f)) { fileList.push(f); c++; }
}
if(c) hookKeys();
sessionStorage.setItem('files', JSON.stringify(fileList));
sessionStorage.setItem('curpos', curPos);
}
else { // file
if(!isAnImage(addr[1])) return;
document.getElementsByTagName('img')[0].click();
fileList = JSON.parse(sessionStorage.getItem('files'));
curPos = fileList.indexOf(addr[1]);
sessionStorage.setItem('curpos', curPos);
if(curPos >= fileList.length - 1) nextPos = 0; else nextPos = curPos + 1;
if(curPos <= 0) prevPos = fileList.length - 1; else prevPos = curPos - 1;
hookKeys();
createInfoBox();
}
function createInfoBox() {
div = document.createElement('div');
div.id = 'imgViewer';
div.style = 'margin: 10px; padding: 10px 20px; border: 1px solid #555; border-radius: 10px; top: 0; left: 0; position: fixed; display: inline-block; opacity: 1.0; background-color: #111; color: #AAA; font-family: Georgia';
document.body.appendChild(div);
div.innerHTML += '<span style="font-weight: bold; color: #FFF;">Image ' + (curPos+1) + '/' + fileList.length + '</span> <br><span style="color: #AF3;">' + decodeURIComponent(addr[1]) + '</span>';
div.innerHTML += '<br><br><span style="font-size: 75%;">Prev: ' + decodeURIComponent(fileList[prevPos]) + '<br>Next: ' + decodeURIComponent(fileList[nextPos]) + '</span>';
div.style.opacity = sessionStorage.getItem('imgViewerOpacity');
div.addEventListener("click", function() {
var opac = parseFloat(this.style.opacity);
if(opac >= 1.0) opac = 0.0; else opac += 0.2;
this.style.opacity = opac;
sessionStorage.setItem('imgViewerOpacity', opac);
});
}
function hookKeys() {
document.onkeydown = function(e) {
var key = e.keyCode || e.which;
// console.log('pressed key ' + key);
if(!e.altKey && !e.ctrlKey && !e.shiftKey) {
if(key == 39) { if(fileList[nextPos]) location.assign(fileList[nextPos]); }
else if(key == 37) { if(fileList[prevPos]) location.assign(fileList[prevPos]); }
else if(key == 220) location.assign(location.href.substring(0, location.href.lastIndexOf('/')));
}
};
}
function isAnImage(x) {
var ext = x.split('.').pop();
if(ext == 'jpg' || ext == 'jpeg' || ext == 'bmp' || ext == 'png' || ext == 'gif' || ext == 'tga') return true;
else return false;
return false;
}