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

Все исходники и структуру базы оставлю в конце статьи.

Посмотреть галерею в работе можно .
Но на том сайте можно лишь просмотреть. А если охота испробовать все возможности галереи, то можно глянуть её .

Я специально отдельно её выложил, чтобы можно было побаловаться и потрогать её наяву 🙂
На логотип компании Оазиз можно не обращать внимания, ведь я просто оттуда и скопировал всё с того сайта и поместил на наш)
Как видим, никаких кнопок управления нет. Что бы управлять галереей, необходимо авторизоваться на специальной страничке авторизации вот тут: .
Пароль для входа: test_pass

После правильного ввода пароля откроется снова главная страница, но уже будут доступны кнопки управления.
Пока что перейти на страницу авторизации можно лишь напрямую по ссылке, но я думаю, никому не составит труда вставить прям в страничку ссылку для входа) Просто нам этого не нужно было, это ведь галерея и не должно ничего лишнего быть при просмотре обычным людям, поэтому и решено было убрать ссылку для входа)

Можно создавать папки, в этих папках — альбомы, а в каждом альбоме — фотографии (та игла - в яйце, то яйцо - в утке, та утка - в зайце, а заяц в шоке от всего этого!).
Ну, редактировать названия папок и альбомов тоже можно, а так же удалять их, ну и фоточки тоже удалять можно, а как же иначе? 🙂

Для загрузки фотографий нужно зайти в какой-то альбом, и нажать на значок фотоаппарата или перетащить изображения прям туда. За раз можно загружать сколько угодно изображений…)
Все действия производятся AJAX-запросами, поэтому страница не будет перезагружаться, что весьма удобно)

Если альбом пуст, то его превьюшка будет просто в виде картиночки фотоаппарата. Если же загрузить какие-то картиночки в альбом, то первая картинка и станет превьюшкой альбома. Но, кстати! В базе, в табличке albums есть поле preview_url , и это поле отвечает за превьюшку альбома. То есть можно там прописать любую другую превьюшку для альбома. Но так как это не нужно было для наших задач, то я и не стал делать это в редактировании альбома. Но зато при выводе альбома и в базе это есть. Так что можете использовать, если доделаете это)
Так же дела обстоят и с картинками. Там предусмотрено название картинок (в табличке photos поле title), и если оно есть, то будет выводиться при просмотре изображений.

Теперь немного подробнее о технических деталях и используемых штуках.
Загружаются изображения с помощью удобного jQuery-плагина для загрузки файлов «dmuploader».
При загрузке изображения создаётся его миниатюра, за это отвечает php-класс SimpleImage, найденный на просторах интернета. Там ничего сложного нет.
Для работы с базой используется класс safeMySQl. Удобная вещь, которая к тому же позволяет хоть немного забыть о безопасности передаваемых значений, т.к. сама берёт на себя защиту входных данных, используя placeholder-ы.
Ну, и для вывода изображений используется простенький jQuery плагин «magnific popup».
Всё это можно легко найти по названиям.

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

Есть некоторые настройки. Редактировать их нужно в файле configs.php.
Там можно задать параметры для подключения к базе, а так же пароль для входа. Пароль не хранится в базе. Это ведь простая галерея, однопользовательская..)

Галерея была сделана достаточно быстро, даже можно сказать «на коленке». Поэтому вполне возможны ошибки и недочёты даже в такой простой штуке, как эта галерея. А так же возможна небольшая запутанность кода и трудность чтения в связи с тем, что идут порой вперемешку php и html куски кода…)

Как и обещал, делюсь исходниками, а так же SQL-файлом, содержащим структуру базы и табличек:
galery_test.zip

: время идёт! В новых версиях MySQL по-умолчанию включен строгий режим, а это означает, что те поля в табличках, у которых нет default-значений, должны в запросах обязательно получать значения при вставке данных, иначе будет ошибка. Поэтому можно либо задать default-значения полям в табличках, либо покрутить настройки mysql (если есть доступ к файлу настроек) и дописать или изменить там этот параметр вот так.

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

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

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

Начнем с начала – с базы данных, 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 }); });

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