plugins/viewer/template.php

   1 <html>
   2 <head>
   3 <title> <?= IMAGES_DIR.$simpleImagePath ?> </title>
   4 <style type="text/css">
   5 html, body {
   6         height: 100%;
   7 }
   8 body {
   9         margin: 0;
  10         text-align: center;
  11         background: black;
  12         color: white;
  13 }
  14 #theimage {
  15         max-width: 100%;
  16         max-height: 100%;
  17         image-orientation: from-image;
  18 }
  19 a {
  20         color: white;
  21         text-decoration: none;
  22 }
  23 #next, #previous, #up {
  24         position: fixed;
  25         font-size: 4em;
  26         font-weight: bold;
  27 }
  28
  29 #up {
  30         top: 0;
  31         left: 0;
  32
  33 }
  34 #next {
  35         top: 50%;
  36         right: -0;
  37
  38 }
  39 #previous {
  40         top: 50%;
  41         left: 0;
  42 }
  43 img {
  44         border: 0;
  45 }
  46 </style>
  47
  48 <?php if ($nextImageUrl !== '' and $firefox) { ?>
  49 <link rel="prefetch" href="<?= $nextImageUrl ?>" />
  50 <link rel="prefetch" href="<?= $nextPageUrl ?>" />
  51 <?php } ?>
  52
  53 </head>
  54 <body>
  55
  56 <a href="<?= $imageUrl ?>"><img src="<?= $imageUrl ?>" id="theimage" /></a>
  57
  58 <div id="up">
  59 <a href="<?= $directoryUrl ?>" title="Back to directory">^</a>
  60 </div>
  61
  62 <?php if ($nextPageUrl !== '') { ?>
  63 <div id="next">
  64 <a href="<?= $nextPageUrl ?>" title="Next image">&gt;</a>
  65 </div>
  66 <?php } ?>
  67
  68 <?php if ($prevPageUrl !== '') { ?>
  69 <div id="previous">
  70 <a href="<?= $prevPageUrl ?>" title="Previous image">&lt;</a>
  71 </div>
  72 <?php } ?>
  73
  74 <script type="text/javascript">
  75
  76 <?php if ($nextImageUrl !== '' and ! $firefox) { ?>
  77 window.onload = function() { // for browsers not supporting link rel=prefetch
  78         var im = new Image();
  79         im.src = '<?= $nextImageUrl ?>';
  80         var req = new XMLHttpRequest();
  81         req.open('GET', '<?= $nextPageUrl ?>', false);
  82         req.send(null);
  83 };
  84 <?php } ?>
  85
  86 // keyboard navigation
  87 function keyup(e)
  88 {
  89         switch (e.keyCode) {
  90                 case 37: // left
  91                         window.location = "<?= $prevPageUrl ?>";
  92                 break;
  93                 case 39: // right
  94                 case 32: // space
  95                         window.location = "<?= $nextPageUrl ?>";
  96                 break;
  97                 case 38: // up  (down is 40)
  98                         window.location = "<?= $directoryUrl ?>";
  99                 break;
 100                 case 13: // enter
 101                         window.location = "<?= $imageUrl ?>";
 102                 break;
 103         }
 104 }
 105
 106 if (document.addEventListener) {
 107         document.addEventListener("keyup", keyup, false);
 108 }
 109 </script>
 110
 111 </body>
 112 </html>