| 1 | <html lang="de">\r |
| 2 | <head>\r |
| 3 | <title>Pictureviewer2</title>\r |
| 4 | <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" >\r |
| 5 | <meta name="author" content="Dietmar" >\r |
| 6 | <meta name="CHANGED" content="20191027;20000001">\r |
| 7 | \r |
| 8 | <link rel="stylesheet" type="text/css" href="Pictureviewer.css">\r |
| 9 | \r |
| 10 | <script src="PictureList.txt" type="text/javascript" charset="utf-8"></script>\r |
| 11 | \r |
| 12 | <script>\r |
| 13 | var cDefault_FileN_Style = "Pic_Filename";\r |
| 14 | var Pic_curr; // current picture number\r |
| 15 | var Pic_num ; // last picture number\r |
| 16 | var ID_Body; // ID des Bodies\r |
| 17 | var ID_Anzeige; // Anzeigelement: Bild, Video, ..\r |
| 18 | var picturenumber; // number typed by user for direct access to pictures\r |
| 19 | var pictureList = new Array();\r |
| 20 | \r |
| 21 | function Doc_Init() { // Init document\r |
| 22 | ID_Body = document.getElementById("ID_Body");\r |
| 23 | ID_Body.onkeyup = ChangePic;\r |
| 24 | ID_Body.onmouseup=HandleMouseEvent;\r |
| 25 | ID_Anzeige = document.getElementById("idAnzeige");\r |
| 26 | \r |
| 27 | // if (window.location.search != "") // does not really help, because PictureList is already included\r |
| 28 | // pic_dir = window.location.search.substr(1,99)+"/"+pic_dir; // remove "?", add separator ***\r |
| 29 | \r |
| 30 | pictureList = pictureString.split("\n");\r |
| 31 | Pic_num = pictureList.length-1;\r |
| 32 | SetPic(0);\r |
| 33 | }\r |
| 34 | \r |
| 35 | function SetPic(n) {\r |
| 36 | Pic_curr = n;\r |
| 37 | if (Pic_curr > Pic_num) Pic_curr = Pic_num;\r |
| 38 | if (Pic_curr < 0) Pic_curr = 0;\r |
| 39 | \r |
| 40 | ID_Anzeige.innerHTML = pictureList[Pic_curr];\r |
| 41 | picturenumber=0;\r |
| 42 | } \r |
| 43 | \r |
| 44 | function ChangePic(Keyhandler){\r |
| 45 | if (!Keyhandler) Keyhandler = window.event;\r |
| 46 | tastatur = Keyhandler.key;\r |
| 47 | switch (tastatur) { \r |
| 48 | case "Home": // "POS1": 1st picture\r |
| 49 | SetPic(0);\r |
| 50 | break\r |
| 51 | case "End": // "Ende": last picture\r |
| 52 | SetPic(Pic_num);\r |
| 53 | break\r |
| 54 | case "a": // reload picture\r |
| 55 | case "r":\r |
| 56 | SetPic(Pic_curr);\r |
| 57 | break\r |
| 58 | case "v": // next picture\r |
| 59 | case "n":\r |
| 60 | case "PageDown": \r |
| 61 | case "ArrowDown": \r |
| 62 | NextPicture();\r |
| 63 | break\r |
| 64 | case "b": // back picture\r |
| 65 | case "z":\r |
| 66 | case "PageUp":\r |
| 67 | case "ArrowUp":\r |
| 68 | BackPicture();\r |
| 69 | break\r |
| 70 | case "+": // +\r |
| 71 | SetPic(Pic_curr+picturenumber);\r |
| 72 | break\r |
| 73 | case "-": // -\r |
| 74 | SetPic(Pic_curr-picturenumber);\r |
| 75 | break \r |
| 76 | case "0": // 0..9\r |
| 77 | case "1":\r |
| 78 | case "2":\r |
| 79 | case "3":\r |
| 80 | case "4":\r |
| 81 | case "5":\r |
| 82 | case "6":\r |
| 83 | case "7":\r |
| 84 | case "8":\r |
| 85 | case "9":\r |
| 86 | picturenumber=picturenumber*10+Number(tastatur);\r |
| 87 | break\r |
| 88 | case "g": // "g": goto\r |
| 89 | SetPic(picturenumber);\r |
| 90 | break\r |
| 91 | case "x": // "x" to close\r |
| 92 | window.close();\r |
| 93 | break\r |
| 94 | }\r |
| 95 | }\r |
| 96 | \r |
| 97 | function BackPicture() {\r |
| 98 | SetPic(Pic_curr-1);\r |
| 99 | }\r |
| 100 | \r |
| 101 | function NextPicture() {\r |
| 102 | SetPic(Pic_curr+1);\r |
| 103 | }\r |
| 104 | \r |
| 105 | function HandleMouseEvent(e) {\r |
| 106 | if (!e) e = window.event;\r |
| 107 | LeftClicked = 0.33; // left clicked if in left 33%\r |
| 108 | RightClicked = 0.66; // left clicked if in right 33%\r |
| 109 | WindowWidth = window.innerWidth;\r |
| 110 | if (e.clientX < (WindowWidth*LeftClicked)) { BackPicture() }\r |
| 111 | else if (e.clientX > (WindowWidth*RightClicked)) { NextPicture() }\r |
| 112 | }\r |
| 113 | \r |
| 114 | </script>\r |
| 115 | \r |
| 116 | </head>\r |
| 117 | \r |
| 118 | <body id="ID_Body" onload="Doc_Init()">\r |
| 119 | \r |
| 120 | <span id="idAnzeige"></span>\r |
| 121 | \r |
| 122 | </body>\r |
| 123 | </html>\r |