Этот урок покажет Вам как создать галерею, которая сама будет находить картинки в папке и отображать их с помощью лайтбокса.
Первым делом создаем костяк нашей галереи:
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"
});
});
Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.
Наша галерея готова! Мне нравится! :)
GalleryГалерея с интуитивно понятным управлением на php.
Требования: PHP 4.3.0 +, PHP safe_mode должна быть отключена, ImageMagick или NetPBM, MySQL 3 +
Plogger
Plogger – позволит вам интегрировать
фото-галерею в ваш сайт. Фото-галерея с привлекательными и простыми административным интерфейсом.
Требования: MySQL v3.23 +, GD1.0 + и + PHP4
Coppermine
Coppermine является многоцелевой полностью оснащенной и комплексной веб-галерей. Скрипт, написанный на PHP .
Требования: PHP 4.2.0 +, MySQL 3.23.23 +, либо GD или ImageMagick (любой версии)
4images Gallery
4images является мощной системой управления веб-галереей. Её возможности включают систему комментариев, регистрацию пользователей, защищенную паролем систему управления.
Minishowcase
Minishowcase это небольшой и простой javascript/PHP скрипт фото-галереи, технология AJAX позволяет легко просматривать ваши снимки.
Galleriffic
JQuery плагин для рендеринга быстрых фото галерей.
dfGallery
Флэш галерея с поддержкой Flickr, Picasa, FOTKI, Photobucket и пользовательских фотографий.
ZenPhoto
Zenphoto представляет собой веб-фотогалерею, предназначенную для простых веб-фотоальбомов. Включает в себя динамические обработки изображений и папок на основе альбомы, …
Требования: 4,10 + PHP с поддержкой GD, MySQL + 3,23
NoobSlide
Красивый и простой плагин. 8 образцов слайдеров в общей сложности.
Требования: Mootools v1.11 и v1.2
Imago
Ajax галерея с акцентом на простоту и легкость использования.
(E)2 Photo Gallery
Автоматически загружает изображения из указанной папки
Требования: Mootools v1.1
Pathfusion: Slideshow
Слайд-шоу с эффектом перехода между изображениями.
Galleria
Galleria представляет собой javascript фотогалерею написаную на jQuery. Она загружает изображения по одному из неупорядоченных списка и отображает картинки. Когда каждый снимок будет загружен, скрипт создаст эскизы, если вы укажите это в настройках.
PixelPost
Pixelpost – фотоблог для Интернета.
Требования: PHP 4.3 + / + MySQL 3.23.58
SmoothGallery
Этот скрипт организует слайд-шоу или фотогалерею на вашем сайте
FlashFlickr PhotoGallery
Фотогалерея, использует Flickr API.
MooFlow
Галерея в стиле iTunes
LightWindow
Продвинутый Lightbox
Требования: Prototype & Scriptaculous
Viewer – mootools
Слайд-шоу для показа изображений галереи или разделов.
Slimbox
Клон Lightbox
Revolver
Можно использовать, например, для организации портфолио
ImageFlow
Удобная javascript фотогалерея в стиле iTunes
Требования: PHP 4.3.2+ with the GD extension 2.0.1+
BarackSlideshow
Оригинальное слайд шоу, можно использовать например при изготовлении портфолио
SlideShow 2
Говорящее название, интересный скрипт галереи
Showcase
Хорошая галерея
PathFusion: multibox
Клон lightbox с поддержкой картинок, музыки, флеша и html
UvumiTools Gallery Plugin
Очень понравилась реализация этой галереи, советую посмотреть.
3D Curve Photo Gallery
Занимательная флеш галерея с использованием XML.
Stack Photo Gallery
АЙС… как будто вы держите в руках стопку фотографий и перекладываете одну за другой.
Требования: Adobe Flash (version 9) is required to edit the FLA file
MediaBox
Очередной лайтбокс cc расширенной поддержкой форматов
Space Gallery
Простая галерея на jQuery
javascript Image Gallery Using Mootools (part 2)
Галерея на Mootools
Image Gallery v1.0
Галерея на флеше, когда нажимаете на изображение оно открывается в лайтбоксе
Скачать
Circular Thumbnail Gallery
Эффектная круговая галерея на Flash
Flash Gallery
Скрипт позволит просто и быстро создать слайдшоу на вашем веб-сайте. Очень эффектно
Всем привет! Попросил меня недавно один человек помочь ему с галереей на сайте.
Надо ведь показать людям фотографии выполненных работ. А хочется сделать это красиво и удобно!
Ну вот и накатал быстренько для него галерею, а вещь получилась не плохая, поэтому решил и тут выложить тоже 🙂
Все исходники и структуру базы оставлю в конце статьи.
Посмотреть галерею в работе можно .
Но на том сайте можно лишь просмотреть. А если охота испробовать все возможности галереи, то можно глянуть её .
Я специально отдельно её выложил, чтобы можно было побаловаться и потрогать её наяву 🙂
На логотип компании Оазиз можно не обращать внимания, ведь я просто оттуда и скопировал всё с того сайта и поместил на наш)
Как видим, никаких кнопок управления нет. Что бы управлять галереей, необходимо авторизоваться на специальной страничке авторизации вот тут: .
Пароль для входа: 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 }); });
А вот сам код вывода наших фоток:
