Html галерея с описанием. Практика: создаем фотогалерею на CSS. Галерея «jQuery morphing gallery»

» PHP скрипты галереи картинок

Coppermine – это разносторонняя, много функциональная web галерея картинок написанная на языке PHP, с использованием GD или ImageMagick, а так же базу данных MySQL.

| v.1.5.24 | Скачано: раз

Отличный, простой скрипт фото галереи. Просмотр картинки Full Size в новом, открывающемся окне, авто генерация превью (thumbnail) и многое другое в этом пакете Maian Gallery.

| v.2.0 | Скачано: раз

KoschtIT Image Gallery – это бесплатный и открытый код (open source) PHP скрипта фото галереи. Программа используется для быстрого добавление PHP галереи картинок на уже существующий веб сайт.

| v.3.1c | Скачано: раз

Max"s PHP Photo Album – это простой, легкий в использовании PHP скрипт Фото Альбома. Вы можете загружать картинки на ваш сервер, добавлять название/тайтл и описание вашим фото файлам, защитить файлы от просмотра паролем и другие стандартные функции.

| v.1.0 | Скачано: раз

Простая фотогалерея написанная на PHP с использованием базы данных MySQL. Просто загружаете фото - файлы и они сразу же представлены для посетителей вашего сайта в лучшем виде.

| v.2.0 | Скачано: раз

Simple Gallery – это самая легкая система управления галереи картинок написанная на языке PHP, которая использует jQuery, MySQL и библиотеку GD Library.

| v.1.3 | Скачано: раз

Plogger – это php скрипт галереи картинок принципиально нового поколения с открытым для редактирования кодом. PHP программа не раздута каким-либо лишними функциями или сложной настройкой.

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

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!

Скачайте и распакуйте zip-архив с тремя файлами галереи iLoad, затем загрузите файлы на свой сайт. Откройте файл iLoad.js и измените путь до папки с изображениями на путь до папки с файлами iLoad на вашем сайте. Затем откройте страницу, на которой вы собираетесь использовать галерею, и подключите скрипт перед закрывающим тегом так, как показано ниже. Не забудьте изменить путь до файла со скриптом.

На этом установка закончена. Для корректной работы галереи DOCTYPE не обязателен. Если вы хотите подключить iLoad в шапку сайта, то уберите из самого конца файла скрипта вызов функции включения:

После этого вы сможете подключить скрипт в любое место страницы а инициализацию скрипта выполнить в нужный момент после загрузки страницы:

Для использования iLoad в обычном режиме к ссылке на изображение достаточно добавить атрибут rel="iLoad" , и изображение будет открываться не на новой странице а в галерее:

iLoad читает название и описание фотографии из атрибута title . Для того чтобы добавить название к фотографии, пропишите его в аттрибуте title в ссылке на большое изображение:

Для добавления описания так же пропишите его в том же атрибуте, но на этот раз используйте разделитель | . Сам разделитель можно изменить в параметре L.splitSign в файле iLoad.js . Посмотрите как оформляется название и описание:

Вы можете указать только описание без названия, просто пропустив его:

Галерея изображений iLoad позволяет создавать сеты фотографий, то есть наборы (альбомы). Открыв фотографию, состоящую в сете, вы можете просматривать фотографии всего сета не закрывая iLoad и не перезагружая страницу. Так же группирование фотографий позволяет использовать слайдшоу. Чтобы создать сет используя ссылки, в атрибуте rel после "iLoad" поставьте разделитель | и напишите название сета. Вот пример создания простого сета:

Превью изображения или текст

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

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

Закрыть iLoad можно нажав на темной области вокруг вьюпорта, либо щелкнув по кнопке с крестиком на одной из панелей.

Возможно управление с клавиатуры. Для переключения в сете можно использовать стрелки влево и вправо или клавиши "П" и "С". Так же для открытия определенной фотографии можно воспользоваться одной из цифр. Слайдшоу запускается клавишей "Shift" или "Ш", а выключается клавишей "Ctrl" или "З". iLoad выключается клавишей "Esc".

Ниже достаточно подробно описаны все настройки галереи. Вы можете изменять их динамически даже после инициализации галереи. Некоторые настройки потребуют для своего применения перезагрузить галерею функцией L.recreate()

Как при помощи чистого css и пары вспомогательных картинок создать свою фотогалерею для сайта. Простой урок по верстке фотогалереи для веб-сайта .

Для организации фотогалереи на сайте часто используют готовые скрипты на PHP. Я пробовал пару-тройку раз заняться этим полезным делом и пришел к выводу, что если нужна динамическая галерея, где могут оценивать ваши работы другие люди, и где можно легко и быстро вставлять фотки и тексты описания к ним прямо с рабочего стола, то лучше воспользоваться готовыми онлайн сервисами, коих в сети целая куча. Вот хотя бы старый добрый Flickr .

Цеплять к своему сайту скрипт, потом настраивать его — тот еще геморрой. Те бесплатные скрипты, что лежат в сети, либо простые, но страшненькие в оформлении и глючные в работе, либо настолько тяжеловесные и перегруженные всякими излишествами, что править и затачивать их под свой сайт запаришься.

