Как да създадете проста галерия с изображения с помощта на HTML, CSS и JavaScript

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

За да създадете галерията, можете да използвате HTML, за да добавите съдържанието на уеб страницата, и CSS, за да добавите стила. Можете да използвате JavaScript, за да направите галерията интерактивна, когато потребителят кликне върху някоя от миниатюрите.

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

Добавете потребителския интерфейс за галерията с изображения с помощта на HTML и CSS. Това включва добавяне на голямо изображение в центъра на уеб страницата, което ще се променя в зависимост от избраната миниатюра. Можете също да видите пълния пример

1. Създайте нов файл, наречен "index.html".
2. В този файл добавете основната структура на HTML кода:

   html>
   <htmlезик="en-US">
   <глава>
   <заглавие>Галерия с изображениязаглавие>
   глава>
   <тяло>
   <дивклас="въведение">
   <h2>Галерия с изображенияh2>
   <стр>Изберете миниатюра по-долу, за да видите изображениетостр>
   див>
   тяло>
   html>

3. Създайте подпапка, наречена "images". Попълнете го с няколко изображения и ги наименувайте от "image1.jpg" до "image10.jpg".
4. Във вашия HTML файл добавете div за галерията с изображения:

   <дивдокумент за самоличност="галерия с изображения">
   див>

5. Вътре в div галерия с изображения добавете етикет за изображение, за да покажете увеличеното избрано изображение. По подразбиране се показва първото изображение в папката "images":

   <imgдокумент за самоличност="текущо изображение"src="images/image1.jpg"алт="Изображение 1">

6. В същата папка като вашия HTML файл добавете нов файл, наречен "styles.css" със следния CSS. Чувствайте се свободни да промените CSS, за да добавите компоненти на неуморфен дизайн или направете други промени в дизайна, като използвате тези CSS съвети и трикове.

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

8. Добавете връзка към вашия CSS файл в заглавния таг на вашия HTML файл:

   <връзкаотн="стилов лист"Тип="текст/css"href="styles.css">

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

В момента галерията с изображения показва само първото изображение. Под избраното изображение добавете списък с миниатюри. Тези миниатюри ще показват визуализация на всички изображения в папката „images“.

1. Вътре в div галерията с изображения в HTML файла добавете друг div за показване на миниатюри за другите изображения:

   <дивдокумент за самоличност="изображение-палци">див>

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

   #изображение-палци { 
   дисплей: flex; 
   justify-content: център; 
   margin-top: 20px;
   }

3. В същата папка като вашите HTML и CSS файлове добавете нов файл, наречен „script.js“.
4. Добавете връзка към вашия JavaScript файл в долната част на HTML body тага:

   <тяло>
    Вашият код тук 
   <сценарийsrc="script.js">сценарий>
   тяло>

5. Вътре в JavaScript файла вземете HTML елемента на div, който ще съхранява списъка с миниатюри:

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

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

   за (вар аз = 1; аз <= 10; i++) {
   }

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

   вар палец = документ.createElement("img");

8. Добавете стойности за атрибутите "src" и "alt". В този случай атрибутът "src" е пътят на файла до изображението със същия индекс в папката "images":

   thumb.src = "изображения/изображение" + аз + ".jpg";
   thumb.alt = "Изображение " + аз;

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

   .палец { 
   ширина: 80px; 
   височина: 80px; 
   обектно прилягане: Покрийте; 
   margin-right: 10px; 
   курсор: показалец;
   }

10. Вътре в JavaScript файла добавете горния клас към новата миниатюра:

    thumb.classList.add("палец");

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

    imageThumbs.appendChild (палец);

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

Когато потребителят щракне върху една от миниатюрите, променете увеличеното изображение в центъра на страницата на избраното изображение. Можете да добавите тази функционалност в JavaScript файла.

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

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

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

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

3. Вътре в манипулатора на събития променете атрибута "src" на текущото изображение на новоизбраното изображение. Можете също да актуализирате атрибута "alt":

   currentImage.src = това.src;
   currentImage.alt = това.alt;

4. Кликнете върху файла "index.html", за да го отворите в уеб браузър.
5. Изберете някоя от миниатюрите, за да видите изображението.

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

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