Izrada galerije slika omogućuje vam da na svojoj web stranici prikažete više fotografija na organiziran način. Evo kako to možete učiniti:
HTML i CSS za osnovnu galeriju
HTML struktura:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="gallery">
<img src="slika1.jpg" alt="Slika 1">
<img src="slika2.jpg" alt="Slika 2">
<img src="slika3.jpg" alt="Slika 3">
<!-- Dodajte više slika prema potrebi -->
</div>
</body>
</html>
CSS (style.css):
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tri stupca */
gap: 10px; /* Razmak između slika */
}
.gallery img {
max-width: 100%;
height: auto;
}
Korištenje Lightbox-a za bolje prikazivanje slika
Za bolje korisničko iskustvo, možete koristiti Lightbox biblioteku koja omogućava prikaz veće verzije slike kada korisnik klikne na nju.
Uključivanje Lightbox biblioteke:
Uključite Lightbox biblioteku poput Lightbox2 ili Fancybox u svoj projekt.
Prilagodba HTML i CSS-a za Lightbox:
Dodajte klasu “lightbox” svakoj slici i postavite data-lightbox atribut na istu vrijednost kako biste grupirali slike u galeriju.
<div class="gallery">
<a href="slika1.jpg" data-lightbox="galerija" data-title="Slika 1">
<img src="slika1.jpg" alt="Slika 1">
</a>
<a href="slika2.jpg" data-lightbox="galerija" data-title="Slika 2">
<img src="slika2.jpg" alt="Slika 2">
</a>
<a href="slika3.jpg" data-lightbox="galerija" data-title="Slika 3">
<img src="slika3.jpg" alt="Slika 3">
</a>
</div>
Dodatne mogućnosti
Dodatne funkcionalnosti možete implementirati koristeći JavaScript. Na primjer, automatsko prelazak slike u galeriji, dodavanje naslova, opisa ili filtera za različite kategorije slika.
Izrada galerije slika može se prilagoditi prema vašim potrebama i stilu web stranice. S dodatnim kreativnim dodacima možete stvoriti atraktivnu i interaktivnu galeriju koja će privući pažnju posjetitelja.