Но если вы хотите просто разместить на своем сайте несколько фоток с подписями, то это очень легко и красиво можно оформить с помощью чистого CSS и пары вспомогательных картинок, что мы сейчас и сделаем.

Для начала нам нужно заготовить парочку вот таких картинок:

Сразу поясним, для чего они у нас такие длинные. Обе картинки мы будем использовать фоном под наши превью (превью — уменьшенная копия фотографии).

Так как превью могут быть разного размера и ориентации (горизонтальные или вертикальные), и подписи к ним могут быть разной длинны, то мы сделаем следующую хитрость: привяжем первую картинку фоном к тэгу div , а вторую — к тэгу p , который задействуем для подписи.

В результате нижний край превьюшки будет всегда на одном и том же расстоянии от подписи, независимо от длинны подписи.

Еще нам понадобятся сами превьюшки фотографий. Большие фотографии мы разместим каждую на своей отдельной странице, с которой будет возврат на главную при помощи кнопки BACK.

Итак, запишем для начала код нашей главной страницы:

Фотогалерея | Урок с сайта сайт

Окно в небо

Злой индеец

Под крылом самолета

Насыпь камней на пирсе

Цветущий куст

Горячая каменная баба

Код совсем простой. Мы поместили содержимое страницы в «коробочку» — container , которую расположили по центру, а каждую превьюшку с подписью оформили отдельным div с классом tumb .

Рассмотрим теперь подробнее файл стилей CSS:

* {
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
body {
background: #fff;
}
#container {
width: 860px;
margin: 0 auto;
}
#header {
background: url(header.gif) no-repeat;
width: 860px;
height: 160px;
margin: 0 auto;
clear: both;
}
div.tumb {
background: url(tumb01.gif) no-repeat;
width: 210px;
float: left;
margin: 0 30px 20px;
}
div.tumb img {
margin:5px 4px;
}
div.tumb p {
background: url(tumb02.gif) no-repeat 0 100%;
font: 85% Verdana, Arial, sans-serif;
color: #333;
margin: 0;
padding: 0 25px 20px 10px;
}

Начнем по порядку. Для всей страницы разом мы установили поля, отступы и границы равными 0. Фон указали белого цвета, у ссылок выключили подчеркивание, а размер контейнера задали в 860 пикселей по ширине и автовыравнивание.

Для шапки нарисовали симпатичный зоголовок и поместили его там в виде фона, задав ширину и высоту. Это все просто. А вот дальше будет хитрость.

Для превьюшек, как уже говорилось, мы использовали div с классом tumb . При этом самому селектору tumb мы в правилах задали отображение фона в виде первой нашей картинки, показанной выше, указав ее ширину в 210 пикселей и запретив повтор. Высоту при этом не указываем!

В следующем наборе правил мы уже задали самим превьюшкам с тэгом img отступы, чтобы картинки не лепились одна к другой.

Обратите внимание на запись — div.tumb img . Она показывает, что мы не просто какому-то произвольному тэгу img задаем эти правила, а именно тому, который входит в блок div с классом tumb .

Далее мы для тэга p , опять же, входящего в блок div с классом tumb , задали размер и цвет шрифта, поля и отступы и, самое важное, указали в качестве фона вторую нашу замечательную картинку. При этом кроме запрета на повтор мы показали ее координаты относительно осей х и у, 0 и 100% соответственно.

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

Вот, собственно, и все!

Еще совет: не делайте с превьюшек ссылку просто на картинку в такой-то папке. Оформите каждую фотографию на отдельной странице, с более подробным описанием и ссылкой возврата на главную страницу. Это будет гораздо красивее и правильнее, нежели сиротливо прилепленная к левому верхнему углу фотка в окне браузера.

Надеюсь, вам понравилось. Enjoy!

Если есть вопросы, задавайте их в комментариях. С удовольствием отвечу.

UPD от 03.11.2018 : На сегодняшний день это уже морально устаревший способ - использовать в качестве подкладки фон из пары картинок. Все делается элементарно инструментами из арсенала CSS3.

Этот урок покажет Вам как создать галерею, которая сама будет находить картинки в папке и отображать их с помощью лайтбокса.

Первым делом создаем костяк нашей галереи:

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"
});
});

Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.

Наша галерея готова! Мне нравится! :)

Долго выбирал тему для сегодняшнего топика. В итоге заметил, что мы еще не делали подборок с галереями изображений . По моему отличная тема, так как галереи присутствуют у множества сайтов. Откровенно говоря, все они не очень привлекательны. Учитывая нынешние тенденции развития jquery, html5 и т. д. я подумал, ведь должны быть уже намного привлекательней решения чем те, которые встречались мне раньше. Итак. Потратив день, удалось найти огромнейшее количество скриптов. Из всей этой горы я решил отобрать только , ведь я люблю , как вы уже заметили по предыдущим постам.
Галерея изображений применима не только в случае с фотоальбомами . Скрипт можно использовать, думаю, что это даже правильней будет, в качестве портфолио для фотографов, дизайнеров и т. д. Jquery эффекты помогут привлечь внимание посетителей и просто придадут изящности вашему сайту.
Итак. К вашему вниманию коллекция jquery плагинов галерей изображений для сайта .
Не забываем комментировать и помните, чтоб не потерять эту подборку, вы можете добавить ее в избранное, нажав на звездочку внизу статьи.