Put viewer template in a separate file
This commit is contained in:
parent
7be4394f07
commit
b5f42b9009
2 changed files with 115 additions and 111 deletions
111
plugins/viewer/template.php
Normal file
111
plugins/viewer/template.php
Normal file
|
@ -0,0 +1,111 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> <?php echo IMAGES_DIR.$simpleImagePath ?> </title>
|
||||||
|
<style type="text/css">
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#theimage {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#next, #previous, #up {
|
||||||
|
position: fixed;
|
||||||
|
font-size: 4em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#up {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
#next {
|
||||||
|
top: 50%;
|
||||||
|
right: -0;
|
||||||
|
|
||||||
|
}
|
||||||
|
#previous {
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<?php if ($nextImageUrl !== '' and $firefox) { ?>
|
||||||
|
<link rel="prefetch" href="<?php echo $nextImageUrl ?>" />
|
||||||
|
<link rel="prefetch" href="<?php echo $nextPageUrl ?>" />
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<a href="<?php echo $imageUrl ?>"><img src="<?php echo $imageUrl ?>" id="theimage" /></a>
|
||||||
|
|
||||||
|
<div id="up">
|
||||||
|
<a href="<?php echo $directoryUrl ?>" title="Back to directory">^</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if ($nextPageUrl !== '') { ?>
|
||||||
|
<div id="next">
|
||||||
|
<a href="<?php echo $nextPageUrl ?>" title="Next image">></a>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
<?php if ($prevPageUrl !== '') { ?>
|
||||||
|
<div id="previous">
|
||||||
|
<a href="<?php echo $prevPageUrl ?>" title="Previous image"><</a>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
<?php if ($nextImageUrl !== '' and ! $firefox) { ?>
|
||||||
|
window.onload = function() { // for browsers not supporting link rel=prefetch
|
||||||
|
var im = new Image();
|
||||||
|
im.src = '<?php echo $nextImageUrl ?>';
|
||||||
|
var req = new XMLHttpRequest();
|
||||||
|
req.open('GET', '<?php echo $nextPageUrl ?>', false);
|
||||||
|
req.send(null);
|
||||||
|
};
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
// keyboard navigation
|
||||||
|
function keyup(e)
|
||||||
|
{
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case 37: // left
|
||||||
|
window.location = "<?php echo $prevPageUrl ?>";
|
||||||
|
break;
|
||||||
|
case 39: // right
|
||||||
|
case 32: // space
|
||||||
|
window.location = "<?php echo $nextPageUrl ?>";
|
||||||
|
break;
|
||||||
|
case 38: // up (down is 40)
|
||||||
|
window.location = "<?php echo $directoryUrl ?>";
|
||||||
|
break;
|
||||||
|
case 13: // enter
|
||||||
|
window.location = "<?php echo $imageUrl ?>";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.addEventListener) {
|
||||||
|
document.addEventListener("keyup", keyup, false);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -76,117 +76,10 @@ $directoryUrl = $bizouRootUrl."index.php".dirname($simpleImagePath);
|
||||||
|
|
||||||
$firefox = strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false;
|
$firefox = strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false;
|
||||||
|
|
||||||
|
///// template starts here /////
|
||||||
header('Content-Type: text/html; charset=utf-8');
|
header('Content-Type: text/html; charset=utf-8');
|
||||||
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));
|
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));
|
||||||
|
|
||||||
|
require 'template.php';
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title> <?php echo IMAGES_DIR.$simpleImagePath ?> </title>
|
|
||||||
<style type="text/css">
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
background: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
#theimage {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#next, #previous, #up {
|
|
||||||
position: fixed;
|
|
||||||
font-size: 4em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#up {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
#next {
|
|
||||||
top: 50%;
|
|
||||||
right: -0;
|
|
||||||
|
|
||||||
}
|
|
||||||
#previous {
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<?php if ($nextImageUrl !== '' and $firefox) { ?>
|
|
||||||
<link rel="prefetch" href="<?php echo $nextImageUrl ?>" />
|
|
||||||
<link rel="prefetch" href="<?php echo $nextPageUrl ?>" />
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<a href="<?php echo $imageUrl ?>"><img src="<?php echo $imageUrl ?>" id="theimage" /></a>
|
|
||||||
|
|
||||||
<div id="up">
|
|
||||||
<a href="<?php echo $directoryUrl ?>" title="Back to directory">^</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if ($nextPageUrl !== '') { ?>
|
|
||||||
<div id="next">
|
|
||||||
<a href="<?php echo $nextPageUrl ?>" title="Next image">></a>
|
|
||||||
</div>
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<?php if ($prevPageUrl !== '') { ?>
|
|
||||||
<div id="previous">
|
|
||||||
<a href="<?php echo $prevPageUrl ?>" title="Previous image"><</a>
|
|
||||||
</div>
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
<?php if ($nextImageUrl !== '' and ! $firefox) { ?>
|
|
||||||
window.onload = function() { // for browsers not supporting link rel=prefetch
|
|
||||||
var im = new Image();
|
|
||||||
im.src = '<?php echo $nextImageUrl ?>';
|
|
||||||
var req = new XMLHttpRequest();
|
|
||||||
req.open('GET', '<?php echo $nextPageUrl ?>', false);
|
|
||||||
req.send(null);
|
|
||||||
};
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
// keyboard navigation
|
|
||||||
function keyup(e)
|
|
||||||
{
|
|
||||||
switch (e.keyCode) {
|
|
||||||
case 37: // left
|
|
||||||
window.location = "<?php echo $prevPageUrl ?>";
|
|
||||||
break;
|
|
||||||
case 39: // right
|
|
||||||
case 32: // space
|
|
||||||
window.location = "<?php echo $nextPageUrl ?>";
|
|
||||||
break;
|
|
||||||
case 38: // up (down is 40)
|
|
||||||
window.location = "<?php echo $directoryUrl ?>";
|
|
||||||
break;
|
|
||||||
case 13: // enter
|
|
||||||
window.location = "<?php echo $imageUrl ?>";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.addEventListener) {
|
|
||||||
document.addEventListener("keyup", keyup, false);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue