Showthread php простейшая галерея. Управляемая галерея на PHP и MySQL с созданием preview

Этот урок покажет Вам как создать галерею, которая сама будет находить картинки в папке и отображать их с помощью лайтбокса.

Первым делом создаем костяк нашей галереи:

A cool jQuery gallery

Идея очень проста - PHP скрипт будет сканировать папку на наличие изображений. После этого эти изображения с помощью CSS & jQuery будут превращаться в красивую галерею. Пользоваться подобной галерей очень просто - достаточно только загрузить картинки в папку и результат сразу будет виден на странице.

$directory = "gallery"; //название папки с изображениями
$allowed_types=array("jpg","jpeg","gif","png"); //разрешеные типы изображений
$file_parts=array();
$ext="";
$title="";
$i=0;
//пробуем открыть папку
$dir_handle = @opendir($directory) or die("There is an error with your image directory!");
while ($file = readdir($dir_handle)) //поиск по файлам
{
if($file=="." || $file == "..") continue; //пропустить ссылки на другие папки
$file_parts = explode(".",$file); //разделить имя файла и поместить его в массив
$ext = strtolower(array_pop($file_parts)); //последний элеменет - это расширение
$title = implode(".",$file_parts);
$title = htmlspecialchars($title);
$nomargin="";
if(in_array($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //последнему изображению в ряде присваевается CSS класс "nomargin"
echo "

".$title."
";
$i++;
}
}
closedir($dir_handle); //закрыть папку

Сканируя файлы папки и пропуская файлы не изображения, у нас накапливается XHTML код для каждого изображения. Код (линии 28-39) состоит из контейнера с классом pic (и в некоторых случаях nomargin ). С помощью атрибута style мы устанавливаем фоновое изображение в виде нашего изображения. Мы позиционируем картинку в центре, используя 50% 50% . Таким образом изображение выравнивается как по горизонтали, так и по вертикали. Если изображение больше блока, мы видим только центральную его часть (ту часть, которая помещается в контейнер). Таким образом, у нас получаются красивые миниатюры (без необходимости уменьшение самого изображения).

Это хорошо работает с "нетяжелыми" изображениями. Постарайтесь, не загружать в папку 10 мегапиксельные фото:).

В блоке находится ссылка, которая ведет к полноразмерному изображению. Название файла служит значением атрибута title . Плагин lightBox использует эти значения и преобразует картинки в галерею. Чтобы изменить описание изображения, необходимо его переименовать.

У Вас может возникнуть вопрос по поводу класса nomargin ! Для чего он нам нужен? У каждого изображения в галерее есть правый и нижний отступ. Это означает, что последний элемент в каждом ряду не сможет выравняться с правой частью заголовка блока. Это выглядит непрофессионально. Поэтому мы присваиваем специальный класс, который убирает правый отступ для последнего элемента в ряду. В итоге, мы получаем красивый результат.

Теперь давайте все немного оформим:

/* first reset some of the elements for browser compatibility */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}
body{ /* body */
margin-top:20px;
color:white;
font-size:13px;
background-color:#222222;
}
.clear{ /* clearfix класс */
clear:both;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
#container{
width:890px;
margin:20px auto;
}
#heading,#footer{
background-color:#2A2A2A;
border:1px solid #444444;
height:20px;
padding:6px 0 25px 15px;
margin-bottom:30px;
overflow:hidden;
}
#footer{
height:10px;
margin:20px 0 20px 0;
padding:6px 0 11px 15px;
}
div.nomargin{ /* nomargin класс */
margin-right:0px;
}
.pic{
float:left;
margin:0 15px 15px 0;
border:5px solid white;
width:200px;
height:250px;
}
.pic a{
width:200px;
height:250px;
text-indent:-99999px;
display:block;
}
h1{
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2{
font-weight:normal;
font-size:14px;
color:white;
}

Для правильной работы нам понадобится в шапке документа подключить фреймворк, таблицу стилей и вспомогающие скрипты:

Еще немного магии:

// после загрузки страницы
$(document).ready(function(){
$(".pic a").lightBox({

ImageLoading: "lightbox/images/loading.gif",
imageBtnClose: "lightbox/images/close.gif",
imageBtnPrev: "lightbox/images/prev.gif",
imageBtnNext: "lightbox/images/next.gif"
});
});

Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.

Наша галерея готова! Мне нравится! :)

