Даже опытные веб-мастера зачастую путают понятия «фотогалерея» и «фотоальбом». Основным различием между этими понятиями считается тот факт, что в фотогалереях «на показ» выставляются все доступные фотографии. А вот фотоальбоме изображения появляются по одному.
Стоит заметить, что подобная классификация считается довольно-таки условной. В интернете есть немало примеров, которые практически нереально классифицировать общепринятыми понятиями. Далее проанализируем пример создания стандартной галереи для сайта на html.
Однако перед тем, как приступить к описанию основных особенностей создания фотогалереи, стоит сказать несколько слов о ее преимуществах:
- Фотогалерея позволяет продемонстрировать на одной странице все доступные фотографии. За счет удобства большинству пользователей нравится именно такой способ отображения фотоснимков.
- Простота реализация. Для разработки подобной галереи на html необходимо не так уж и много времени.
- Открытость. Благодаря этому, даже простая галерея для сайта на html вызывает у пользователей большее доверие к контенту.
Фотогалереи имеют и несколько недостатков.
- Во-первых, они громоздки и занимают слишком много места на странице. Из-за этого галереи не всегда органично вписываются в дизайн сайта.
- Во-вторых, у фотогалерей относительно узкий «спектр действий». Они зачастую подходят только для десктопных версий сайта. На мобильных устройствах галереи в большинстве случаев смотрятся ужасно.
Стандартная фотогалерея
Стандартная галерея для сайта на html или css – это набор ссылок, к которым посредством тега добавлено превью основного фото. По щелчку мышки у пользователя откроется страница с основным изображением.
Этот вариант, возможно, выглядит довольно-таки примитивным. Но он позволяет избавиться от множества лишних действий и продемонстрировать пользователю полноценную версию изображения.
Для написания главной страницы используются следующий код:
</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
В этом случае нажатие на превью фото приведет к его увеличению. Фотогалереи на 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
Альтернативным вариантом является создание галереи при помощи JavaScript Framework Jquery. Для написания фотогалереи на основе данной библиотеки необходимы определенные навыки. Но большинство веб-мастеров предпочитает находить готовые плагины и использовать их на своем сайте.
Одним из таких плагинов является Galleria. Преимуществом этой фотогалереи является наличие огромных возможностей для настройки. К преимуществам стоит отнести и корректное отображение галереи практически на всех мобильных устройствах:
Скрипт галереи для сайта – это архив, предназначенный для извлечения программных файлов и размещения на сайте.
В качестве примера подключения рассмотрим всю ту же Galleria:
- Подключение библиотеки Jquery к сайту. Для этого необходимо вставить внутри тега следующую строку:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
Проверка подключения Jquery осуществляется при помощи следующего скрипта:
<script> $("body").text("jQuery works"); </script>
Корректно подключенная библиотека отобразит следующий текст:
- Для установки Galleria нужно скачать архив с галерей, предназначенной для сайта, и распаковать его в директории с html-файлом. Плагин размещается путем написания следующего кода:
<script src="galleria/galleria-1.4.min.js"></script>
Чтобы проверить работоспособность плагина необходимо поместить вместо предыдущего кода следующий:
<script> if (Galleria) { $("body").text('Galleria works') } </script>
В том случае, если Galleria подключена корректно, в окне браузера будет написано «Galleria works».
- Установка параметров фотогалереи и ее «заполнение». Для установки цвета, ширины и длины используется класс CSS. С этой целью укажем необходимые значения стилей:
<style type="text/css"> .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 type="text/css"> .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>
WordPress плагин для создания галереи — NextGen Gallery
Сайты, созданные на популярных движках, могут использовать различные специальные расширения. Например, на ресурс, разработанный на WordPress, можно установить плагин NextGen Gallery:
Создание адаптивной галереи онлайн — Cincopa
Адаптивная галерея для сайта также может быть создана посредством специальных онлайн-ресурсов. Примером такого ресурса является Cincopa. В данном случае пользователь может самостоятельно собрать фотогалерею и подобрать под нее цвет и дизайн в соответствии со своими предпочтениями: