Фотогалерея для своего сайта – все способы реализации

Это ж надо было умудриться столько наснимать, что сделанные вами фотографии даже у тещи под кроватью лежат. Жена сказала, чтоб дома больше ни одного снимка не было? Ох-хо-хох! Тогда пора все свои работы переносить в виртуальное пространство. А для этого вам понадобится фотогалерея для сайта:

Содержание

Фотогалерея для сайта

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

Но такое деление является чисто условным, и нередко в интернете можно встретить образцы, которые просто не поддаются никакой классификации. Поэтому рассмотрим пример реализации классической фотогалереи на 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

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

Фотогалерея на CSS - 2
Сайт от идеи до реализации

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. Она обладает широким набором параметров для настройки. И корректно отображается на большинстве мобильных устройств, работающих под управлением популярных операционных систем:

Фотогалерея на основе Jquery

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

Рассмотрим пошагово пример подключения Galleria к обычному html сайту:

  • Подключаем библиотеку Jquery у себя на веб-странице – для этого вставляем внутри тега строку:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

Для проверки подключения библиотеки в тело страницы поместим проверочный скрипт:

<script>
            $("body").text("jQuery works");
</script>

Если подключение произведено корректно, то при запуске веб-страницы в браузере будет отображен соответствующий текст:

Фотогалерея на основе Jquery - 2
HTTP/2: предыстория, преимущества производительности и реализации
  • Установка 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. Сервис позволяет собрать фотогалерею собственными руками, подобрав ее дизайн на свой вкус и цвет:

Остальные варианты - 2

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