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ładowy kod źródłowy w serwisie GitHub.
- Utwórz nowy plik o nazwie „index.html”.
- W tym pliku dodaj podstawową strukturę kodu HTML:
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - Utwórz podfolder o nazwie „obrazy”. Wypełnij go kilkoma obrazami i nazwij je od „image1.jpg” do „image10.jpg”.
- W pliku HTML dodaj element div dla galerii obrazów:
<div id="image-gallery">
</div> - 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”:
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - W tym samym folderze co plik HTML dodaj nowy plik o nazwie „styles.css” z następującym kodem CSS. Możesz swobodnie modyfikować CSS, dodając neumorficzne komponenty projektu lub wprowadzając inne poprawki projektu, korzystając z tych porad i sztuczek CSS.
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - Dodaj łącze do pliku CSS w tagu head pliku HTML:
<link rel="stylesheet" type="text/css" href="styles.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”.
- Wewnątrz elementu div galerii obrazów w pliku HTML dodaj kolejny element div, aby wyświetlić miniatury innych obrazów:
<div id="image-thumbs"></div> - W pliku CSS dodaj trochę stylu dla listy miniatur:
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - W tym samym folderze, co pliki HTML i CSS, dodaj nowy plik o nazwie „script.js”.
- Dodaj łącze do pliku JavaScript na dole tagu HTML body:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Wewnątrz pliku JavaScript pobierz element HTML div, który będzie przechowywać listę miniatur:
var imageThumbs = document.getElementById("image-thumbs"); - Dodaj pętlę for, aby przejść przez każdy z 10 obrazów w galerii:
for (var i = 1; i <= 10; i++) {
} - Wewnątrz pętli utwórz nowy element img dla każdego obrazu:
var thumb = document.createElement("img"); - Dodaj wartości atrybutów „src” i „alt”. W tym przypadku atrybut „src” jest ścieżką do pliku obrazu o tym samym indeksie w folderze „images”:
thumb.src = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - W pliku CSS dodaj nową klasę, aby nadać styl miniaturce obrazu. Możesz także dodać inne stylizacje CSS najechania kursorem lub przejściowe dla miniatur, aby Twoja witryna była responsywna i interaktywna.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - Wewnątrz pliku JavaScript dodaj powyższą klasę do nowej miniatury:
thumb.classList.add("thumb"); - Dodaj nową miniaturę do elementu HTML, który zawiera listę miniatur:
imageThumbs.appendChild(thumb);
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.
- U góry pliku JavaScript pobierz element HTML aktualnie wybranego obrazu:
var currentImage = document.getElementById("current-image"); - Wewnątrz pętli for dodaj moduł obsługi zdarzeń, który uruchamia się, gdy użytkownik wybierze dowolną miniaturę u dołu strony:
thumb.addEventListener(
"click", function() {
}
); - W procedurze obsługi zdarzenia zmień atrybut „src” bieżącego obrazu na nowo wybrany obraz. Możesz także zaktualizować atrybut „alt”:
currentImage.src = this.src;
currentImage.alt = this.alt; - Kliknij plik „index.html”, aby otworzyć go w przeglądarce internetowej.
- 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.
Dodaj komentarz