diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4e9b47a --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +config.php \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..b3b8cc0 --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +Simple Image Browser +============= + +Written with the goal of a simple php image gallery that does not require a database or JavaScript. + +![Screenshot](http://i.imgur.com/49rK7.png) + +This script scans the configured directories for images (jpeg, jpg, png, gif) and shows them one by one with a thumbnail navigation. You can create several albums. Please note that no thumbnails are created, but the original images are resized by the browser. This script is intended to be used with images of 800x800px max. Larger images will be resized by the browser (with proportions preserved). + +Requirements +------------ + +* php + +Installation & Configuration +---------------------------- + +* Copy `config.php.skel` to `config.php`. Options are explained in the configuration file. +* Upload everything contained in this repository (except raw, which are the original Photoshop files) to your webspace. \ No newline at end of file diff --git a/arrow-left-big.png b/arrow-left-big.png new file mode 100644 index 0000000..3b05b8c Binary files /dev/null and b/arrow-left-big.png differ diff --git a/arrow-left.png b/arrow-left.png new file mode 100644 index 0000000..2b4c092 Binary files /dev/null and b/arrow-left.png differ diff --git a/arrow-right-big.png b/arrow-right-big.png new file mode 100644 index 0000000..c48860a Binary files /dev/null and b/arrow-right-big.png differ diff --git a/arrow-right-tiny.png b/arrow-right-tiny.png new file mode 100644 index 0000000..064f156 Binary files /dev/null and b/arrow-right-tiny.png differ diff --git a/arrow-right.png b/arrow-right.png new file mode 100644 index 0000000..be8da0c Binary files /dev/null and b/arrow-right.png differ diff --git a/config.php.skel b/config.php.skel new file mode 100644 index 0000000..1e6c2c5 --- /dev/null +++ b/config.php.skel @@ -0,0 +1,78 @@ + "relative path" + */ +$config['albums'] = array( + 'Home' => 'images' +); + + +/** + * The base title of this site. Image titles are appended with + * " :: image title". + * + * Values: string + */ +$config['sitetitle'] = 'Simple Image Browser'; + + +/** + * Number of thumbnails next to the image. A value of n*3 looks best. + * Do not use high numbers because all images are loaded by the client (no + * thumbnail generation). + * + * Values: integer, 1-n + */ +$config['paginginterval'] = 9; + + +/** + * Sort images descending instead of ascending. Sorting is always alphabetically + * at the moment. Choose a good filename if you want any special sorting. + * + * Values: true, false + */ +$config['sortDescending'] = true; + + +/** + * URL for the home button next to the image. If empty, the button is hidden. + * + * Values: string + */ +$config['homeurl'] = ''; + + +/** + * Text for the info/about page. + * + * Values: string, here with Nowdoc syntax + */ +$config['info'] = <<<'EOD' +

+ Displayed with Simple Image Browser by Sven Karsten Greiner. +

+EOD; diff --git a/home.png b/home.png new file mode 100644 index 0000000..50cdd9f Binary files /dev/null and b/home.png differ diff --git a/index.php b/index.php new file mode 100644 index 0000000..21b6942 --- /dev/null +++ b/index.php @@ -0,0 +1,169 @@ +. + */ + +error_reporting(0); + +include('config.php'); + +function generateImageUrl($album, $image) { + return '?album=' . rawurlencode($album) . '&image=' . rawurlencode($image); +} + +if (isset($_POST['album'])) { + header('Location: ?album=' . rawurlencode($_POST['album'])); + die(); +} + +$directories = $config['albums']; +$random = false; + +$album = $_GET['album']; +$image = $_GET['image']; + +// Random image if no album and no image given or $_GET['random'] +if (isset($_GET['random']) || ($album == null && $image == null)) { + $random = true; +} + +// Validate given album or use first or random one +if ($album == null || !array_key_exists($album, $directories)) { + if ($random) { + $album = array_rand($directories); + } else { + reset($directories); + $album = key($directories); + } +} + +// Scan directory for image files +$files = scandir($directories[$album], $config['sortDescending'] ? 1 : 0); +$images = array(); +foreach ($files as $file) { + $f = strtolower($file); + if (!is_dir($directories[$album] . '/' . $file) + || strstr($f, ".jpg") + || strstr($f, ".jpeg") + || strstr($f, ".png") + || strstr($f, ".gif")) { + $images[] = $file; + } +} + +// Validate given image or use first or random one in album +if ($image == null || !in_array($image, $images)) { + if ($random) { + $image = $images[array_rand($images)]; + } else { + $image = $images[0]; + } +} + +// Calculate paging boundaries +$currentIndex = array_search($image, $images); +$pagingStart = floor($currentIndex / $config['paginginterval']) * $config['paginginterval']; +$neighbors = array_slice($images, $pagingStart, $config['paginginterval']); + +?> + + + <?php echo $config['sitetitle'] . ((!isset($_GET['info'])) ? (' :: ' . htmlspecialchars($image)) : ' :: Info'); ?> + + + + +' . $config['info'] . ''; +} else { +?> + + + + + +
+ + +
+ 0) { + $href = generateImageUrl($album, $images[$currentIndex - 1]); + echo ""; + } + if ($currentIndex + 1 < count($images)) { + $href = generateImageUrl($album, $images[$currentIndex + 1]); + echo ""; + } + ?> + +
+
+ + \ No newline at end of file diff --git a/info.png b/info.png new file mode 100644 index 0000000..e823a55 Binary files /dev/null and b/info.png differ diff --git a/random.png b/random.png new file mode 100644 index 0000000..80292d5 Binary files /dev/null and b/random.png differ diff --git a/raw/arrow.psd b/raw/arrow.psd new file mode 100644 index 0000000..465209c Binary files /dev/null and b/raw/arrow.psd differ diff --git a/raw/home.psd b/raw/home.psd new file mode 100644 index 0000000..535f150 Binary files /dev/null and b/raw/home.psd differ diff --git a/raw/info.psd b/raw/info.psd new file mode 100644 index 0000000..3463c0e Binary files /dev/null and b/raw/info.psd differ diff --git a/raw/random.psd b/raw/random.psd new file mode 100644 index 0000000..f71f5c1 Binary files /dev/null and b/raw/random.psd differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..87c9597 --- /dev/null +++ b/style.css @@ -0,0 +1,154 @@ +* { + margin: 0; + padding: 0; + border: none; +} + +html, body { + background: #222; + color: #ddd; + font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; + line-height: 1em; +} + +p { + margin-bottom: 1em; + text-align: justify; + line-height: 1.2em; +} + +p a, p a:visited { + color: #C0DB5A; + text-decoration: none; +} + +p a:hover { + color: #C0DB5A; + text-decoration: underline; +} + +#sitecontainer { + width: 1050px; + margin: auto; + margin-top: 1em; +} + +#sidebar { + width: 224px; +} +#thumbnav a { + float: left; + display: block; +} +#thumbnav img { + border: 2px solid #fff; + margin: 5px; + width: 60px; + height: 60px; +} +#thumbnav .current { + border: 5px solid #fff; + margin: 2px; +} +#thumbnav img:hover { + border: 5px solid #fff; + margin: 2px; +} +#thumbnav-paging { + clear: both; + padding-top: 1em; +} +#thumbnav-paging div { + margin: auto; + margin-top: 0.5em; + width: 50%; + text-align: center; +} +#thumbnav-paging .back { + float: left; + margin-left: 1em; +} +#thumbnav-paging .next { + float: right; + margin-right: 1em; +} +#albumnav { + width: 200px; + margin: auto; + padding-bottom: 2em; +} +#albumnav input { + border: none; + background: url('arrow-right-tiny.png') no-repeat center #3a3a3a; + color: #ddd; + font-weight: bold; + float: right; + width: 1.2em; + height: 1.5em; + cursor: pointer; +} +#albumnav .select { + width: 175px; + overflow: hidden; +} +#albumnav .select select { + background: #3a3a3a; + border: none; + width: 200px; + height: 1.5em; + color: #ddd; + cursor: pointer; +} + +#info { + clear: both; + border-top: 1px solid #aaa; + margin-top: 3em; + padding-top: 0.5em; + text-align: center; +} +#info a { + margin: 0 1em; +} + +#infobox { + width: 500px; + margin: auto; + margin-top: 6em; + margin-bottom: 6em; + padding: 4em 2em; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + font-size: 0.8em; + position: relative; +} + +#infobox .home { + position: absolute; + top: 1em; + right: 2em; +} + +#imagecontainer { + height: 805px; + width: 805px; + text-align: center; +} +#imagecontainer img { + max-width: 800px; + max-height: 800px; + width: expression((this.width > 800 && (this.height * 800 / this.width) < 800) ? 800: true); + height: expression((this.height > 800 && (this.width * 800 / this.height) < 800) ? 800: true); +} +#imagecontainer .navi { + position: absolute; + height: 100%; + top: 0; + width: 25%; + background: transparent; + display: block; +} +#imagecontainer .back {left: 0; background: url('arrow-left-big.png') no-repeat -10000px -10000px transparent;} +#imagecontainer .back:hover {background: url('arrow-left-big.png') no-repeat right center transparent;} +#imagecontainer .next {right: 0; background: url('arrow-right-big.png') no-repeat 10000px 10000px transparent;} +#imagecontainer .next:hover {background: url('arrow-right-big.png') no-repeat left center transparent;}