Как создать CSS галерею без использования JavaScript

Оказывается, вполне возможно создать простую CSS галерею, не используя Javascript. В этой статье мы покажем, как можно сделать это только с помощью HTML и CSS.

Как создать простую CSS галерею с помощью HTML?

Как известно галерея состоит из двух блоков изображений. Первый из них содержит мелкие изображения (миниатюры), а второй — крупные изображения. Если хотите создать галерею, вам необходимо указать только однозначные записи ( picture1, picture2, picture3, picture4, picture5).

Код будет выглядеть следующим образом:

div ul li> a href="#picture1"> img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" /> a> li> li> a href="#picture2"> img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" /> a> li> li> a href="#picture3"> img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" /> a> li> li> a href="#picture4"> img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" /> a> li> ul> div div> a name="picture1">a> img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" /> div> div> a name="picture2">a> img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" /> div> div> a name="picture3">a> img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" /> div> div> a name="picture4">a> img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" /> div> div> div>

2. Как создать простую CSS галерею с помощью CSS?

Вы можете легко создать CSS галерею, следуя этим шагам:

• Установите ширину блока крупных изображений, равную ширине одного из крупных изображений.
• Установите CSS свойство overflow в значение “hidden” для блока крупных изображений.
• Разместите изображения со ссылкой привязки внутри этого блока.
• Установите ссылки к миниатюрам, чтобы связать их с крупными изображениями.

На данном этапе, если вы кликните по миниатюре, откроется соответствующее крупное изображение.

Код будет выглядеть следующим образом:

#gallery < width: 600px; overflow: hidden; position: relative; z-index: 1; margin: 100px auto; border: 2px solid #003C72; > #navigation < list-style: none; padding: 0; margin: 0; display:flex; justify-content: space-between; > #navigation li < padding: 0; margin: 0; margin:5px 0 20px; > #navigation li a img < display: block; border: none; > #navigation li a < display: block; > #full-picture < width: 600px; height: 375px; overflow: hidden; float: left;> #full-picture img< width:100%; >

Теперь наша галерея готова! Посмотрим полный код:

Пример

html> html> title>Заголовок документа title> head> style> #gallery < width: 600px; overflow: hidden; position: relative; z-index: 1; margin: 100px auto; border: 2px solid #003C72; > #navigation < list-style: none; padding: 0; margin: 0; display:flex; justify-content: space-between; > #navigation li < padding: 0; margin: 0; margin:5px 0 20px; > #navigation li a img < display: block; border: none; > #navigation li a < display: block; > #full-picture < width: 600px; height: 375px; overflow: hidden; float: left;> #full-picture img< width:100%; > style> head> body> div id="gallery"> ul id="navigation"> li> a href="#picture1"> img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" /> a> li> li> a href="#picture2"> img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" /> a> li> li> a href="#picture3"> img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" /> a> li> li> a href="#picture4"> img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" /> a> li> ul> div id="full-picture"> div> a name="picture1"> a> img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" /> div> div> a name="picture2"> a> img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" /> div> div> a name="picture3"> a> img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" /> div> div> a name="picture4"> a> img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" /> div> div> div> body> html>

Если хотите создать слайдер изображений или слайд-шоу, можете найти много полезной информации об этом здесь.

Источник

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

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

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

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

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

• Возможность продемонстрировать все изображения ( фото ) сразу – иногда пользователям лень нажимать кнопки для перелистывания. А в классической фотогалерее все объекты сразу доступны для просмотра;
• Простота реализации – стандартный образец можно легко создать с помощью html ;
• Открытость – фотогалерея ( по сравнению с альбомом ) обладает большей « открытостью », что на подсознательном уровне позволяет вызвать доверие со стороны пользователей.

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

Пример классической фотогалереи

Простая фотогалерея для сайта представляет собой набор ссылок, к каждой из которых с помощью тега « прикручена » превьюшка основного изображения. Щелчок по ссылке переносит пользователя на другую веб-страницу, где «выставлена» полновесная фотография. Под ней находится еще одна гиперссылка, ведущая на основную страницу:

Конечно, данный пример того, как сделать фотогалерею на сайте, выглядит несколько «топорным». Но открытие основного изображения в отдельном окне избавляет от многих сложных приемов и позволяет отобразить фотографию «в полный рост».
Код главной страницы:

Фотогалерея

Фотогалерея на CSS

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

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

Html код примера, как создать фотогалерею на сайте:

#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) #gall img:nth-child(4n-1) #gall img:nth-child(4n) #gall img:nth-child(n+5) #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

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

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

Мы советуем Galleria . Она обладает широким набором параметров для настройки. И корректно отображается на большинстве мобильных устройств, работающих под управлением популярных операционных систем:

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

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

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

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

• Установка Galleria – на данном этапе следует скачать архив с фотогалереей для сайта и распаковать его в директорию, где находятся наш html файл. Для подключения плагина размещаем следующий код сразу под строкой, с помощью которой мы в предыдущем шаге включили поддержку Jquery :

А для проверки работоспособности плагина вместо предыдущего отладочного кода поместим этот:

Если галерея подключена правильно, то в браузере отобразится надпись « Galleria works »:

• Устанавливаем параметры галереи и добавляем в нее изображения – сначала с помощью класса CSS установим длину, ширину и цвет галереи. Для этого пропишем значение соответствующих стилевых свойств.

Затем добавляем изображения для показа:

• Активируем плагин и устанавливаем тему фотогалереи для сайта – чтобы сделать это, сразу под слоем изображений размещаем следующие строки кода:

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

Приведем весь код примера страницы с подключенным плагином:

   .galleria     
   
   

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

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

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

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

Источник