Imaginile deasupra (plus generator)


Dacă avem câteva imagini sau galerii de imagini, şi dorim să le punem pe web, avem de regulă două opţiuni: imaginile mici să conducă la imaginile mari în alte pagini (popup sau nu), sau acestea să se deschidă în aceeaşi pagină folosind DHTML. Această soluţie din urmă este folosită pe CNet.ro în secţiunea de Download pentru a afişa capturile mai mari la programe. Aş putea să spun că era şi în parte mai este la modă, dar cum nu mai este ceva foarte nou pentru unii este o soluţie deja veche. Dacă nu aţi luat-o până acum în calcul vă propun să vedem în continuare două soluţii şi un generator.

img258

Şi pentru a o lua de la început voi pomeni proiectul poate cel mai cunoscut şi care a inspirat numeroase variante: Lightbox JS. Puteţi da clic, dar link-ul l-am dat mai mult de dragul istoriei, pentru că acelaşi autor a scos şi o versiune superioară: Lightbox JS 2. Vizitaţi pagina proiectului (nu plec, rămân aici până când vedeţi ce e de văzut acolo) care se deschide chiar din vârful paginii cu exemple: mai întâi pentru imagini individuale, mai apoi pentru imagini în serie. Adică? Dacă aveţi imagini disparate puteţi folosi acest script pentru ca la click imaginea mare să apară "deasupra" paginii, care între timp este "întunecată". Dacă aveţi o galerie de imagini, un click pe o imagine mică (thumbnail) are acelaşi efect, dar pentru a trece la o altă imagini puteţi folosi fie săgeţile stânga, dreapta, fie da click pe partea stângă ori dreaptă a imaginii mărite. Pentru a închide o imagine mare puteţi fie apăsa pe x, fie pe imaginea cu CLOSE, fie un click oriunde în afara "ferestrei" cu imaginea (deci pe spaţiul "întunecat" al paginii). Simplu de folosit şi… (încă) arată bine! DynamicDrive a preluat aceste scripturi şi le găsiţi documentate aici: Lightbox image viewer şi Lightbox image viewer 2.03.

După cum spuneam, în timp au apărut şi variaţii. Doar două exemple: Lightbox+ şi Litebox (primul din cele două exemple se descurcă mai bine dacă imaginile mari sunt mai mari decât fereastra navigatorului). Sunt şi scripturi care se aseamănă… dar mai de la depărtare cu Lightbox JS. De exemplu Hoverbox Image Gallery afişează imaginile mari la plimbarea cu mouse-ul peste versiunile mici. Interesantă abordare de asemenea. Una dintre implementările care îmi place cel mai mult este cu… jQuery (desigur!) dar nu ştiu sigur dacă merge cu ultima versiune de jQuery. Ceea ce nu înseamnă că sunt probleme de funcţionare (cu versiunea de jQuery valabilă în august) după cum puteţi vedea din multele şi frumoasele exemple de pe pagina ThickBox. Ceea ce evidenţiază această implementare este ieşirea din limita imaginilor: scriptul permite să fie folosit nu doar pentru afişarea de imagini ori galerii de imagini, ci şi pentru pagini web, ba chiar şi pentru pagini cerute prin AJAX! Putere de generalizare (aproape) maximă! Neapărat studiaţi exemplele pentru că sunt doar la câteva clickuri de Dvs. Excelentă şi foarte elegantă soluţie!

img259

La final ajungem la o soluţie non-web. De la Ryan citire mi-am amintit de generatorul de galerii de la Pranas.net. Iniţial se numea Pranas.NET Web Gallery Creator. Acum îi spune LightBox JS Web Gallery Generator. Aţi ghicit, foloseşte Lightbox pentru afişarea imaginilor. Este un program simplist, poate prea simplist pentru cei cu pretenţii mai mari. Dacă doriţi să vedeţi înainte un exemplu, mergeţi aici, iar dacă doriţi să vedeţi cum poate fi integrat într-un sit (design) existent, atunci aici. Practic programului îi indicaţi directorul cu imaginile, directorul unde să pună galeria web generată, ce dimensiuni să aibă imaginile mici şi cele mari, iar opţional puteţi să umblaţi la CSS pentru a modifica culoarea fundalului sau alte detalii. De fapt după generare puteţi oricum interveni chiar şi cu Notepad în paginile HTML, traducând ce a rămas în engleză (ex: Pages sau Next). În doar câteva minute puteţi avea o galerie frumoasă! Programul nu necesită instalare, dar trebuie să aveţi instalat .NET framework, ceea ce pentru utilizatorii de XP nu ar trebui să fie o problemă (fiind de regulă deja instalat).

img260


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

3 comentarii

  1. rast spune:

    Mai demult planuiam sa fac un script/program OpenSource de generare a unei galerii foto.
    Vreau sa fac, mai intai, un program de generare thumbnails.
    Si ca prezentare voi incerca sa reunesc modalitatile de afisare prezentate aici.
    Multumesc mult!

  2. jürgen.toth spune:

    Pe acelasi stil de prezentare a fotografiilor deasupra merge si aplicatia prezentata pe site-ul: http://www.nickstakenburg.com/projects/lightview/


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *