Фотогалерея для своего сайта – все способы реализации
Это ж надо было умудриться столько наснимать, что сделанные вами фотографии даже у тещи под кроватью лежат. Жена сказала, чтоб дома больше ни одного снимка не было? Ох-хо-хох! Тогда пора все свои работы переносить в виртуальное пространство. А для этого вам понадобится фотогалерея для сайта:
Фотогалерея для сайта
Очень часто фотогалерею можно спутать с фотоальбомом. Основным признаком галереи является «выставление на показ» сразу всех фотографий. А в альбоме снимки отображаются по одному.
Но такое деление является чисто условным, и нередко в интернете можно встретить образцы, которые просто не поддаются никакой классификации. Поэтому рассмотрим пример реализации классической фотогалереи на html. Но для начала разберемся, почему использование галереи предпочтительнее для сайта, чем фотоальбом:
- Возможность продемонстрировать все изображения (фото) сразу – иногда пользователям лень нажимать кнопки для перелистывания. А в классической фотогалерее все объекты сразу доступны для просмотра;
- Простота реализации – стандартный образец можно легко создать с помощью html;
- Открытость – фотогалерея (по сравнению с альбомом) обладает большей «открытостью», что на подсознательном уровне позволяет вызвать доверие со стороны пользователей.
В то же время галерея обладает и недостатками. Основной из них – это громоздкость. Из-за «массивных» размеров она занимает много место на странице сайта. Поэтому ее очень тяжело вписать в общий дизайн. Кроме этого фотогалерея обладает узким «спектром действия», потому что ее использование оправдывается лишь в полновесных версиях ресурсов. А реализация ее «классической» схемы для мобильных устройств весьма затруднена.
Пример классической фотогалереи
Простая фотогалерея для сайта представляет собой набор ссылок, к каждой из которых с помощью тега <img> «прикручена» превьюшка основного изображения. Щелчок по ссылке переносит пользователя на другую веб-страницу, где «выставлена» полновесная фотография. Под ней находится еще одна гиперссылка, ведущая на основную страницу:

Конечно, данный пример того, как сделать фотогалерею на сайте, выглядит несколько «топорным». Но открытие основного изображения в отдельном окне избавляет от многих сложных приемов и позволяет отобразить фотографию «в полный рост».
Код главной страницы:
</head>
<body>
<h1 style="text-align: center;">Фотогалерея</h1>
<div style="text-align: center;">
<a href="1.html"><img src="im/1a.png" border="2" /></a>
<a href="2.html"><img src="im/2a.png" border="2" /></a>
<a href="3.html"><img src="im/3a.png" border="2" /></a>
<a href="4.html"><img src="im/4a.png" border="2" /></a>
<a href="5.html"><img src="im/5a.png" border="2" /></a>
</div>
</body>
Код дочерней веб-страницы:
<body>
<div style="text-align: center;">
<img src="im/1.jpg"/>
<br />
<a href="simple_gallery.html">Назад</a>
</div>
</body>
Фотогалерея на CSS
Предыдущий пример хоть и прост в реализации, но слишком тяжел. И больше похож на «костяк» простого сайта. Поэтому, чтобы не использовать в реализации фотогалереи несколько взаимосвязанных веб-документов, для обработки события (нажатия на превью картинки) можно воспользоваться возможностями Javascript. Но пока мы воздержимся от программирования, и в следующем примере реализуем фотографию на основе CSS:

Нажатие на превьюшку фотографии приведет к увеличению масштаба. Кроме этого фотогалерея «умеет» подстраиваться под размеры окна браузера, пропорционально изменяя длину и ширину превью (уменьшая или увеличивая). И все это лишь с помощью CSS и легкой html структуры:

