Адаптивные галереи для сайта

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

Стоит заметить, что подобная классификация считается довольно-таки условной. В интернете есть немало примеров, которые практически нереально классифицировать общепринятыми понятиями. Далее проанализируем пример создания стандартной галереи для сайта на html.

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

  • Фотогалерея позволяет продемонстрировать на одной странице все доступные фотографии. За счет удобства большинству пользователей нравится именно такой способ отображения фотоснимков.
  • Простота реализация. Для разработки подобной галереи на html необходимо не так уж и много времени.
  • Открытость. Благодаря этому, даже простая галерея для сайта на html вызывает у пользователей большее доверие к контенту.

Фотогалереи имеют и несколько недостатков.

  1. Во-первых, они громоздки и занимают слишком много места на странице. Из-за этого галереи не всегда органично вписываются в дизайн сайта.
  2. Во-вторых, у фотогалерей относительно узкий «спектр действий». Они зачастую подходят только для десктопных версий сайта. На мобильных устройствах галереи в большинстве случаев смотрятся ужасно.

Стандартная фотогалерея

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

Галерея для сайта на 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 Responsive JavaScript Image Gallery

Скрипт галереи для сайта – это архив, предназначенный для извлечения программных файлов и размещения на сайте.

В качестве примера подключения рассмотрим всю ту же 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>
Галерея для сайта - подключение2

В том случае, если 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>

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

Скрипт для галереи на сайт - Galleria

Далее еще раз укажем весь кода данного примера:

<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:

WordPress Gallery Plugin — NextGEN Gallery

Создание адаптивной галереи онлайн — Cincopa

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

Бесплатнaя Фотогалерея для сайта Как сделать фотогалерею на сайте


Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *