Готовые фотогалерея в html. Функциональная галерея на PHP и jQuery. Галерея изображений с миниатюрами

• В создаваемой нами тестовой галерее все миниатюры фотографий были подготовлены заранее: они имеют одинаковую форму (квадрат) и одинаковые размеры (300×300 пикселей). При этом оригинальные фото могут иметь совершенно другие размеры и пропорции. Квадратные миниатюры одинакового размера позволяют создать элегантную ровную сетку, без необходимости подгонять оригинальную фотографию под форму квадрата, тем самым искажая ее вид. В реальной жизни созданием миниатюр чаще всего занимается специальный скрипт, поскольку фотографий на сайте может быть много и обрезать каждую вручную очень долго.
• Как упоминалось ранее, каждая миниатюра служит ссылкой на полноразмерное фото. На данном этапе, если вы кликните по ней, фото откроется на новой странице. На современных сайтах такое уже встречается нечасто: скорее всего, вы замечали, что просмотр увеличенной фотографии реализовывается во всплывающем окне, и пользователь остается на той же странице, что весьма удобно. Поэтому, несмотря на то, что наш учебник не посвящен языку JavaScript, всё же в конце урока мы познакомим вас со специальным плагином, который поможет реализовать красивое открытие полноразмерного снимка. Обещаем, сложно не будет, и вам обязательно понравится!

А пока что просмотрите веб-страницу gallery.html в браузере. Вот эту разметку, пока что весьма невзрачную и скучную, нам сегодня и предстоит превратить в красивую фотогалерею. Поехали!

Первое, с чего мы начнем, это создание сетки нашей галереи. Сетка является своего рода каркасом, определяющим расположение элементов на веб-странице. Ширина блока-контейнера будет иметь максимальную ширину 960 пикселей, а миниатюры будут выстраиваться в три столбца одинаковой ширины (помните, что мы опираемся на макет). Каждая сторона миниатюры будет иметь внутренний отступ в размере 10 пикселей.

Основываясь на словах выше, запишем первый стиль в файл style.css:

Container { width: 100%; /* ширина блока-контейнера */ max-width: 960px; /* максимальная ширина контейнера */ margin: 0 auto; /* этот стиль центрирует контейнер */ } .photo { float: left; /* говорим элементам выстраиваться один за другим */ width: 33.333333%; /* устанавливаем ширину элемента */ padding: 10px; /* добавляем отступы с каждой стороны */ box-sizing: border-box; /* меняем способ вычисления ширины */ }

Обновив страницу в браузере, вы увидите первые изменения. Миниатюры уже выстроились плиткой по три в ряд. Возможно, вы хотите узнать, почему мы указали такое странное и дробное число для ширины элемента? Всё весьма просто: нам нужно, чтобы в строке помещалось три миниатюры, которые занимали бы отведенное место по максимуму (все 100% ширины контейнера). Мы делим 100 на 3 и получаем число 33 и 3 в периоде. Округление числа до 33.333333 в нашей ситуации приводит к тому, что ширина миниатюры становится 319.98 пикселей. 319.98 × 3 = 959.94, что практически совпадает с шириной контейнера (к сожалению, совсем без погрешностей обойтись нельзя, когда речь идет о дробных числах в CSS).

Проверим адаптивность нашей сетки. Измените ширину окна браузера несколько раз и понаблюдайте за поведением элементов. При ширине менее 977 пикселей элементы начинают некорректно себя вести. Это происходит потому, что изображения миниатюр не подстраиваются под ширину контейнера. Добавьте следующий стиль для обеспечения адаптивности картинок:

Photo img { display: block; max-width: 100%; height: auto; }

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

Согласно макету, каждая миниатюра должна быть обрамлена в рамку светло-серого цвета. Ширина рамки с каждой стороны составляет 10 пикселей. Реализовать эту рамку можно двумя способами, и визуально они ничем не будут отличаться. Мы покажем оба способа.

Первый способ - создать рамку нужного цвета и ширины для каждого тега .
Добавьте этот код к селектору.photo img:

Border: 10px solid #eee; box-sizing: border-box;

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

Обновите страницу в браузере и запомните результат.

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

Padding: 10px; background-color: #eee; box-sizing: border-box;

Сохраните изменения и обновите веб-страницу. Заметили ли вы визуальные изменения? Оба способа приводят к одинаковому внешнему результату, но у них есть отличия в другом.

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