Html код примера, как создать фотогалерею на сайте:
<body>
<div id="gall">
<img src="im/1.jpg" tabindex="0" border="3"/>
<img src="im/2.jpg" tabindex="0" border="3"/>
<img src="im/4.jpg" tabindex="0" border="3" />
<img src="im/5.jpg" tabindex="0" border="3"/>
<div></div>
</div>
</body>
CSS фотогалереи:
#gall {
position: relative;
padding-top: 50%;
-moz-user-select: none; user-select: none;
}
#gall img {
position: absolute;
top: 25%;
left: 12.5%;
max-width: 24.5%;
max-height: 49.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: zoom-in;
transition: .2s;
}
#gall img:nth-child(4n-2) {left: 37.5%;}
#gall img:nth-child(4n-1) {left: 62.5%;}
#gall img:nth-child(4n) {left: 87.5%;}
#gall img:nth-child(n+5) {top: 75%;}
#gall img:focus {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
max-width: 100%;
max-height: 100%;
outline: none;
pointer-events: none;
}
#gall img:focus ~ div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
cursor: zoom-out;
}
Фотогалерея на основе Jquery
Кроме «непрограммных» образцов на сайте можно использовать фотогалереи, написанные на Jquery. Самостоятельное создание галереи на основе этой библиотеки потребует специальных знаний и навыков. Легче найти уже готовый вариант в интернете и установить его на свой сайт.
Мы советуем Galleria. Она обладает широким набором параметров для настройки. И корректно отображается на большинстве мобильных устройств, работающих под управлением популярных операционных систем:

Скрипт фотогалереи для сайта представляет собой архив, из которого нужно извлечь программные файлы и разместить у себя на сайте.
Рассмотрим пошагово пример подключения Galleria к обычному html сайту:
- Подключаем библиотеку Jquery у себя на веб-странице – для этого вставляем внутри тега строку:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
Для проверки подключения библиотеки в тело страницы поместим проверочный скрипт:
<script>
$("body").text("jQuery works");
</script>
Если подключение произведено корректно, то при запуске веб-страницы в браузере будет отображен соответствующий текст:

- Установка Galleria – на данном этапе следует скачать архив с фотогалереей для сайта и распаковать его в директорию, где находятся наш html файл. Для подключения плагина размещаем следующий код сразу под строкой, с помощью которой мы в предыдущем шаге включили поддержку Jquery:
<script src="galleria/galleria-1.4.min.js"></script>
А для проверки работоспособности плагина вместо предыдущего отладочного кода поместим этот:
<script>
if (Galleria) { $("body").text('Galleria works') }
</script>
Если галерея подключена правильно, то в браузере отобразится надпись «Galleria works»:

- Устанавливаем параметры галереи и добавляем в нее изображения – сначала с помощью класса CSS установим длину, ширину и цвет галереи. Для этого пропишем значение соответствующих стилевых свойств.
Пример:
<style>
.galleria{ width: 700px; height: 400px; background: #000 }
</style>
Затем добавляем изображения для показа:
<div class="galleria">
<img src="im/1.jpg">
<img src="im/1.jpg">
<img src="im/1.jpg">
</div>
- Активируем плагин и устанавливаем тему фотогалереи для сайта – чтобы сделать это, сразу под слоем изображений размещаем следующие строки кода:
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
</script>
В примере мы устанавливаем классическую тему. На сайте плагина доступны для скачивания и другие темы оформления, но все они платные:

Приведем весь код примера страницы с подключенным плагином:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
.galleria{ width: 700px; height: 400px; background: #000 }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
</head>
<body>
<div class="galleria">
<img src="im/1.jpg">
<img src="im/2.jpg">
<img src="im/3.jpeg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
</script>
</body>
</html>
Остальные варианты
Для сайтов, работающих на основе популярных php-движков, в интернете доступно множество специализированных плагинов (расширений). Например, чтобы создать фотогалерею у себя на блоге, который работает под управлением WordPress, можно использовать плагин NextGen Gallery. Он является одним из самых популярных расширений для развертывания фотогалереи на базе WordPress:

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

Вот теперь (на радость жене) можно смело собрать в кучу все свои фото шедевры, вынести их из дома и развесить «на стенах» новой фотогалереи. А главное, не забудьте про те фото, которые лежат у тещи под диваном!