Jak stworzyć prostą galerię obrazów przy użyciu HTML, CSS i JavaScript

Tworzenie prostej galerii obrazów przy użyciu HTML, CSS i JavaScript to świetny sposób na poznanie podstaw tworzenia stron internetowych. W galerii obrazów będziesz mógł przeglądać obrazy, wybierając miniatury, aby powiększyć obraz na stronie internetowej.

Aby utworzyć galerię, możesz użyć HTML, aby dodać zawartość strony internetowej i CSS, aby dodać stylizację. Możesz użyć JavaScript, aby galeria była interaktywna, gdy użytkownik kliknie dowolną miniaturę.

Jak utworzyć interfejs użytkownika dla galerii obrazów

Dodaj interfejs użytkownika do galerii obrazów za pomocą HTML i CSS. Obejmuje to dodanie dużego obrazu na środku strony internetowej, który będzie się zmieniał w zależności od wybranej miniatury. Możesz także wyświetlić pełny przykład

1. Utwórz nowy plik o nazwie „index.html”.
2. W tym pliku dodaj podstawową strukturę kodu HTML:

   HTML>
   <HTMLlang=„en-US”>
   <głowa>
   <tytuł>Galeria obrazówtytuł>
   głowa>
   <ciało>
   <dzklasa=„wprowadzenie”>
   <h2>Galeria obrazówh2>
   <P>Wybierz miniaturę poniżej, aby wyświetlić obrazP>
   dz>
   ciało>
   HTML>

3. Utwórz podfolder o nazwie „obrazy”. Wypełnij go kilkoma obrazami i nadaj im nazwy od „image1.jpg” do „image10.jpg”.
4. W pliku HTML dodaj element div dla galerii obrazów:

   <dzID="Galeria obrazów">
   dz>

5. Wewnątrz elementu div galerii obrazów dodaj znacznik obrazu, aby wyświetlić wybrany obraz w powiększeniu. Domyślnie wyświetl pierwszy obraz w folderze „images”:

   <imgID="aktualne zdjęcie"źródło=„obrazy/obraz1.jpg”alt=„Obraz 1”>

6. W tym samym folderze co plik HTML dodaj nowy plik o nazwie „styles.css” z następującym kodem CSS. Możesz zmodyfikować CSS, aby dodać neumorficzne elementy projektu lub wprowadź inne poprawki projektowe za pomocą te wskazówki i sztuczki CSS.

7. .wprowadzenie { 
   wyrównanie tekstu: Centrum; 
   rodzina czcionek: Arial;
   }
   h2 { 
   rozmiar czcionki: 36piks;
   }
   P { 
   rozmiar czcionki: 14pkt;
   }
   #Galeria obrazów { 
   szerokość: 600piks; 
   margines: 0 automatyczny;
   }
   #aktualne zdjęcie { 
   szerokość: 100%;
   } 

8. Dodaj łącze do pliku CSS w tagu head pliku HTML:

   <połączyćrel=„arkusz stylów”typ="tekst/css"href="style.css">

Jak dodawać miniatury do innych obrazów w galerii

Obecnie w galerii obrazów wyświetlany jest tylko pierwszy obraz. Pod wybranym obrazem dodaj listę miniatur. Te miniatury będą wyświetlać podgląd wszystkich obrazów w folderze „images”.

1. Wewnątrz elementu div galerii obrazów w pliku HTML dodaj kolejny element div, aby wyświetlić miniatury innych obrazów:

   <dzID=„obraz-kciuki”>dz>

2. W pliku CSS dodaj trochę stylu dla listy miniatur:

   #obraz-kciuki { 
   wyświetlacz: przewód; 
   uzasadnij treść: Centrum; 
   górny margines: 20piks;
   }

3. W tym samym folderze, co pliki HTML i CSS, dodaj nowy plik o nazwie „script.js”.
4. Dodaj łącze do pliku JavaScript na dole tagu HTML body:

   <ciało>
    Twój kod tutaj 
   <scenariuszźródło=„skrypt.js”>scenariusz>
   ciało>

5. Wewnątrz pliku JavaScript pobierz element HTML div, który będzie przechowywać listę miniatur:

   rozm imageThumbs = dokument.getElementById(„obraz-kciuki”);

6. Dodaj pętlę for, aby przejść przez każdy z 10 obrazów w galerii:

   Do (rozm ja = 1; ja <= 10; i++) {
   }

7. Wewnątrz pętli utwórz nowy element img dla każdego obrazu:

   rozm kciuk = dokument.utwórzElement("img");

8. Dodaj wartości atrybutów „src” i „alt”. W tym przypadku atrybut „src” to ścieżka do pliku obrazu o tym samym indeksie w folderze „images”:

   kciuk.src = „obrazy/obraz” + ja + ".jpg";
   kciuk.alt = "Obraz " + ja;

9. W pliku CSS dodaj nową klasę, aby nadać styl miniaturce obrazu. Możesz także dodać inne style CSS najechania kursorem lub przejściowe dla miniatur spraw, aby Twoja strona była responsywna i interaktywna.

   .kciuk { 
   szerokość: 80piks; 
   wysokość: 80piks; 
   dopasowanie do obiektu: okładka; 
   prawy margines: 10piks; 
   kursor: wskaźnik;
   }

10. Wewnątrz pliku JavaScript dodaj powyższą klasę do nowej miniatury:

    thumb.classList.add("kciuk");

11. Dodaj nową miniaturę do elementu HTML, który zawiera listę miniatur:

    imageThumbs.appendDziecko (kciuk);

Jak zmienić obraz, gdy użytkownik kliknie miniaturę

Gdy użytkownik kliknie na jedną z miniatur, zmień powiększony obraz na środku strony na wybrany obraz. Możesz dodać tę funkcjonalność do pliku JavaScript.

1. U góry pliku JavaScript pobierz element HTML aktualnie wybranego obrazu:

   rozm bieżący obraz = dokument.getElementById("aktualne zdjęcie");

2. Wewnątrz pętli for, dodać obsługę zdarzeń uruchamia się, gdy użytkownik wybierze dowolną miniaturę u dołu strony:

   thumb.addEventListener(
   "Kliknij", funkcjonować() {
    }
   );

3. W procedurze obsługi zdarzeń zmień atrybut „src” bieżącego obrazu na nowo wybrany obraz. Możesz także zaktualizować atrybut „alt”:

   bieżący obraz. źródło = Ten.src;
   bieżący obraz.alt = Ten.alt;

4. Kliknij plik „index.html”, aby otworzyć go w przeglądarce internetowej.
5. Wybierz dowolną miniaturę, aby wyświetlić obraz.

Kontynuuj poszerzanie swojej wiedzy o języku JavaScript

Niezależnie od Twojego doświadczenia ważne jest, aby nadal tworzyć projekty, aby poszerzać swoją wiedzę. Kontynuuj odkrywanie innych projektów, takich jak budowanie gry w szachy, kalkulatora lub listy rzeczy do zrobienia.