Astazi este greu sa concepi un site fara o galerie de imagini si Internetul abunda de oferte sau solutii, unele chiar gratuite, referitoare la aceasta.

Indiferent de genul site-ului, ca este de prezentare a unui portofoliu, ca este de comert electronic sau chiar daca este un site personal, toate ajung sa prezinte si o galeriie de imagini. "O imagine face cat o mie de cuvinte", spune un proverb chinezesc.

Sunt tot felul de scripturi JS care usureaza foarte mult munca programatorului privind prezentarea imaginilor, dar toate au nevoie ca informatie initiala de calea si numele fisierelor imagine ce urmeaza a fi prezentate, eventual si calea si numele imaginilor thumbnail asociate, acestea din urma fiind necesare la cresterea vitezei de incarcare a paginii ce contine galeria.

In practica sunt mai multe solutii care ofera aceste informatii scripturilor JS.

Cea mai utilizata este scrierea acestor informatii "hard", adica scrierea lor in fisierul html, ceea ce presupune editarea fisierului html care produce galeria. Este calea cea mai putin eleganta, cea mai laborioasa si necesita o interventie la fisier ori de cate ori modificam galeria. Dar pe de alta parte este si cel mai des folosita de catre amatori, deoarece nu necesita cunostiinte speciale de programare.

O alta cale ar fi scrierea acestor informatii intr-o baza de date MySQL si citirea lor de aici in momentul in care se construieste galeria. Aceasta cale presupune existenta unui "back end" la site, adica o zona de administrare a galeriei unde pot fi uploadate imaginile si eventual prelucrate. Aceasta este calea profesionala, dar care necesita cunostiinte de programare si de utilizarea librariei grafice a PHP. Un exemplu il aveti aici.

In acest articol propun o a treia cale, aflarea informatiilor necesare prin citirea numelor fisierelor dintr-un director. Aceasta presupune ca in acel director sa existe doar fisierele imagine care trebuie sa apara in galerie. La aceasta solutie am adaugat si posibilitatea folosirii imaginilor thumbnail.

Haideti sa aflam cum se face asta:

Problema

Sa culegem informatiile initiale, cale si nume fisier imagine, necesare obtinerii unei galerii de imagini cu thumbnail-uri, in pagina site-ului.

Solutie

Uploadul imaginilor in directoare dedicate si citirea continutului acestor directoare.

images              -contine celelalte imagini ale site-ului
    img             -contine imaginile galeriei
        thumbs      -contine thumbnail-urile galerie
js                  -contine fisierele JS necesare galeriei (am ales Lightbox)
style               -contine fisierele de stil ale site-ului si ale galeriei

Urcati imaginile galeriei in images/img si thumbnail-urile in images/img/thumbs.

Deoarece am vrut sa evit necesitatea unei zone de administrare, realizarea thumbnail-rilor va revine dumneavoastra. In exemplul dat am ales o rezolutie 280x170 px. La imaginile galeriei rezolutia poate fi oricare, dar este recomandabil ceva de genul 800x600 px pentru a nu depasi ecranul.

Fisierele imagine si fisierele thumb corespunzatoare trebuie sa aiba acelasi nume

Creati fisierul care va citi numele fisierelor imagine si care va afisa galeria si il salvati sub numele galery.php. In acest moment nu acordam atentie stilului.

<?php 
$i=1;
$rand="";
$path='images/img/';                             //directorul in care se urca pozele pentru afisare
$path_1='images/img/thumbs/';             //directorul in care se urca thumbnail-urile
while (($file = readdir($handle))!==false) {
    if ($file !=='.' && $file!=='..' && $file!=='thumbs'){
        $rand=$rand.'
          <a href="'.$path.$file.'" rel="lightbox[galery]"><img src="'.$path_1.$file.'" alt="" title="clic pentru marire" width="280px" height="170px" style="margin-right:5px;margin-bottom:5px;"></a>';        //modificati width si height pentru pozele mici
    $i++;
        if ($i==4){                 //numarul de poze pe rand + 1 (3)
          $rand=$rand."";
          echo$rand;                //afiseaza pagina cu pozele
          $i=1;
          $rand="";
        }
    }}
$rand=$rand."";
echo$rand;
closedir($handle);
?>

In tag-ul HEAD al paginii in care doriti sa apara galeria inserati:

In locul in care doriti sa apara galeria, inserati:

Salvati pagina cu extensia php.

Explicatii

Exemplul poate fi folosit ca atare, dar poate fi imbunatatit la stil.

Multe multumiri...

Internetului ca exista si celor care ne mai spun pe gratis cate ceva, chiar daca i-a costat mult timp sa invete!

Daca articolul v-a fost util, va rugam sa lasati un comentariu.