Как сделать фотогалерею на

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

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

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

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

Для сайтов, работающих на основе популярных php-движков, в интернете доступно множество специализированных плагинов (расширений). Например, чтобы создать фотогалерею у себя на блоге, который работает под управлением WordPress, можно использовать плагин NextGen Gallery. Он является одним из самых популярных расширений для развертывания фотогалереи на базе WordPress:

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

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

Популярное








Как сделать фотогалерею на

Как сделать фотогалерею на

Как сделать фотогалерею на

Как сделать фотогалерею на

Как сделать фотогалерею на

Похожие новости: