Галерея картинок является неотъемлемой частью хорошего портфолио, или какого-нибудь фотосайта. В данном уроке мы рассмотрим процесс создания весьма красивой галереи для сайта с помощью php, и использовании  «drag and drop». Идея заключается в том, что картинки в галерее можно перетаскивать с места на место, при этом используется плагин fancybox, при нажатии на изображение, оно разворачивается во весь размер. Это дает возможность легко осуществлять навигацию в таком режиме. Все смотрится достаточно красиво и весьма привлекательно для пользователя.

И так, начнем, главная идея заключается в том, что PHP будет генерировать необходимый код XHTML для каждого изображения. Сгенерированный код позднее вставляется в index.php:

Тут ничего особенного. Обратите внимание на div «modal» — он используется для генерация модального окна. Теперь рассмотрим CSS. Для начала необходимо подключить внешнюю таблицу стилей в шапку.

Рассмотрим класс pic. Он используется для стилизации фотографий в виде фото от полароида. Для достижения этого — мы просто добавляем белую границу вокруг фото. Просмотрев демо, Вы могли заметить, что изображения разбросаны по странице и повернуты в разные стороны. Это достигнуто с помощью CSS и PHP. Вот как это сделать:

И так, рассмотрим..прежде всего мы открываем папку с миниатюрами с помощью opendir и проходим по всем фото. В процессе перехода от фото к фото пропускаем все файлы «не изображения». Далее генерируем XHTML код для каждого изображения. PHP также придает позиционирования и поворот каждому изображению. Каждое фото размещается в случайном порядке согласно координат X и Y. Кроме этого фото также вращается между углами -40 и 40 градусов.

Можно заметить, что у нас две папки с изображениями, которые используются галереей — thumbs (миниатюры 100 на 100) и original (оригиналы фото). Важно, чтобы миниютюры и оригиналы имели одинаковые названия, иначе галерея не будет работать.

На этом все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.