Как создать простую галерею изображений с помощью HTML, CSS и JavaScript

Создание простой галереи изображений с использованием HTML, CSS и JavaScript — отличный способ изучить основы веб-разработки. В галерее изображений вы сможете пролистывать изображения, выбирая миниатюры, чтобы увеличить изображение на веб-странице.

Чтобы создать галерею, вы можете использовать HTML для добавления содержимого веб-страницы и CSS для добавления стиля. Вы можете использовать JavaScript, чтобы сделать галерею интерактивной, когда пользователь нажимает на любую миниатюру.

Как создать пользовательский интерфейс для галереи изображений

Добавьте пользовательский интерфейс для галереи изображений с помощью HTML и CSS. Это включает в себя добавление большого изображения в центр веб-страницы, которое будет меняться в зависимости от выбранной миниатюры. Вы также можете просмотреть полный пример

1. Создайте новый файл с именем «index.html».
2. Внутри этого файла добавьте базовую структуру HTML-кода:

   HTML>
   <HTMLязык="en-США">
   <голова>
   <заголовок>Галереязаголовок>
   голова>
   <тело>
   <дивсорт="вступление">
   <h2>Галереяh2>
   <п>Выберите миниатюру ниже, чтобы просмотреть изображениеп>
   див>
   тело>
   HTML>

3. Создайте подпапку с именем «images». Заполните его несколькими изображениями и назовите их от «image1.jpg» до «image10.jpg».
4. В вашем HTML-файле добавьте div для галереи изображений:

   <дивидентификатор="Галерея">
   див>

5. Внутри блока div галереи изображений добавьте тег изображения, чтобы отобразить увеличенное выбранное изображение. По умолчанию отображать первое изображение в папке «images»:

   <изображениеидентификатор="текущее изображение"источник="изображения/image1.jpg"альтернативный=«Изображение 1»>

6. В той же папке, что и ваш файл HTML, добавьте новый файл с именем «styles.css» со следующим CSS. Не стесняйтесь изменять CSS, чтобы добавить компоненты неоморфного дизайна или внесите другие изменения в дизайн, используя эти советы и приемы CSS.

7. .вступление { 
   выравнивание текста: центр; 
   семейство шрифтов: Ариал;
   }
   h2 { 
   размер шрифта: 36пикс.;
   }
   п { 
   размер шрифта: 14пт;
   }
   #Галерея { 
   ширина: 600пикс.; 
   допуск: 0 авто;
   }
   # текущее изображение { 
   ширина: 100%;
   } 

8. Добавьте ссылку на свой файл CSS в тег заголовка вашего HTML-файла:

   <связьотн.="таблица стилей"тип="текст/CSS"href="стили.css">

Как добавить миниатюры для других изображений в галерее

В настоящее время в галерее изображений отображается только первое изображение. Под выбранным изображением добавьте список миниатюр. Эти миниатюры будут отображать предварительный просмотр всех изображений в папке «images».

1. Внутри блока div галереи изображений в HTML-файле добавьте еще один div для отображения миниатюр других изображений:

   <дивидентификатор="изображение-большие пальцы">див>

2. Внутри файла CSS добавьте стили для списка миниатюр:

   #изображение-thumbs { 
   отображать: сгибаться; 
   выравнивание содержания: центр; 
   верхняя граница: 20пикс.;
   }

3. В той же папке, что и файлы HTML и CSS, добавьте новый файл с именем «script.js».
4. Добавьте ссылку на свой файл JavaScript внизу HTML-тега body:

   <тело>
    Ваш код здесь 
   <сценарийисточник="скрипт.js">сценарий>
   тело>

5. Внутри файла JavaScript получите HTML-элемент div, в котором будет храниться список миниатюр:

   вар изображениеПальцы = документ.getElementById("изображение-большие пальцы");

6. Добавьте цикл for для просмотра каждого из 10 изображений в галерее:

   для (вар я = 1; я <= 10; я++) {
   }

7. Внутри цикла создайте новый элемент img для каждого изображения:

   вар большой палец = документ.создатьЭлемент("изображение");

8. Добавьте значения для атрибутов «src» и «alt». В этом случае атрибут «src» — это путь к файлу изображения с тем же индексом внутри папки «images»:

   большой палец.src = "изображения/изображение" + я + ".jpg";
   большой палец.альт = "Изображение " + я;

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

   .большой палец { 
   ширина: 80пикс.; 
   высота: 80пикс.; 
   объект-подходящий: крышка; 
   край справа: 10пикс.; 
   курсор: указатель;
   }

10. Внутри файла JavaScript добавьте приведенный выше класс к новой миниатюре:

    thumb.classList.add("большой палец");

11. Добавьте новую миниатюру в HTML-элемент, содержащий список миниатюр:

    imageThumbs.appendChild (большой палец);

Как изменить изображение, когда пользователь нажимает на миниатюру

Когда пользователь нажимает на одну из миниатюр, измените увеличенное изображение в центре страницы на выбранное изображение. Вы можете добавить эту функциональность в файл JavaScript.

1. В верхней части файла JavaScript получите HTML-элемент текущего выбранного изображения:

   вар текущее изображение = документ.getElementById("текущее изображение");

2. Внутри цикла for добавить обработчик событий который срабатывает, когда пользователь выбирает любую из миниатюр внизу страницы:

   thumb.addEventListener(
   "щелкнуть", функция() {
    }
   );

3. Внутри обработчика событий измените атрибут «src» текущего изображения на вновь выбранное изображение. Вы также можете обновить атрибут «alt»:

   текущийИзображение.src = этот.иск;
   текущее изображение.alt = этот.alt;

4. Щелкните файл index.html, чтобы открыть его в веб-браузере.
5. Выберите любую из миниатюр, чтобы просмотреть изображение.

Продолжайте расширять свои знания JavaScript

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