Jak vytvořit galerii pomocí HTML, CSS a JavaScriptu

HTML, CSS a JavaScript jsou hlavními nástroji pro vytváření interaktivních a krásných webových stránek. Pokud chcete na svůj web přidat galerii obrázků, budete potřebovat znalost těchto tří technologií. Vytvoření galerie pomocí HTML, CSS a JavaScriptu může být docela jednoduché, pokud znáte základy každého z těchto programovacích jazyků.

Nejprve musíte vytvořit HTML značení pro vaši galerii. K tomu můžete použít značku, která bude obsahovat obrázky a ovládací prvky. Každý obrázek by měl být umístěn do samostatné značky . Kromě toho můžete použít jiné značky HTML k vytvoření ovládacích prvků, jako jsou šipky pro otáčení obrázků nebo tečky pro zobrazení aktuálního obrázku.

Poté můžete použít CSS k vytvoření galerie. Můžete nastavit rozměry a polohu obrázků, nastavit barvu na pozadí, přidat rámečky a použít jiné styly, aby byla vaše galerie atraktivnější. Pomocí CSS selektorů vyberte položky galerie a aplikujte na ně styly. Nezapomeňte také přidat animace a přechody, aby vaše galerie vypadala plynuleji a profesionálněji.

Nakonec budete potřebovat JavaScript k přidání interaktivity do vaší galerie. Kód můžete napsat tak, aby se po kliknutí na šipky obrázek přepnul na další nebo předchozí. Můžete také přidat kód, aby se po kliknutí na tečky zobrazil příslušný obrázek. K tomu můžete použít události a metody JavaScriptu k přístupu k položkám galerie a změně jejich stavu.

Vytvoření galerie pomocí HTML, CSS a JavaScriptu může být zajímavý a zábavný projekt i pro začínající vývojáře. Mohou se naučit základy každého programovacího jazyka a naučit se je používat v reálných projektech. Překvapte své návštěvníky krásnou a funkční galerií na vašem webu pomocí těchto tří výkonných nástrojů.

Krok 1: vytvoření rozvržení galerie

Než začnete kódovat galerii, je důležité vytvořit rozvržení, které určí strukturu a vzhled naší galerie.

Vytvoříme kontejner pro galerii pomocí značky . Kontejner bude obsahovat všechny prvky galerie.

Dále přidáme název galerie, který uživatelům umožní pochopit, co vidí. Pro titulek použijeme značku .

Po záhlaví přidáme blok s obrázky. Zde použijeme značku k vytvoření kontejneru pro obrázky galerie. Uvnitř kontejneru bude každý obrázek označen .

Přidáme také tlačítka pro navigaci mezi obrázky galerie. U tlačítek použijeme značku .

Nakonec bude naše rozložení galerie vypadat následovně:

Моя галерея
 Предыдущее изображениеСледующее изображение

To je jen příklad rozvržení galerie. Vždy máte k dispozici jej upravit podle svých potřeb a preferencí.

Krok 2: Připojení CSS stylů

Chcete-li vytvořit stylovou a atraktivní galerii, musíte připojit soubor CSS, který určí vzhled a umístění prvků.

Do HTML souboru přidejte následující kód:

Tento kód říká prohlížeči, aby stáhl a použil CSS styly, které jsou definovány v samostatném souboru s názvem "styles.css".

V CSS souboru budete moci nastavit požadované styly pro galerii, jako je barva pozadí, písmo, velikosti bloků a další. Pomocí selektorů nezapomeňte propojit pravidla stylingu s příslušnými prvky HTML.

Příklad použití CSS stylů:

p .gallery .gallery img

V tomto příkladu budou mít všechny odstavce černou barvu textu, velikost písma 16 pixelů a spodní odsazení 10 pixelů. Třída "gallery" definuje styly kontejneru galerie, včetně barvy pozadí, odsazení a mřížky obrázků. Styly obrázků v galerii jsou definovány prostřednictvím selektoru "gallery img", takže se protáhnou po celé šířce bloku a budou mít zaoblené rohy.

Po připojení CSS stylů, galerie bude vypadat strukturované a atraktivní.

Pokračujte v dalším kroku a zjistěte, jak připojit JavaScript Soubor pro přidání interaktivity do galerie.

Krok 3: Přidání JavaScriptu k vytvoření interaktivity

Nyní přidáme JavaScript, aby byla naše galerie interaktivnější. V této části napíšeme kód, který uživateli umožní přepínat obrázky v galerii.

Nejprve vytvoříme proměnné pro ukládání odkazů na prvky webové stránky, které upravíme. Vytvoříme také proměnnou pro sledování aktuálního indexu obrazu.

// Получаем ссылки на элементы веб-страницыconst prevButton = document.querySelector('.prev-button');const nextButton = document.querySelector('.next-button');const images = document.querySelectorAll('.gallery-image');// Создаем переменную для отслеживания текущего индекса изображенияlet currentIndex = 0;

Poté napíšeme obslužné rutiny událostí pro tlačítka "Předchozí"a " další". Když uživatel klikne na tlačítko" Předchozí", přepneme na předchozí obrázek v galerii. Když uživatel klikne na tlačítko "Další", přepneme na následující obrázek.

// Обработчик события для кнопки "Предыдущее"prevButton.addEventListener('click', () => else // Устанавливаем активный класс на текущем изображенииimages.forEach((image, index) => else >);>);// Обработчик события для кнопки "Следующее"nextButton.addEventListener('click', () => else // Устанавливаем активный класс на текущем изображенииimages.forEach((image, index) => else >);>);

Nyní, když uživatel klikne na tlačítko Předchozí nebo další, přepneme aktuální obrázek a nastavíme aktivní třídu na aktuálním obrázku. To nám umožňuje vizuálně zobrazit aktuální obrázek v galerii.

Nyní je naše galerie připravena k použití a uživatel může přepnout obrázky kliknutím na tlačítka Předchozí a další. Přidali jsme interaktivitu pomocí JavaScriptu, díky čemuž je naše galerie uživatelsky přívětivější a atraktivnější.