Pictureviewer.html

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