comicviewer.html
· 2.4 KiB · HTML
Raw
<html>
<head>
<script>
// Comic Viewer by blha303 https://github.com/blha303
// BSD license
// Please leave this header here
// Below settings are for a folder of images named 'concerned000.jpg'-'concerned205.jpg'
prefix = "concerned" // Filename prefix
suffix = ".jpg" // Filename suffix or extension
startnum = 0 // Starting number for comic files
pad = 3 // Amount of zero padding in filenames
endnum = 205 // Last comic number
// And the end of the settings!
// http://stackoverflow.com/a/10075654
function lpad(number, digits) {
return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number
}
function changeImage(id) {
window.scrollTo(0,0);
idi = parseInt(id)
window.location.hash = id.toString()
document.getElementById("img").src = prefix + lpad(idi, pad) + suffix
document.getElementById("img").onclick = function(e) {
if (idi < endnum)
changeImage(idi+1)
else
changeImage(startnum)
}
document.getElementById("navselect").selectedIndex = idi
document.getElementById("prev").onclick = function(e){
if (idi > startnum)
changeImage(idi-1)
else
changeImage(endnum)
}
document.getElementById("next").onclick = function(e){
if (idi < endnum)
changeImage(idi+1)
else
changeImage(startnum)
}
}
window.addEventListener("load", function(e) {
for (var i=startnum;i<=endnum;i++) {
option = document.createElement("option")
option.value = i
option.innerText = lpad(i, pad)
document.getElementById("navselect").appendChild(option)
}
if (window.location.hash) {
changeImage(window.location.hash.substr(1))
} else {
changeImage(endnum)
}
// rock the navbar
document.getElementById("navselect").onchange = function(e) {
changeImage(e.target.selectedIndex)
}
document.getElementById("first").onclick = function(e) {
changeImage(startnum)
}
document.getElementById("last").onclick = function(e) {
changeImage(endnum)
}
})
</script>
<style>
img {
cursor: pointer;
}
a {
color: #07C;
text-decoration: none;
cursor: pointer;
}
</style>
<title>Comic Viewer</title>
</head>
<body>
<center>
<a id="first">First</a> | <a id="prev">Previous</a> | <select name="navselect" id="navselect"></select> | <a id="next">Next</a> | <a id="last">Last</a><br>
<img id="img">
</center>
</body>
</html>
| 1 | <html> |
| 2 | <head> |
| 3 | <script> |
| 4 | // Comic Viewer by blha303 https://github.com/blha303 |
| 5 | // BSD license |
| 6 | // Please leave this header here |
| 7 | |
| 8 | // Below settings are for a folder of images named 'concerned000.jpg'-'concerned205.jpg' |
| 9 | prefix = "concerned" // Filename prefix |
| 10 | suffix = ".jpg" // Filename suffix or extension |
| 11 | startnum = 0 // Starting number for comic files |
| 12 | pad = 3 // Amount of zero padding in filenames |
| 13 | endnum = 205 // Last comic number |
| 14 | // And the end of the settings! |
| 15 | |
| 16 | // http://stackoverflow.com/a/10075654 |
| 17 | function lpad(number, digits) { |
| 18 | return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number |
| 19 | } |
| 20 | |
| 21 | function changeImage(id) { |
| 22 | window.scrollTo(0,0); |
| 23 | idi = parseInt(id) |
| 24 | window.location.hash = id.toString() |
| 25 | document.getElementById("img").src = prefix + lpad(idi, pad) + suffix |
| 26 | document.getElementById("img").onclick = function(e) { |
| 27 | if (idi < endnum) |
| 28 | changeImage(idi+1) |
| 29 | else |
| 30 | changeImage(startnum) |
| 31 | } |
| 32 | document.getElementById("navselect").selectedIndex = idi |
| 33 | document.getElementById("prev").onclick = function(e){ |
| 34 | if (idi > startnum) |
| 35 | changeImage(idi-1) |
| 36 | else |
| 37 | changeImage(endnum) |
| 38 | } |
| 39 | document.getElementById("next").onclick = function(e){ |
| 40 | if (idi < endnum) |
| 41 | changeImage(idi+1) |
| 42 | else |
| 43 | changeImage(startnum) |
| 44 | } |
| 45 | } |
| 46 | window.addEventListener("load", function(e) { |
| 47 | for (var i=startnum;i<=endnum;i++) { |
| 48 | option = document.createElement("option") |
| 49 | option.value = i |
| 50 | option.innerText = lpad(i, pad) |
| 51 | document.getElementById("navselect").appendChild(option) |
| 52 | } |
| 53 | if (window.location.hash) { |
| 54 | changeImage(window.location.hash.substr(1)) |
| 55 | } else { |
| 56 | changeImage(endnum) |
| 57 | } |
| 58 | // rock the navbar |
| 59 | document.getElementById("navselect").onchange = function(e) { |
| 60 | changeImage(e.target.selectedIndex) |
| 61 | } |
| 62 | document.getElementById("first").onclick = function(e) { |
| 63 | changeImage(startnum) |
| 64 | } |
| 65 | document.getElementById("last").onclick = function(e) { |
| 66 | changeImage(endnum) |
| 67 | } |
| 68 | }) |
| 69 | </script> |
| 70 | <style> |
| 71 | img { |
| 72 | cursor: pointer; |
| 73 | } |
| 74 | a { |
| 75 | color: #07C; |
| 76 | text-decoration: none; |
| 77 | cursor: pointer; |
| 78 | } |
| 79 | </style> |
| 80 | <title>Comic Viewer</title> |
| 81 | </head> |
| 82 | <body> |
| 83 | <center> |
| 84 | <a id="first">First</a> | <a id="prev">Previous</a> | <select name="navselect" id="navselect"></select> | <a id="next">Next</a> | <a id="last">Last</a><br> |
| 85 | <img id="img"> |
| 86 | </center> |
| 87 | </body> |
| 88 | </html> |