Сделать выбор в пользу второго способа можно, если вам необходимо, чтобы фон, который отображается в «рамке», также был и под фотографией. Зачем это может понадобиться? Например, в случае, когда в галерее присутствуют изображения с прозрачными или полупрозрачными областями, и вам нужно, чтобы из-под этой прозрачной области проглядывал фон.

Пора нам вспомнить о псевдоклассах и псевдоэлементах, которые мы изучали еще в первой части учебника. Сегодня нам понадобится псевдокласс:hover , чтобы определить стиль миниатюры, когда на нее наведен курсор, а также псевдоэлемент:after для добавления определенного контента после каждой миниатюры.

Для улучшения юзабилити (удобства использования) сайта принято добавлять дополнительные эффекты к активным элементам веб-страницы. Например, все мы привыкли к тому, что при наведении курсора на ссылку стандартная стрелка меняется на pointer - курсор в виде руки. Таким образом мы понимаем, что элемент кликабелен и клик по нему приведет к какому-то событию.

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

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

Запишем стиль для псевдокласса.photo a:hover:

Photo a:hover { opacity: 0.5; }

Займемся добавлением иконки глаза. Для этого нам понадобится задействовать псевдоэлемент:after . Добавьте следующие стили в вашу таблицу, после чего мы объясним, зачем нужен каждый из них:

Photo a:after { content: ""; background: transparent url(../img/icons/eye-icon.png) no-repeat center; width: 52px; height: 35px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; visibility: hidden; }

Помимо этого допишите свойство position: relative; к селектору.photo a .

Итак, разберемся с вышенаписанным кодом. Обычно псевдоэлемент:after добавляется к элементу для того, чтобы вывести нужный текст после его содержимого. Этот текст добавляется через свойство content . Веб-разработчики используют возможности:after для вывода дополнительных графических элементов. В этом случае значение свойства content остается пустым, а нужное изображение добавляется с помощью свойства background . Именно это мы и сделали по отношению к псевдоэлементу.photo a:after , добавив иконку глаза как фоновый рисунок.

Но после проделывания этих шагов вы еще не увидите никакого изображения. Чтобы оно показалось, мы добавляем ширину и высоту элемента, а также позиционируем его (позже эта тема будет рассматриваться более детально). Мы установили размеры, идентичные размерам самой иконки (52×35 пикселей) и задали свойство position: absolute .

Иконка уже видна, однако она расположена не по центру миниатюры. Чтобы иметь возможность позиционировать иконку относительно элемента.photo a , мы добавили этому элементу свойство position: relative . Повторимся, что со свойством position мы немного забегаем вперед, поэтому пока что вы можете просто скопировать этот код и наблюдать, что получается.

Следующим шагом будет центрирование иконки по вертикали и горизонтали. Элемент со стилем position: absolute и четко определенными размерами можно легко центрировать, указав для свойств top , bottom , left и right значение 0 , а для свойства margin - значение auto .

Последнее, что осталось разобрать - это свойство visibility: hidden . Оно отвечает за видимость/невидимость элемента. Его значение hidden можно сравнить с плащом-невидимкой - элемент становится невидимым, но при этом находится на странице и занимает место.

Зачем мы скрыли псевдоэлемент с иконкой? Чтобы делать его видимым только при наведении курсора на ссылку-миниатюру. И для этого мы снова обратимся к псевдоклассу:hover . Запишем следующий код:

Photo:hover > a:after { visibility: visible; }

Обновите страницу и посмотрите, как теперь реагируют элементы на наведение курсора. Так выглядит гораздо лучше, не правда ли? Нам осталось стилизовать подписи к фотографиям, добавить финальные штрихи и реализовать открытие фото во всплывающем окне.

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

