Steven Smith revised this gist . Go to revision
No changes
Steven Smith revised this gist . Go to revision
1 file changed, 88 insertions
comicviewer.html(file created)
| @@ -0,0 +1,88 @@ | |||
| 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> | |
Newer
Older