Simple JS image browser
Do you have a folder full of images? Do you just want a good image browser to browse them?
You can either use popular photo viewers to do that or simply use your browser. I dropped an HTML file with these contents, and that’s it. Going forward and backward is just by using your arrow keys (use your intuition :-)).
To adapting this is as simple as putting the list of images you have in the imgsrc array. Of course, this is a tedious process if you have a lot of images — but for me this is ok. For handling that case, you may need to automatically generate that array externally and then paste it here (use some shell script to generate it, for example). That’s an exercise for you :-)
None of this is very new and original (how can this simple thing be?). Code for a lot of this is from other places — so credits go to our internet community!
<html><head>
<title>Image browser</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}#board {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}#fname {
position: fixed;
left: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
var i = 0, imgsrc = new Array(), preload = new Array();//if you have another AudioContext class use that one, as some browsers have a limit
var audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);imgsrc[0] = "board01.svg";
imgsrc[1] = "board02.svg";
imgsrc[2] = "board03.svg";
imgsrc[3] = "board04.svg";
imgsrc[4] = "board05.svg";
imgsrc[5] = "board06.svg";
imgsrc[6] = "board07.svg";
imgsrc[7] = "board08.svg";
imgsrc[8] = "board09.svg";
imgsrc[9] = "board10.svg";
imgsrc[10] = "board11.svg";
imgsrc[11] = "board12.svg";
imgsrc[12] = "board13.svg";
imgsrc[13] = "board14.svg";for (var j = 0; j < imgsrc.length; j++) {
preload[j] = new Image;
preload[j].src = imgsrc[j];
}document.onkeydown = function (event) {
switch (event.keyCode) {
case 37: // Left key
case 38: // Up key
if (i == 0) {
beep();
message('First image - cannot go further behind!');
sleep(3000).then(() => {
setFname();
});
break;
}
i--; // Move to the previous image
document.getElementById("board").src = imgsrc[i];
setFname();
break;
case 39: // Right key
case 40: // Down keyif (i == (imgsrc.length - 1)) {
beep();
message('Last image - cannot go further!');
sleep(3000).then(() => {
setFname();
});
break;
}
i++; // Move to the next image
document.getElementById("board").src = imgsrc[i];
setFname();
break;
}
};function setFname() {
document.getElementById("fname").style.color = "black";
document.getElementById("fname").innerHTML = imgsrc[i];
}function message(msg) {
document.getElementById("fname").innerHTML = msg;
document.getElementById("fname").style.color = 'red';
}function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}//All arguments are optional:
//duration of the tone in milliseconds. Default is 500
//frequency of the tone in hertz. default is 440
//volume of the tone. Default is 1, off is 0.
//type of tone. Possible values are sine, square, sawtooth, triangle, and custom. Default is sine.
//callback to use on end of tone
function beep(duration, frequency, volume, type, callback) {
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);if (volume) { gainNode.gain.value = volume; }
if (frequency) { oscillator.frequency.value = frequency; }
if (type) { oscillator.type = type; }
if (callback) { oscillator.onended = callback; }oscillator.start(audioCtx.currentTime);
oscillator.stop(audioCtx.currentTime + ((duration || 500) / 1000));
};
</script>
</head><body>
<img id="board" alt="" />
<script type="text/javascript">document.getElementById("board").src = imgsrc[0];</script>
<label id="fname" />
<script type="text/javascript">document.getElementById("fname").innerHTML = imgsrc[0];</script>
</body>
</html>
