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

Автор: Administrator

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

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

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


  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>

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

Добавить комментарий

Информация копипастерам