Простая фотогалерея
Я тут на досуге подумал, как бы выглядела самая простая фотогаллерея, которая в то же время требовала минимум действий при добавлении/удалении новых изображений, минимум настроек при установке, и содержала бы минимум кода?
В результате этих размышлений родился элементарный скрипт, который настраивается следующим образом: Требуется определить всего две переменные в начале скрипта, т.е. указать путь к директории изображений и указать имя папки с превьюшками. Папка с превьюшками должна находиться внутри папки с изображениями. Превьюшки должны иметь такое же название, как и их большие картинки.
Пример файловой структуры:
site.ru/images/ | | | |- thumbs/ | | | | | |- img1.jpg | | |- image2.jpg | | | |- img1.jpg | |- img2.jpg | |-gallery_script.php
В результате такой хитрой организации файлов нам не потребуется особо сложная логика в скрипте. Там всего одна функция и капелька JavaScript. Зато, если теперь добавить новый файл картинки и превьюшку по правилам описанным выше, скрипт сам подцепит новые файлы. Т.е. картинки в галерею добавляются простым помещением файлов в папки. К сожалению наш скрипт не имеет всяких наворотов, типа переходных эффектов и других красивостей JavaScript, зато он простой как апельсин, и вполне сгодиться на первое время тем, кому пока сложно подключать полноценные JavaScript фотогалереи. В добавок, если прописать стили оформления, то всё выглядит вполне прилично. Пример здесь.
Код странички фотогалереи:
<?php // ПУТЬ к папке с изображениями ОТНОСИТЕЛЬНЫЙ $imgDir = 'img/'; // ИМЯ папки с превьюшками //(должна находиться внутри папки с изображениями): $thumbDir = 'thumbs/'; // Получает файлы, расположенные в директории // @param $path : String - путь к директории с файлами, // return Array - индексный массив, содержащий файлы function getFiles(/*string*/$path) { // результат выполнения функции is_dir кэшируется, // поэтому сбрасываем кэш. clearstatcache(); $files = scandir($path); for($i = 0, $length = count($files); $i < $length; $i++) { // Исключаем из списка директории: if( is_dir($path.$files[$i]) ) { unset($files[$i]); } } return $files; //array } ?> <!DOCTYPE HTML> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример галереи</title> <style type="text/css"> .small, #full_img{margin:4px; border: solid 1px orange; padding: 5px} </style> </head> <body> <div > <p><img id="full_img" src="<?php echo $imgDir.( array_shift( getFiles($imgDir) ) ) ?>" width="400px" height="400px" /></p> <?php foreach( getFiles($imgDir) as $file ) { echo '<img class="small" src="'.$imgDir.$thumbDir.$file.'" width="50px" height="50px" onclick="document.getElementById(\'full_img\').src = \''.$imgDir.$file.'\'" />'; } ?> </div> </body> </html>
Информация копипастерам
Внимание! Копирование контента с сайта, возможно только с разрешения администратора. Т.е. Меня! Я скорее всего разрешу Вам это сделать, в обмен на живую ссылку, на статью оригинал.