Простая фотогалерея

Простая фотогалерея

Я тут на досуге подумал, как бы выглядела самая простая фотогаллерея, которая в то же время требовала минимум действий при добавлении/удалении новых изображений, минимум настроек при установке, и содержала бы минимум кода?

В результате этих размышлений родился элементарный скрипт, который настраивается следующим образом: Требуется определить всего две переменные в начале скрипта, т.е. указать путь к директории изображений и указать имя папки с превьюшками. Папка с превьюшками должна находиться внутри папки с изображениями. Превьюшки должны иметь такое же название, как и их большие картинки.

Пример файловой структуры:

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>

 

Возможно Вас заинтересуют эти материалы

PHP: Буферизация вывода

Буферизация вывода в PHP это довольно полезная штука, если уметь ею пользоваться. Скажите сколько раз

POP3 протокол с примерами

POP3 это протокол по которому мы можем получить почту с сервера, для подобной задачи, используется

PHP: Хранение сессии в базе данных

Как и обещал, тема данной заметки: база данных, как обработчик сессии. А так как на