Crearea unei galerii de imagini cu CSS

O galerie de imagini este o cerinta destul de uzuala pentru o pagina web o serie de imagini thumbnail care fac legatura cu imagini de dimensiuni mai mari. In acest tutorial este prezentata o tehnica de afisare a acestor imagini folosind CSS.

Creeaza lista de imagini

Pentru o galerie de imagini, este esentiala o lista de imagini, pentru care, in HTML, ar fi logic sa folosesti o lista neordonata. Pentru fiecare element din lista, imaginea thumbnail are o eticheta si un link catre imaginea mare. Pentru incepatori sa folosim:

<ul> <li> <a href="big-image"> <img src="thumbnail-image" alt="Eticheta" /> </a></li> ... </ul>

Aranjarea imaginilor in linii si coloane

Pentru a aranja imaginile thumbnail in randuri trebuie sa folosesti urmatorul cod CSS:

li { display: inline; float: left; }

Am fi putut sa folosim si tabele, dar cu CSS numarul coloanelor variaza in functie de latimea disponibila. Avand in vedere ca imaginile thumbnail pot fi de dimensiuni diferite, poti adauga valori pentru latime si inaltime astfel incat sa obtii o aranjare uniforma.

li { display: inline; float: left; width: 101px; height: 101px; }

Adaugarea unei imagini de fundal

Ca sa faci lucrurile si mai dragute, poti adauga o imagine de fundal in < li >.

li { display: inline; float: left; width: 101px; height: 101px; margin: 4px; background: transparent url(frame.gif) no-repeat top left; }

Pozitionarea imaginilor thumbnail in centru

Pentru a centra thumbnail-urile, ele pot fi transformate in imagini de fundal pentru tag-ul <a>. HTML:

<li> <a href="" style="background-image: url(thumbnail-image)" /></a> </li>

CSS:

li a { display: block; width: 101px; height: 101px; background-position: center; background-repeat: no-repeat; text-decoration: none; }

Afisarea etichetelor
Mutarea unei imagini thumbnail intr-una de fundal duce la pierderea etichetei imaginii din HTML. Pentru a o afisa, trebuie sa o incluzi intr-un < span > din tagul < a >. HTML:

<li> < a href="" style="background-image: url(thumbnail-image)" /> <span>Eticheta</span> </a></li>

CSS:

li { height: 115px; } li a span { font-size: 9px; position: relative; top: 103px; color: #666; text-transform: uppercase; display: block; text-align: center; } li a:hover span { color: red; }
Iata un exemplu functional de galerie de imagini. Ideal ar fi ca imaginile sa fie definite ca taguri < img >. Ca alternativa, a fost creata si o alta metoda bazata pe Javascript si CSS.