Trei soluţii pentru afişarea de albume foto


Sunt sute, mii de soluţii, recunosc. Cu unele deja aţi putut face cunoştinţă aici, pe CNet.ro. Astăzi mă opresc pe scurt la trei soluţii interesante. Primele două sunt via AjaxRain unde găsiţi acum aproape 50 de implementări diferite. Mergeţi la norul de taguri al sitului şi alegeţi acolo termenul gallery. Cele mai recente două soluţii sunt Photo Morpher şi jQuery plugin: Photo Slider. Am aruncat o privire peste ele şi sunt interesante. Prima a fost actualizată ultima oară anul trecut, aşa că înainte de a o folosi veţi dori poate să o verificaţi în navigatoarele moderne actuale.

Photo Morpher face un "morfism" dar nu din acela spectaculos: nu, nu realizează treceri hollywood-iene între imagini, ci este mai degrabă un morfism al dimensiunilor imaginilor. Vedeţi linkul tocmai indicat care are o demonstraţie. Efectul este mai vizibil când cele două imagini între care se face tranziţia sunt de dimensiuni diferite, mai ales când una este mai înaltă decât lată, iar cealaltă mai lată decât înaltă. Dacă veţi dori să folosiţi acest efect pentru o galerie trebuie să deschideţi sursa paginii unde aveţi indicaţiile de folosire. În principiu trebuie inclus un fişier CSS şi unul JS şi apoi definite div-urile cu controalele, div-ul unde apar fotografiile, şi evident lista lor. Nu este greu, doar trebuie să fiţi atenţi la indicaţii. De asemenea fiţi atenţi şi la cerinţele autorului: sau donaţi ceva (mă îndoiesc) sau păstraţi undeva un link spre situl lui.

A doua soluţie se foloseşte de jQuery, minunatul framework JavaScript despre care am scris mai multe materiale. Photo Slider permite afişarea… dar mai bine vedeţi un exemplu aici (un album de nuntă!). Dacă vă place puteţi trece mai departe. Primul link vă oferă informaţii detaliate despre cum să folosiţi scriptul (nu, nu trebuie privit în sursă ci autorul a fost suficient de elegant să dea explicaţii clare, în pagină). Aveţi din nou de introdus nişte fişiere: un CSS, evident un JS de la jQuery, şi un JS pentru Photo Slider. Aveţi două variante de a indica fotografiile. Dacă numele fotografiilor şi versiunilor mici nu este standardizat va trebui să le indicaţi manual. Dacă respectaţi standardul pluginului (adică aveţi fotografia 0.jpg şi versiunea mică t_0.jpg) atunci puteţi folosi importBucketFromIds. Mai sunt apoi câteva opţiuni precum dacă slideshow-ul să pornească la încărcarea paginii sau nu, dacă să se facă preîncărcarea imaginilor la încărcarea paginii…

img213

În fine, ultima soluţie pe care doresc să o prezint acum foloseşte Google AJAX Feed API. Am mai scris despre el în aprilie a.c., iar de atunci multe s-au mai întâmplat şi ar fi bine să mai revenim asupra subiectului. Ca să o luăm treptat, în mai a fost lansat Google AJAX Feed API Slide Show Control, îmbunătăţit considerabil în luna iunie, şi tot în aceeaşi lună pus la dispoziţie ca Google Gadget. OK. Deci ce permite Google AJAX Feed API Slide Show Control? Numele nu este întâmplător: oferă webmasterilor posibilitatea să includă în propriile pagini slide-show-uri de imagini care folosesc AJAX (nu Flash, nu DHTML, ci AJAX). Partea interesantă este sursa pe care o foloseşte acest script: feed-uri de imagini (yep, astăzi cam orice se învârte în jurul feed-urilor). În acest moment scriptul se poate alimenta de la feed-uri oferite de Picasa Photo Albums, Flickr sau PhotoBucket, iar general de la orice feed de imagini care respectă specificaţiile de la Yahoo pentru Media RSS. Un exemplu încropit în viteză găsiţi aici. Puteţi vedea pagina sursă, dar documentaţia completă o găsiţi aici. Nu vă miraţi dacă, copiind codul de la pagina noastră de test, nu va merge la Dvs. Vedeţi acolo folosit o cheie API care depinde de sit: dacă doriţi să meargă pe situl Dvs trebuie să vă generaţi (gratuit şi în doar câteva secunde) o astfel de cheie API, de aici. Exemplul oferit este banal şi nu fructifică toată puterea acestui script. Dar studiind documentaţia veţi putea descoperi şi facilităţile avansate. Succes!


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

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