Php фотогалерея. Управляемая галерея на PHP и MySQL с созданием preview. Галерея с миниатюрами «TN3 Gallery»
Бог сервера 12 августа 2011 в 16:26 Фотогалерея на PHP + MySQL + jQuery - за час с нуля- Чулан *
Сразу к делу – заказчик скоро начнет писать гневные письма, а над фотогалереей ты еще даже не начинал работать! Причем нужно сделать галерею с автоматизированным созданием превьюшек, комментариями, сортировкой фото и красивыми модальными окнами:
Итак, у нас впереди куча работы – проектирование БД, создание админки и пользовательской части. Разберем самый простой пример – у нас просто должна быть страница с фотогалереей, без разбивки на категории и постраничной прокрутки, все это легко добавляется потом. Категории добавляются при помощи дополнительного поля в таблице с фотками, таблицы с категориями и несколькими строками кода, а про постраничный вывод из БД и так написана куча статей, на том же Хабре.
Начнем с начала – с базы данных, 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 }); });
А вот сам код вывода наших фоток: