Два года назад Крис Койер написал подробное руководство о том, как можно создать фотогалерею на основе изображений, находящихся в двух каталогах: изображений и их миниатюр. Мы решили взять его руководство за основу и доработать.
Мы покажем вам, как можно сгенерировать миниатюры изображений для галереи с помощью PHP. Мы также реализовали MooTools lightbox: Smoothbox.
Далее мы Вам покажем, как можно создать красивую фотогалерею из фотографии в каталоге.
CSS
1 2 3 |
.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:Функции
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/** 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 будет увеличивать изображение при наведении на него курсором мышки.
MooTools JavaScript / Smoothbox
Все что вам нужно, так это включить JavaScript файл. Все.
Интересно, подойдет тем, кто ненавидит ява-скрипты ))