This repository has been archived by the owner on Nov 24, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
104 lines (99 loc) · 2.42 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<?php
$dir = opendir("images");
$list = array();
$images = array();
while($file = readdir($dir)){
if ($file != '.' and $file != '..'){
// TODO: Fix chronological order
$ctime = filectime($file) . ',' . $file;
$list[$ctime] = $file;
}
}
$list = array_reverse($list);
foreach($list as $im){
$images[] = $im;
}
$imgarrstring = "'".$images[0]."'";
for($n = 1; $n < count($images); $n++){
$imgarrstring = $imgarrstring . ",'" . $images[$n] . "'";
}
?>
<html>
<head>
<title>The Places I Take My Laptop</title>
<style>
html{
min-height:100%;
}
body{
margin:0px;
min-height:100%;
background-color:#333333;
opacity:0;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s; /* Safari */
}
#countdisplay{
position: absolute;
top: 5px;
left:5px;
margin:0px;
color: white;
font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;
font-size:17pt;
font-weight:800;
text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
</style>
</head>
<body>
<img id="image" alt="A place I\'ve taken my laptop" src="images/<?php echo $images[0];?>"></img>
<p id="countdisplay"></p>
</body>
<script>
var im = document.getElementById("image");
var p = document.getElementById("countdisplay");
window.onresize = function(event){
var windowRatio = window.innerWidth/window.innerHeight;
var imageRatio = im.offsetWidth/im.offsetHeight;
console.log(windowRatio,imageRatio);
im.style.width = "";
im.style.height = "";
im.style.marginLeft = "";
im.style.marginTop = "";
if(windowRatio<imageRatio){
im.style.width = "100%";
var margintop = (window.innerHeight - im.offsetHeight)/2;
im.style.marginTop = margintop+"px";
}
else{
im.style.height = "100%";
var marginleft = (window.innerWidth - im.offsetWidth)/2;
im.style.marginLeft = marginleft+"px";
}
};
var counter = 0;
var images = [<?php echo $imgarrstring;?>];
p.innerHTML = (counter+1)+" / "+ images.length;
im.onclick = function(){
counter = (counter+1)%images.length;
this.src = "images/"+images[counter];
p.innerHTML = (counter+1)+" / "+ images.length;
window.onresize();
}
im.onload = function(){
document.body.style.opacity = 1;
window.onresize();
};
document.onload = function(){
for(var a = 0; a < images.length; a++){
preloadImage(images[a]);
}
}
function preloadImage(url){
var img = new Image();
img.src = "images/"+url;
}
window.onresize();
</script>
</html>