Автоматическая генерация фотогалереи из картинок в каталоге

Два года назад Крис Койер написал подробное руководство о том, как можно создать фотогалерею на основе изображений, находящихся в двух каталогах: изображений и их миниатюр. Мы решили взять его руководство за основу и доработать.

Мы покажем вам, как можно сгенерировать миниатюры изображений для галереи с помощью PHP. Мы также реализовали MooTools lightbox: Smoothbox.

Далее мы Вам покажем, как можно создать красивую фотогалерею из фотографии в каталоге.

CSS

.clear { clear:both; }

.photo-link { padding:5px; margin:5px; border:1px solid #ccc; display:block; width:200px; float:left; }

.photo-link:hover { border-color:#999; }

Изображения/ссылки будут размещаться рядом друг с другом. Другой вариант — использовать таблицу.

PHP:Функции

/* function: generates thumbnail */

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 */

imagecopyresized($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);

}

/* function: returns files from dir */

function get_files($images_dir,$exts = array('jpg')) {

$files = array();

if($handle = opendir($images_dir)) {

while(false !== ($file = readdir($handle))) {

$extension = strtolower(get_file_extension($file));

if($extension && in_array($extension,$exts)) {

$files[] = $file;

}

closedir($handle);

}

return $files;

}

/* function: returns a file's extension */

function get_file_extension($file_name) {

return substr(strrchr($file_name,'.'),1);

}

Мы будем использовать три функции для обеспечения работоспособности автоматической генерации: get_files (извлекает все файлы в заданном каталоге), get_file_extension и make_thumb (генерируют миниатюры из исходных изображений). Это хорошие функции, их можно также использовать и для других целей.

PHP:Настройка и генерация HTML

/** settings **/

$images_dir = 'preload-images/';

$thumbs_dir = 'preload-images-thumbs/';

$thumbs_width = 200;

$images_per_row = 3;

/** generate photo gallery **/

$image_files = get_files($images_dir);

if(count($image_files)) {

$index = 0;

foreach($image_files as $index=>$file) {

$index++;

$thumbnail_image = $thumbs_dir.$file;

if(!file_exists($thumbnail_image)) {

$extension = get_file_extension($thumbnail_image);

if($extension) {

make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);

}

echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';

if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }

}

echo '<div class="clear"></div>';

}

else {

echo '<p>There are no images in this gallery.</p>';

}

Первый шаг — объявление простых настроек, в которых будут прописаны путь каталога изображений, путь к каталогу миниатюр, ширина миниатюр, а также количество изображений в строке. Работа генерации начинается с того, что округляется общее количество изображений до количества кратному количеству изображений в строке. Для каждого изображения в галереи проверяем существование его миниатюры. Если миниатюры нет, то генерируем ее с помощью PHP. Как только создается миниатюра, выводим HTML ссылку/изображение. Назначаем элементу A CSS класс “smoothbox”, таким образом Smoothbox будет увеличивать изображение при наведении на него курсором мышки.