Здравствуй, уважаемый хабрачитатель!
Сразу к делу – заказчик скоро начнет писать гневные письма, а над фотогалереей ты еще даже не начинал работать! Причем нужно сделать галерею с автоматизированным созданием превьюшек, комментариями, сортировкой фото и красивыми модальными окнами:

Срочно, срочно под хабракат!

Итак, у нас впереди куча работы – проектирование БД, создание админки и пользовательской части. Разберем самый простой пример – у нас просто должна быть страница с фотогалереей, без разбивки на категории и постраничной прокрутки, все это легко добавляется потом. Категории добавляются при помощи дополнительного поля в таблице с фотками, таблицы с категориями и несколькими строками кода, а про постраничный вывод из БД и так написана куча статей, на том же Хабре.

Начнем с начала – с базы данных, MySQL. Нам нужна таблица с фотками. Нужные поля: id фото, ссылка на большое изображение, ссылка на превью, комментарий к фото и порядковая позиция фото. Вот скриншот из phpMyAdmin и sql-код:

CREATE TABLE `photos` (`id` int(5) NOT NULL auto_increment, `comment` text NOT NULL, `big` varchar(30) NOT NULL, `small` varchar(30) NOT NULL, `ord` int(5) NOT NULL default "999", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=157 ;

Прошу прощения за windows-1251, я не разжигаю межнациональную рознь, не используя Юникод, но у меня проблемы с UTF на локальном сервере (да-да, с руками проблемы)).

Отлично, теперь немного о используемых файлах и структуре каталогов. Для реализации клиентских скриптов используется jQuery с плагинами jCrop для создания миниатюр и fancybox для показа красивых модальных окон и галереи. Вот дерево каталогов:

В папке js – файлы jQuery и jCrop, в папке admin файлы photos.php и photo_add.php. В первом у нас базовая форма для загрузки фото, редактирование каталога фоток и изменение порядка, вот как это выглядит:

Код не привожу, там все просто, исходники получите внизу страницы:)

В файле photo_add.php у нас работает jCrop для создания миниатюр, который пересылает параметры миниатюры небольшому скрипту на php.

Вот код скрипта, создающего миниатюру:

If (isset($_POST["t"])) { $targ_w = $targ_h = 100; $jpeg_quality = 95; $src = "../upload/{$_POST["t"]}b.jpg"; $img_r = imagecreatefromjpeg($src); $dst_r = ImageCreateTrueColor($targ_w, $targ_h); imagecopyresampled($dst_r,$img_r,0,0,$_POST["x"],$_POST["y"],$targ_w,$targ_h,$_POST["w"],$_POST["h"]); imagejpeg($dst_r,"../upload/{$_POST["t"]}s.jpg",$jpeg_quality); header("Location:photos.php?ok=ok"); exit; }

Фотографии загружаются в папку upload, убедитесь, что у нее есть права на запись.

За порядок фото отвечает поле `ord` в БД, по умолчанию оно равно 999 для всех фоток. Меняя это значение, можно поставить любой порядок для фото. Также можно сделать приятный Drag’n drop интерфейс для изменения порядка фото, но тогда мы не уложимся за час:)

Теперь перейдем к файлу gallery.php в корне нашего проекта, он и отвечает за вывод нашей красивой галереи:

В head необходимо подключить скрипты jquery и fancybox, а также иницииорвать галерею:

$(document).ready(function() { $("a.gallery").fancybox({ "transitionIn" : "elastic", "transitionOut" : "elastic", "speedIn" : 600, "speedOut" : 200, "overlayShow" : true }); });

А вот сам код вывода наших фоток: