Как создать 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/CSS и JavaScript-библиотек.
Алексей Кодов
Автор статьи
1 июня 2023 в 9:02
Создание галереи изображений на сайте может быть выполнено с использованием различных инструментов и подходов. В этой статье мы рассмотрим два популярных метода: с использованием HTML/CSS и с применением библиотеки JavaScript. Давайте начнем! ��
Метод 1: HTML и CSS
Шаг 1: Разметка
Сначала создадим разметку для галереи с помощью тегов HTML. В данном примере мы будем использовать теги div и img :
Шаг 2: Стилизация
Теперь добавим немного стилей с помощью CSS, чтобы сделать галерею более красивой и функциональной:
.gallery < display: flex; flex-wrap: wrap; gap: 10px; >.gallery img
В данном примере мы используем свойства flex , flex-wrap и gap для создания адаптивной сетки изображений. Свойство cursor указывает, что изображения являются интерактивными элементами.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Метод 2: JavaScript-библиотека
Если вы хотите добавить дополнительные функции, такие как просмотр изображений в модальном окне, вы можете использовать готовые JavaScript-библиотеки. Одна из таких библиотек — Lightbox.
Шаг 1: Подключение библиотеки
Подключите файлы стилей и скриптов Lightbox к вашему проекту:
Шаг 2: Разметка
Создайте разметку галереи аналогично первому методу, но добавьте атрибут data-lightbox и ссылку на большое изображение для каждого элемента:
Шаг 3: Стилизация
Добавьте стили CSS из первого метода или свои собственные стили для кастомизации галереи.
Теперь у вас есть галерея изображений с возможностью просмотра в модальном окне! ��
В заключение, создание галереи изображений на сайте может быть выполнено разными способами, в зависимости от ваших потребностей и предпочтений. Экспериментируйте с разными инструментами и подходами, чтобы найти тот, который подходит вам больше всего. Удачи вам в обучении веб-разработке! ��
Практика: создаем фотогалерею на CSS
Готовы поупражняться в использовании новых знаний о CSS? В этом практическом уроке вам предстоит узнать, как сделать адаптивную галерею в виде квадратных плиток, применяя полученные навыки. Ознакомьтесь с планом урока, после чего приступим к делу.
План практического урока
Итак, вам наверняка интересно, как будет выглядеть результат ваших трудов по завершению практики. Мы сразу продемонстрируем вам макет будущей фотогалереи:
Пошаговый план создания этой галереи следующий:
- Разработка адаптивной сетки.
- Оформление миниатюр.
- Стилизация подписей.
- Финальные штрихи.
- Дополнительно: подключение плагина для всплывающих окон.
Загрузка файлов
Скачайте архив с файлами и откройте в удобном для вас редакторе кода файлы gallery.html и style.css (из папки css ). Как и в предыдущей практике, в теге мы заранее подключили файл сброса стилей (на этот раз Reset.css вместо Normalize) и основную таблицу стилей (пока что пустую), а также шрифт Google Fonts. Дополнительно мы добавили еще одну таблицу стилей lightbox.min.css , а в конце документа — скрипт lightbox-plus-jquery.min.js . Зачем нужны эти два файла, мы скажем позже.
Создание фотогалереи
Изучите структуру HTML-страницы. В теле документа расположен блок-контейнер, в котором есть заголовок и основной блок с идентификатором #gallery . Внутри блока галереи находится девять HTML5-тегов с классом .photo , каждый из которых содержит тег с миниатюрой изображения и тег с подписью к фото. Кроме этого, каждое изображение обернуто в тег , который содержит ссылку на соответствующий полноразмерный графический файл.
Перед началом работы хотелось бы сразу упомянуть о нескольких моментах:
- В создаваемой нами тестовой галерее все миниатюры фотографий были подготовлены заранее: они имеют одинаковую форму (квадрат) и одинаковые размеры (300×300 пикселей). При этом оригинальные фото могут иметь совершенно другие размеры и пропорции. Квадратные миниатюры одинакового размера позволяют создать элегантную ровную сетку, без необходимости подгонять оригинальную фотографию под форму квадрата, тем самым искажая ее вид. В реальной жизни созданием миниатюр чаще всего занимается специальный скрипт, поскольку фотографий на сайте может быть много и обрезать каждую вручную очень долго.
- Как упоминалось ранее, каждая миниатюра служит ссылкой на полноразмерное фото. На данном этапе, если вы кликните по ней, фото откроется на новой странице. На современных сайтах такое уже встречается нечасто: скорее всего, вы замечали, что просмотр увеличенной фотографии реализовывается во всплывающем окне, и пользователь остается на той же странице, что весьма удобно. Поэтому, несмотря на то, что наш учебник не посвящен языку JavaScript, всё же в конце урока мы познакомим вас со специальным плагином, который поможет реализовать красивое открытие полноразмерного снимка. Обещаем, сложно не будет, и вам обязательно понравится!
А пока что просмотрите веб-страницу gallery.html в браузере. Вот эту разметку, пока что весьма невзрачную и скучную, нам сегодня и предстоит превратить в красивую фотогалерею. Поехали!
1. Разработка адаптивной сетки
Первое, с чего мы начнем, это создание сетки нашей галереи. Сетка является своего рода каркасом, определяющим расположение элементов на веб-странице. Ширина блока-контейнера будет иметь максимальную ширину 960 пикселей, а миниатюры будут выстраиваться в три столбца одинаковой ширины (помните, что мы опираемся на макет). Каждая сторона миниатюры будет иметь внутренний отступ в размере 10 пикселей.
Основываясь на словах выше, запишем первый стиль в файл style.css :
.container < width: 100%; /* ширина блока-контейнера */ max-width: 960px; /* максимальная ширина контейнера */ margin: 0 auto; /* этот стиль центрирует контейнер */ >.photo < float: left; /* говорим элементам выстраиваться один за другим */ width: 33.333333%; /* устанавливаем ширину элемента */ padding: 10px; /* добавляем отступы с каждой стороны */ box-sizing: border-box; /* меняем способ вычисления ширины */ >
Обновив страницу в браузере, вы увидите первые изменения. Миниатюры уже выстроились плиткой по три в ряд. Возможно, вы хотите узнать, почему мы указали такое странное и дробное число для ширины элемента? Всё весьма просто: нам нужно, чтобы в строке помещалось три миниатюры, которые занимали бы отведенное место по максимуму (все 100% ширины контейнера). Мы делим 100 на 3 и получаем число 33 и 3 в периоде. Округление числа до 33.333333 в нашей ситуации приводит к тому, что ширина миниатюры становится 319.98 пикселей. 319.98 × 3 = 959.94, что практически совпадает с шириной контейнера (к сожалению, совсем без погрешностей обойтись нельзя, когда речь идет о дробных числах в CSS).
Проверим адаптивность нашей сетки. Измените ширину окна браузера несколько раз и понаблюдайте за поведением элементов. При ширине менее 977 пикселей элементы начинают некорректно себя вести. Это происходит потому, что изображения миниатюр не подстраиваются под ширину контейнера. Добавьте следующий стиль для обеспечения адаптивности картинок:
.photo img
Теперь всё работает так, как надо, и даже на небольших телефонах с шириной экрана 320 пикселей наша галерея весьма удобна в использовании и красиво выглядит.
2. Оформление миниатюр
Согласно макету, каждая миниатюра должна быть обрамлена в рамку светло-серого цвета. Ширина рамки с каждой стороны составляет 10 пикселей. Реализовать эту рамку можно двумя способами, и визуально они ничем не будут отличаться. Мы покажем оба способа.
Способ I: свойство border
Первый способ — создать рамку нужного цвета и ширины для каждого тега .
Добавьте этот код к селектору .photo img :
border: 10px solid #eee; box-sizing: border-box;
Первая строка устанавливает рамку, а вторая меняет способ вычисления размеров миниатюры, чтобы в общую ширину включалась наша рамка. В противном случае миниатюры стали бы выходить за пределы контейнера.
Обновите страницу в браузере и запомните результат.
Способ II: свойства background-color и padding
Второй способ заключается в том, чтобы имитировать вид рамки посредством создания 10-пиксельных внутренних отступов и закрашивания фона в светло-серый цвет. Замените код из первого способа на следующий:
padding: 10px; background-color: #eee; box-sizing: border-box;
Сохраните изменения и обновите веб-страницу. Заметили ли вы визуальные изменения? Оба способа приводят к одинаковому внешнему результату, но у них есть отличия в другом.
Первый способ занимает на одну строку меньше (если, конечно, использовать сокращенную запись border ). Второй способ чуть более громоздкий, но он позволяет играться с фоном, заменяя его, например, на фоновый рисунок либо градиент, добиваясь дополнительных интересных эффектов. Однако свойство border тоже позволяет устанавливать фоновые рисунки и градиенты, поэтому разница здесь невелика.
Сделать выбор в пользу второго способа можно, если вам необходимо, чтобы фон, который отображается в «рамке», также был и под фотографией. Зачем это может понадобиться? Например, в случае, когда в галерее присутствуют изображения с прозрачными или полупрозрачными областями, и вам нужно, чтобы из-под этой прозрачной области проглядывал фон.
Стиль при наведении
Пора нам вспомнить о псевдоклассах и псевдоэлементах, которые мы изучали еще в первой части учебника. Сегодня нам понадобится псевдокласс :hover , чтобы определить стиль миниатюры, когда на нее наведен курсор, а также псевдоэлемент :after для добавления определенного контента после каждой миниатюры.
Для улучшения юзабилити (удобства использования) сайта принято добавлять дополнительные эффекты к активным элементам веб-страницы. Например, все мы привыкли к тому, что при наведении курсора на ссылку стандартная стрелка меняется на pointer — курсор в виде руки. Таким образом мы понимаем, что элемент кликабелен и клик по нему приведет к какому-то событию.
Однако одной смены курсора часто бывает недостаточно — хочется видеть более заметные и более очевидные знаки, которые бы давали возможность легко понять, какое действие будет происходить после клика по элементу. Именно этим мы и займемся далее.
На первой миниатюре в макете показано, как она должна выглядеть в состоянии наведения на нее курсора. Фотография становится полупрозрачной, а в центре элемента появляется иконка глаза, намекающая на то, что клик по миниатюре означает просмотр полного изображения.
Запишем стиль для псевдокласса .photo a:hover :
.photo a:hover
.photo a
Теперь, когда вы сохраните таблицу стилей, обновите страницу в браузере и наведете курсор на любую из фотографий, то увидите, что она стала полупрозрачной. За это поведение отвечает свойство opacity , чье значение может варьироваться от 0 (полная прозрачность) до 1 (полная непрозрачность), включая дробные числа, устанавливающие полупрозрачность. Уберите курсор, и фото вернется к своему первоначальному виду (т. е. к значению по умолчанию, а именно opacity: 1 ).
Займемся добавлением иконки глаза. Для этого нам понадобится задействовать псевдоэлемент :after . Добавьте следующие стили в вашу таблицу, после чего мы объясним, зачем нужен каждый из них:
.photo a:after < content: ''; background: transparent url(../img/icons/eye-icon.png) no-repeat center; width: 52px; height: 35px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; visibility: hidden; >
Помимо этого допишите свойство position: relative; к селектору .photo a .
Итак, разберемся с вышенаписанным кодом. Обычно псевдоэлемент :after добавляется к элементу для того, чтобы вывести нужный текст после его содержимого. Этот текст добавляется через свойство content . Веб-разработчики используют возможности :after для вывода дополнительных графических элементов. В этом случае значение свойства content остается пустым, а нужное изображение добавляется с помощью свойства background . Именно это мы и сделали по отношению к псевдоэлементу .photo a:after , добавив иконку глаза как фоновый рисунок.
Но после проделывания этих шагов вы еще не увидите никакого изображения. Чтобы оно показалось, мы добавляем ширину и высоту элемента, а также позиционируем его (позже эта тема будет рассматриваться более детально). Мы установили размеры, идентичные размерам самой иконки (52×35 пикселей) и задали свойство position: absolute .
Иконка уже видна, однако она расположена не по центру миниатюры. Чтобы иметь возможность позиционировать иконку относительно элемента .photo a , мы добавили этому элементу свойство position: relative . Повторимся, что со свойством position мы немного забегаем вперед, поэтому пока что вы можете просто скопировать этот код и наблюдать, что получается.
Следующим шагом будет центрирование иконки по вертикали и горизонтали. Элемент со стилем position: absolute и четко определенными размерами можно легко центрировать, указав для свойств top , bottom , left и right значение 0 , а для свойства margin — значение auto .
Последнее, что осталось разобрать — это свойство visibility: hidden . Оно отвечает за видимость/невидимость элемента. Его значение hidden можно сравнить с плащом-невидимкой — элемент становится невидимым, но при этом находится на странице и занимает место.
Зачем мы скрыли псевдоэлемент с иконкой? Чтобы делать его видимым только при наведении курсора на ссылку-миниатюру. И для этого мы снова обратимся к псевдоклассу :hover . Запишем следующий код:
.photo:hover > a:after
Этот на первый взгляд странный селектор сообщает браузеру, что при наведении курсора на элемент .photo необходимо применить стиль к псевдоэлементу :after тега , являющегося дочерним именно для .photo . Сам стиль visibility: visible означает, что иконка глаза становится видимой.
Обновите страницу и посмотрите, как теперь реагируют элементы на наведение курсора. Так выглядит гораздо лучше, не правда ли? Нам осталось стилизовать подписи к фотографиям, добавить финальные штрихи и реализовать открытие фото во всплывающем окне.
3. Стилизация подписей
В идеале, подпись к фотографии должна выглядеть лаконично и не слишком бросаться в глаза. Поэтому наш стиль для нее будет очень простым:
.photo figcaption
4. Финальные штрихи
Мы еще не стилизовали заголовок над галереей. Давайте сделаем это:
Чтобы не дописывать свойство font-family к каждому элементу, будет лучше задать его для всего тега , после чего стереть эту строку из стиля для .photo figcaption — она там теперь лишняя:
body
А чтобы сам блок галереи не упирался в низ веб-страницы, добавим ему небольшой отступ снизу:
#gallery
Обновим страницу и проверим результат. Но что это? Отступ снизу не появился. И если проверить высоту блока #gallery , мы увидим, что она равна нулю. Как такое может быть, если этот блок не пустой, а внутри него находятся миниатюры? Ответ следующий: свойство float исключает элемент из нормального потока. Поэтому, когда дочерним элементам задано обтекание float, родительский элемент сжимается по высоте, словно игнорируя присутствие float-элементов. Высота родителя становится равной нулю, либо, если внутри находятся дочерние элементы без обтекания, высота родителя приравнивается к высоте этих элементов. Отключить игнорирование float-элементов родителем можно с помощью следующего стиля:
#gallery:after
Это один из нескольких CSS-«хаков», позволяющих решить проблему исчезнувшей высоты контейнера. Немного позже мы еще вернемся к обсуждению этой проблемы и изучим ее более подробно. А пока что сохраните изменения в таблице стилей и обновите веб-страницу. Добавленный нами нижний отступ в 60 пикселей теперь находится там, где и требовалось.
5. Подключение плагина для всплывающих окон
Настало время воспользоваться плагином Lightbox, который обеспечит красивое открытие полноразмерных фотографий во всплывающем окне, без покидания страницы, а также добавит возможность перелистывать фото прямо на месте.
Плагин Lightbox, работающий на базе JavaScript-библиотеки jQuery, используется для наложения изображений поверх текущей страницы. Это удобный инструмент, который работает в любом современном браузере.
В начале урока мы уже сказали, что подключили необходимый скрипт и таблицу стилей к нашему HTML-документу. Вам останется лишь инициализировать его, добавив атрибут data-lightbox=»roadtrip» к каждому тегу , который ссылается на изображение. Этот код говорит плагину, что ссылку нужно открыть во всплывающем окне, а также добавить возможность переключаться между фотографиями, используя боковые стрелки.
Итак, продублируйте атрибут для каждой из девяти ссылок нашей галереи:
Затем сохраните изменения в документе и просмотрите его в браузере. Согласитесь, что такой вариант просмотра фотографий гораздо более удобен и современен! Переключайте фотографии стрелками, не закрывая всплывающее окно. Понаблюдайте за тем, как окно автоматически изменяет свои размеры, подстраиваясь под размеры изображения.
При желании вы можете сделать так, чтобы плагин отображал в открытом окне и подпись к фотографии. Для этого добавьте к ссылке еще один атрибут — data-title=»» , а внутрь его кавычек поместите текст подписи, скопировав из тега :
Повторите эти действия для остальных ссылок и проверьте результат.
Заключение
Похоже, что наша галерея получилась простой, но при этом весьма симпатичной и очень удобной, в том числе и для использования на маленьких экранах. Пройдя этот урок, вы создали полностью работающий инструмент, который можно применять даже в рабочих проектах.
Если по какой-то причине у вас что-то не получилось, вы всегда можете посмотреть и изучить готовый код, который включен в общий архив с файлами. Также вам доступно демо галереи:
Мы надеемся, что данное практическое занятие принесло вам пользу и помогло лучше разобраться в том, как работает CSS. А впереди нас ждет еще один урок — на этот раз направленный на закрепление знаний о фоновых изображениях.
Галерея изображений на сайте
Необходимо сделать галерею изображений на сайте, такую, чтобы картинки разного размера, размещались в 5 колонок, но без row(?), то есть, чтобы нижняя картинка прилипала к верхней. Пытался найти информацию в интернете, но не знаю как правильно составить запрос, по моим запросам показывает только как сделать галереи, в которых нужно листать картинки. Пытался сделать display: grid;, но получается вот это: 
А вот как мне нужно: 
Отслеживать
задан 10 дек 2022 в 15:26
163 5 5 бронзовых знаков
Вбейте в поиск masonry css grid
10 дек 2022 в 15:33
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
index.html
style.css
.content < line-height: 0; /* Убираем высоту строки у всех изображений */ column-count: 5; /* Устанавливаем кол-во колонок */ column-gap: 0; /* Убираем отступы между колонками */ >.content__image < width: 100%; /* Изображение на всю ширину колонки */ height: auto; /* Высота изображения определяется автоматически */ >Постоянно когда задам вопрос, сразу сам нахожу ответ.