Photo figcaption { font-family: "Open Sans", sans-serif; color: #999999; text-align: center; margin-top: 20px; }

Мы еще не стилизовали заголовок над галереей. Давайте сделаем это:

H1 { font-size: 36px; text-transform: uppercase; color: #cccccc; text-align: center; margin: 30px 0; }

Чтобы не дописывать свойство font-family к каждому элементу, будет лучше задать его для всего тега , после чего стереть эту строку из стиля для.photo figcaption - она там теперь лишняя:

Body { font-family: "Open Sans", sans-serif; }

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

#gallery { margin-bottom: 50px; }

Обновим страницу и проверим результат. Но что это? Отступ снизу не появился. И если проверить высоту блока #gallery , мы увидим, что она равна нулю. Как такое может быть, если этот блок не пустой, а внутри него находятся миниатюры? Ответ следующий: свойство float исключает элемент из нормального потока. Поэтому, когда дочерним элементам задано обтекание float , родительский элемент сжимается по высоте, словно игнорируя присутствие float-элементов. Высота родителя становится равной нулю, либо, если внутри находятся дочерние элементы без обтекания, высота родителя приравнивается к высоте этих элементов. Отключить игнорирование float-элементов родителем можно с помощью следующего стиля:

#gallery:after { content: ""; display: block; height: 0; clear: both; }

Это один из нескольких CSS-«хаков», позволяющих решить проблему исчезнувшей высоты контейнера. Немного позже мы еще вернемся к обсуждению этой проблемы и изучим ее более подробно. А пока что сохраните изменения в таблице стилей и обновите веб-страницу. Добавленный нами нижний отступ в 60 пикселей теперь находится там, где и требовалось.

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

Плагин Lightbox, работающий на базе JavaScript-библиотеки jQuery, используется для наложения изображений поверх текущей страницы. Это удобный инструмент, который работает в любом современном браузере.

Итак, продублируйте атрибут для каждой из девяти ссылок нашей галереи:

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

При желании вы можете сделать так, чтобы плагин отображал в открытом окне и подпись к фотографии. Для этого добавьте к ссылке еще один атрибут - data-title="" , а внутрь его кавычек поместите текст подписи, скопировав из тега :

Повторите эти действия для остальных ссылок и проверьте результат.

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

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

Мы надеемся, что данное практическое занятие принесло вам пользу и помогло лучше разобраться в том, как работает CSS. А впереди нас ждет еще один урок - на этот раз направленный на закрепление знаний о фоновых изображениях.

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

Уникальный способ отобразить ваши фотографии в виде jQuery необычной галереи.

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

Изображение увеличивается при наведении на него курсора мыши.

Профессиональная jQuery галерея 2011 года.

Еще один качественный jQuery плагин от разработчиков Nivo слайдера. Увеличение изображение по нажатию на миниатюру.

Новая jQuery галерея 2011 года. Лента изображений растянута на всю ширину экрана. Навигация между фотографиями осуществляется тремя способами: с помощью колеса мыши, с помощью прокрутки сверху галереи и с помощью блока с миниатюрами снизу. Галерея выглядит очень эффектно.

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

С помощью ползунка сверху можно изменить расстояние между изображениями в стопке. При нажатии на изображение оно поворачивается.

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

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

Интересный эффект при наведении курсора мыши на миниатюру.

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

Новая jQuery галерея для ваших проектов.

Галерея выплывает на странице по нажатию на кнопку. Миниатюры отображаются вокруг увеличенного изображения. Можно управлять автоматической сменой изображений. Используемые технологии: jQuery, CSS, PHP.

jQuery галерея. Реализована автоматическая смена слайдов и прокрутка миниатюр, если их слишком много.

Плагин галереи изображений на jQuery.

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

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

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

Интересный эффект при наведении.

jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

Сетка изображений растягивается в зависимости от ширины окна браузера. Интересный эффект при наведении: подсвечивается активный ряд и колонка.

Легкая галерейка jQuery в несколько строк кода.

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

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

Изображение и его миниатюры выполнены в виде кругов.

Оригинальное javascript решение для оформления портфолио фотографа. Навигация между изображениями осуществляется с помощью стрелок Вверх/Влево/Вправо и при помощи мини-квадратов (имитация перемещения в 2D пространстве). Можно сгруппировать фотографии из разных фото сессий в разные вертикальные ряды и перемещаться по ним с помощью элементов навигации. Смотрите демонстрацию.

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

Галерея интегрированная с Google картой. Можно развернуть на весь экран, нажав на иконку в правом нижнем углу. Отлично подойдет для туристических сайтов.

jQuery галерея с миниатюрами.

Слайд-шоу с миниатюрами.

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

Много вариантов отображения и настроек.

Красиво выглядит и отлично работает во всех современных браузерах

Можно управлять автоматическим показом слайдов (старт/стоп), переключение слайдов с помощью стрелок клавиатуры, автоматическое постраничное разбиение названий слайдов, если их много, поддерживается несколько галерей на одной странице, подписи к слайдам, поддержка API и возможность создавать свои эффекты перехода слайдов

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

Это полностью настраиваемая flash-галерея c различными эффектами для изображений и текста.

Для установки галереи просто распакуйте архив в нужную вам директорию и отредактируйте 3 xml-файла. settings.xml - для настроек галереи, big.xml - для указания путей к большим изображениям, thumb.xml - для указания путей к превьюшкам.

Этот скрипт дает вам простой способ создать мультимедийное слайд-шоу на вашем собственном сайте.

Установка:

Shadowbox полностью написан на JavaScript и CSS и отлично настраиваемый. Возможно использовать различны javascript-библиотеки. Инструкцию по использованию можно увидеть .

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

Отличная галерея написанная на Mootools.

FancyBox - отличный инструмент для отображения изображений, HTML контента и мультимедиа в Mac-style Lightbox.

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

Отличное слайдшоу, простое в использовании. Скопируйте изображения в папку images, а превьюшки для них в папку thumbs.

Пример html-кода.

< div id= "gallery" >
< div id= "imagearea" >
< div id= "image" >




< div id= "thumbwrapper" >
< div id= "thumbarea" >
< ul id= "thumbs" >
< li value= "1" >< img src= "thumbs/1.jpg" alt= "" />
< li value= "2" >< img src= "thumbs/2.jpg" alt= "" />
< li value= "3" >< img src= "thumbs/3.jpg" alt= "" />
< li value= "4" >< img src= "thumbs/4.jpg" alt= "" />
< li value= "5" >< img src= "thumbs/5.jpg" alt= "" />

Также вы можете настроить некоторые JavaScript-переменные:

var imgid = "image" ; // id блока с изображениями //
var imgdir = "fullsize" ; // путь к папке с большими изображениями //
var imgext = ".jpg" ; // расширения изображений //
var thumbid = "thumbs" ; // id блока с превьюшками //
var auto = true ; // автоматический запуск //
var autodelay = 5 ; // кол-во секунд между сменой изображений //

Отличное, легкое слайдшоу написанное с использованием Mootools 1.2

Это плагин для jQuery автоматически определяет расширение каждого медиа-файла.

(E)2 Photo Gallery - бесплатная галерея созданная с помощью MooTools JavaScript библиотеки.

Flickrshow - легкое, кроссбраузерное JavaScript-слайдшоу.

ProtoFlow написан на JavaScript. Использует Prototype and Scriptaculous.

Отличная flash-галерея

PostcardViewer бесплатный Flash image viewer. Интерфейс выглядит как набор открыток перемешанных на столе. Он очень прост в использовании. Скопируйте изображения в папку images и пропишите в файле gallery.xml пути к ним и описания.

< image>
< url> images/ wide. jpg
< caption> Название изображения.

Vista Photo Gallery скрипт фотоальбома, который позволяет создавать и публиковать интерактивные фото галереи для вашего сайта.

UvumiTools Галерея позволяет создавать Галереи фотографий на вашем сайте без необходимости быть опытным программистом, благодаря мощной библиотеки MooTools JavaScript. Просто подключите пару JavaScript и CSS файлов.

Простейшая галерея выполненная на jQuery и состоящая всего из 4 строчек вызывающего кода.

Для начала нам нужно подготовить изображения для галереи и их уменьшенные превью. Давайте большие изображения будут с суффиксом _large, а их превью с суффиксом _thumbs. Для каждого изображения у нас будет пара, image_xx_large.jpg и image_xx_thumb.jpg. В этом примере все большие изображения будут иметь размеры 565 х 280 пикселей, а превью будет 100 х 100 пикселей.
Подключаем в шапке:

Добавим стили для галереи:

#thumbs { padding-top: 10px; overflow: hidden; } #thumbs img, #largeImage { border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; } #thumbs img { float: left; margin-right: 6px; } #description { background: black; color: white; position: absolute; bottom: 0; padding: 10px 20px; width: 525px; margin: 5px; } #panel { position: relative; } Теперь добавим функциональности. При нажатии на изображение превью, большое изображение должно измениться, и должно измениться его описание, которое задано в атрибуте "Alt". Реализуется это следующим кодом: $("#thumbs").delegate("img","click", function(){ $("#largeImage").attr("src",$(this).attr("src").replace("thumb","large")); $("#description").html($(this).attr("alt")); }); Вот собственно и всё.

» 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 программа не раздута каким-либо лишними функциями или сложной настройкой.