Фотогалерея на PHP + MySQL + jQuery — за час с нуля

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

image

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

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

image

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 для показа красивых модальных окон и галереи. Вот дерево каталогов:

image

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

image

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

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

image

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

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 в корне нашего проекта, он и отвечает за вывод нашей красивой галереи:

image

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

<script type="text/javascript">
	$(document).ready(function() {
		$("a.gallery").fancybox({
			'transitionIn'	:	'elastic',
			'transitionOut'	:	'elastic',
			'speedIn'		:	600, 
			'speedOut'		:	200, 
			'overlayShow'	:	true
		});
	});
</script>

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

       <?
			$gp=mysql_query("select * from photos  order by ord");
			$i=1;
			while($pho = mysql_fetch_array($gp)){
				if ($i==1){ echo "<table><tr>"; $allcl=false; }
				echo "<td><a class=\"gallery\" rel=\"group\" title='{$pho['comment']}' href=\"upload/{$pho['big']}\"><img src=\"upload/{$pho['small']}\"></a></td>";

				if ($i%3==0){ echo "</tr><tr>"; }
				$i++;
			}
			echo "</table>";
		?>

Тоже все очень просто, фотки выводятся по 3 в ряд в таблице.

Все готово! Пример галереи можно увидеть здесь.
Исходники загрузить здесь.

Права на все тестовые изображения принадлежат их создателям.

http://habrahabr.ru/sandbox/29334/#habracut

Share