forked from jpederson/photo-gallery
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
151 lines (124 loc) · 4.62 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<?php
/***********************************************************************
PHP Photo Gallery
--------------------
Generates a photo gallery from a folder of images. Detects if it's
being used in CLI or browser, and either outputs a log, or the gallery
itself, generating thumbnails as it goes.
***********************************************************************/
// small function to generate thumbnails
function make_thumb( $src, $dest, $desired_width ) {
/* read the source image */
$source_image = imagecreatefromjpeg( $src );
$width = imagesx( $source_image );
$height = imagesy( $source_image );
/* find the "desired height" of this thumbnail, relative to the desired width */
$desired_height = floor( $height * ( $desired_width / $width ) );
/* create a new, "virtual" image */
$virtual_image = imagecreatetruecolor( $desired_width, $desired_height );
/* copy source image at a resized size */
imagecopyresampled( $virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height );
/* create the physical thumbnail image to its destination */
imagejpeg( $virtual_image, $dest, 100 );
}
// a function to check if we're running CLI or in browser.
function is_cli() {
return defined( 'STDIN' );
}
// if we're in a browser, output some header HTML and basic styles.
if ( !is_cli() ) {
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #313131;
}
.photo {
width: 100%;
display: block;
background-size: cover;
background-position: center center;
box-sizing: border-box;
}
.no-touch .photo {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale( 100% ); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
opacity: .7;
transition: all 400ms ease-in-out;
}
.no-touch .photo:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
opacity: 1;
}
@media screen and ( min-width: 768px ) {
.photo { float: left; width: 50%; }
}
@media screen and ( min-width: 1023px ) {
.photo { width: 33.3333%; }
}
@media screen and ( min-width: 1220px ) {
.photo { width: 25%; }
}
@media screen and ( min-width: 1440px ) {
.photo { width: 20%; }
}
.photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script> $(document).ready(function() { $('a').magnificPopup( { type:'image' } ); }); </script>
</head>
<body>
<?php
}
// scan the current directory to get a list of files.
$photos = scandir( '.' );
// begin logging if in cli
if ( is_cli() ) print "Generating thumbnails...\n";
// if there are photos in the same directory as this script
if ( !empty( $photos ) ) {
// loop through the photos array
foreach ( $photos as $photo ) {
// get the extension
$path = './' . $photo;
$ext = pathinfo( $path, PATHINFO_EXTENSION );
// only output tiles for image files.
if ( in_array( $ext, array( 'jpg', 'jpeg' ) ) && substr( $photo, 0, 1 ) != '_' ) {
// set the destination for the thumbnail file
$thumb = './_' . $photo;
// only generate a thumbnail if one doesn't already exist, logging if in cli
if ( !file_exists( $thumb ) ) {
make_thumb( $path, $thumb, 500 );
if ( is_cli() ) print "Thumbnail created: " . str_replace( './', '', $thumb ) . "\n";
} else {
if ( is_cli() ) print "Thumbnail exists: " . str_replace( './', '', $thumb ) . "\n";
}
// if we're in a browser, output the code for the photo tile, with the thumbnail as a background.
if ( !is_cli() ) {
?><a href="<?php print $photo ?>" class="photo" style="background-image: url(_<?php print $photo ?>);"></a><?php
}
}
}
}
// if we're in the browser, output footer html
if ( !is_cli() ) {
?>
<div style="clear: both"></div>
</body>
</html>
<?php
}