SimplePie stochează inteligent o versiune în cache a feedului dvs. Flickr la nivel local pentru a ajuta la accelerarea viitorului

vizite. Notă: Dacă nu faceți acest lucru pe Windows, nu uitați să vă asigurați că dosarul "cache"

este scris.

 handle_content_type (); ?> 

Introducerea acestui cod în partea de sus a fișierului "index.php" ne oferă acces la SimplePie

bibliotecă pentru a gestiona fluxul RSS pentru noi. De asemenea, a doua și a treia linie creează un nou obiect de alimentare

bazat pe adresa URL RSS pentru feedul dvs. Flickr.

Pasul 3

Acum putem începe să ne smulgem HTML-ul cu fragmente din PHP pentru a extrage informații de la Flickr

a hrani. Unele dintre funcțiile cheie pe care SimplePie le oferă sunt:

 $ Feed> get_title (); // Returnează titlul feed-ului RSS feed-> get_image_url (); // Returnează imaginea feedului, în cazul Flickr, avatarul utilizatorului $ feed-> get_items (); // Returnează o serie de elemente din feed, în cazul Flickr, fotografiile cu descrierile lor etc.. 

Fiecare element returnat de get_items () are, de asemenea, propriul get_title () etc. pentru a-și recupera diversitatea

Astfel, primele funcții pe care le vom numi în scenariul nostru vor fi titlul și titlul:

 
 get_title (); ?>
 

Pasul 4

Înainte de a începe să introducem fotografiile în feed, trebuie să scriem două funcții scurte.

Primul localizează eticheta imaginii în descrierea unei fotografii din fluxul RSS. Poti

scrieți această funcție între etichetele PHP existente în partea de sus a scriptului.

 funcția image_from_description ($ data) preg_match_all ('/] *)> / i ', date $, meciuri $); returnează meciurile $ [1] [0];  

A doua funcție vă permite să selectați dimensiunea imaginii pentru a fi preluată de pe Flickr, dar

ajustarea numelui fișierului într-o etichetă de imagine. Această funcție ar trebui plasată, de asemenea, între PHP existent

în partea de sus a scriptului.

 funcția select_image ($ img, dimensiunea $) $ img = explode ('/', $ img); $ fișier = array_pop ($ img); // Dimensiunile listate aici sunt cele pe care Flickr le oferă în mod implicit. Treceți indexul matricei în variabila de dimensiune $ pentru a selecta unul. // 0 pentru pătrat, 1 pentru degetul mare, 2 pentru mic, etc. $ s = array ('_s.', // square '_t.', // thumb '_m.', // small '.' / mediu '_b' / / mare); $ img [] = preg_replace ('/ (_ (s | t | m | b))? \ ./ i', $ s [$ size]; întoarcere implode ('/', $ img);  

Pasul 5

Acum, putem trece prin fotografiile din fluxul RSS și le putem scoate. Vom folosi o buclă pentru

treceți peste fiecare articol din feed.

 
 get_items () ca element $):?> 
 get_enclosure ()) echo '
". $ carcasă-> get_title (). '
.“ "\ N"; $ img = imagine_de_descripție ($ item-> get_description ()); $ thumb_url = select_image ($ img, 0); echo ".“ "\ N"; ?> 
get_date ('j F Y | g: i a'); ? >
 
  
 

Pentru a explica acest bit de cod, pe măsură ce ne bifăm, vom scoate un nou div pe care îl putem modela mai târziu.

În interiorul fiecărei div, folosim funcțiile pe care le-am scris anterior pentru a obține o anumită dimensiune a imaginii (am ales

pătrat pentru ușurință de stil). De asemenea, afișăm titlul fiecărei fotografii înainte de a ieși

fotografia în sine și data de sub fiecare fotografie.

Pasul 6

Acum este momentul sa dati albumului un stil! Deci, în primul rând, să dăm o structură de bază bazei

HTML structure, voi stabili unele fonturi, lățimi, margini etc. De asemenea, un pic de stil pentru a sorta alinierea

din imaginea pictogramei feed-ului Flickr. Nu uitați să vă conectați fișierul foaie de stil în secțiunea cap

HTML-ul dvs. în primul rând.

Apoi introduceți aceste reguli CSS în fișierul dvs. "style.css":

 corp font-familie: Verdana, Arial, Helvetica, sans-serif; fundal-culoare: # 222; lățime: 960px; marja: 0; font-size: 0.75;  .page-wrapper background-color: # 444; text-aliniere: stânga; lățime: 960px; marja: 0 auto; padding: 20px; poziție: relativă; top: 30px; stânga: 30px; overflow: auto;  .page-wrapper h1 font-size: 1.8;  .page-wrapper h2 font-size: 1.2; culoare: # 222;  .page-wrapper .feedIcon vertical-aliniere: mijloc; umplutură: 0 10px;  

Apoi, un anumit stil va fi aplicat fiecărei fotografie:

 .album-wrapper .photo lățime: 200px; fundal-culoare: # 666; text-align: centru; vertical-aliniere: mijloc; plutește la stânga; padding: 10px; margine: 10 pixeli;  .album-wrapper .photo img frontieră: nici unul;  .album-wrapper .photo mică culoare: #aaa; font-size: 0.9cm;  

Pasul 7

Acum, pentru a adăuga un pic de interactivitate, vom aduce niște jQuery. Cred că ar fi frumos să ai a

efectul de hovering și capacitatea de a face clic pe o imagine și de a vedea o versiune mai mare. Includeți scriptul jQuery

fișier, de la care puteți obține cea mai recentă versiune de la

target = "_ blank"> jquery.com

cale.

Pasul 8

Primul fragment de jQuery care se adaugă în fișierul "script.js" este un $ (document) .ready () care se ocupă

tot ce doriți ca jQuery să facă după ce documentul a fost încărcat.

 $ (document) .ready (funcția () $ ('.photo') fadeTo (0, 0.5);

Acest lucru va stinge fiecare div cu clasa ".photo" la 50% imediat ce documentul este complet încărcat

și gata. Apoi vom face ca imaginile să lumineze atunci când mouse-ul se deplasează peste ele.

 $ ((.)) () () ($) ($) (')'. fadeTo ('slow', 1.0);, funcția (e) $ (this) .stop () fadeTo ('lent', 0.5);

Aceste extra 5 linii spun jQuery pentru a face fiecare fotografie, pe hover, se estompeze la 100%, și atunci când mouse-ul

se stinge din nou, se estompează la 50%. (Mulțumită lui Mike Schneider și lui Simon în comentariile pentru unii
schimbări aici)

Pasul 9

Ar fi frumos să faceți miniaturile clickabile, pentru a putea vizualiza o versiune mai mare a imaginilor.

Pentru a face acest lucru, vom folosi Thickbox, construit pe jQuery.

Descărcați Thickbox și apoi

includeți-l în capul fișierului "index.php", așa cum se arată mai sus.

Odată ce acestea sunt incluse, editați următoarele linii pentru a elabora adresa URL într-o imagine completă și adăugați-o

legătura cu o clasă de "grosime". Acest lucru activează Thickbox, și ar trebui să funcționeze, de asemenea, am adăugat

titlu care oferă o subtitrare.