SimplePie lagrer en hurtigbufret versjon av Flickr-strømmen din lokalt for å bidra til å fremskynde fremtiden

besøk. Merk: Hvis du ikke gjør dette på Windows, ikke glem å sørge for "cache" -mappen

er skrivbar.

 handle_content_type (); ?> 

Sette inn denne koden helt inn i filen "index.php" gir oss tilgang til SimplePie

bibliotek for å håndtere RSS-feedet for oss. Også den andre og tredje linjen oppretter et nytt feedobjekt

basert på RSS-nettadressen for din Flickr-feed.

Trinn 3

Nå kan vi begynne å kaste HTML-koden vår med utdrag av PHP for å sende ut informasjon fra vår Flickr

mate. Noen av nøkkelfunksjonen SimplePie gir er:

 $ Fôr-> get_title (); // Returnerer tittelen på RSS-feed $ feed-> get_image_url (); // Returnerer bildet for strømmen, i tilfelle Flickr, brukerens avatar $ feed-> get_items (); // Returnerer en matrise av elementene i fôret, i tilfelle Flickr, bildene med beskrivelsene mv. 

Hvert element returnert av get_items () har også sin egen get_title () etc. for å hente den er forskjellig

Så de første funksjonene vi ringer i skriptet vårt, er tittelen og overskriften:

 
 get_title (); ?>
 

Trinn 4

Før vi kan begynne å løpe gjennom bildene i feedet, må vi skrive to korte funksjoner.

Den første lokaliserer bildemerket i beskrivelsen av et bilde i RSS-feed. Du kan

skriv denne funksjonen mellom eksisterende PHP-koder øverst på skriptet.

 funksjon image_from_description ($ data) preg_match_all ('/] *)> / i ', $ data, $ matches); returner $ treff [1] [0];  

Den andre funksjonen lar deg velge størrelsen på bildet som skal hentes fra Flickr, men

justerer filnavnet i en bildetikett. Denne funksjonen bør også plasseres mellom eksisterende PHP

koder øverst på skriptet.

 funksjon select_image ($ img, $ size) $ img = eksplodere ('/', $ img); $ filnavn = array_pop ($ img); // Størrelsene som er oppført her er de som Flickr leverer som standard. Pass array-indeksen i variabelen $ size for å selektere en. // 0 for square, 1 for thumb, 2 for small, etc. $ s = array ('_s.', // square '_t.', // thumb '_m.', // small '.', / / medium '_b.' // stor); $ img [] = preg_replace ('/ (_ (s | t | m | b))? \ ./I', $ s [$ size], $ filnavn); returnere implodere ('/', $ img);  

Trinn 5

Nå kan vi løse gjennom bildene i RSS-feeden, og sende dem ut. Vi vil bruke en for loop til

gå over hvert element i feedet.

 
 get_items () som $ item):?> 
 get_enclosure ()) echo '
'. $ enclosure-> get_title (). '
.' "\ N"; $ img = image_from_description ($ item-> get_description ()); $ thumb_url = select_image ($ img, 0); ekko '.' "\ N"; ?> 
get_date ('J F Y | g: i a'); ? >
 
  
 

For å forklare denne koden, som vi slår gjennom, sender vi ut en ny div som vi kan style senere.

Inne i hver div bruker vi funksjonene vi skrev tidligere for å få en bestemt bildestørrelse (jeg valgte

firkant for enkel styling). Vi sender også tittelen på hvert bilde før du sender ut

bildet selv, og datoen under hvert bilde.

Trinn 6

Nå er det på tide å gi albumet noen stil! Så for det første å gi noen grunnleggende struktur til basen

HTML-struktur, vil jeg sette inn noen skrifter, bredder, marginer etc. Også en liten stil for å sortere justeringen

av Flickr-feeds ikonbilde. Ikke glem å knytte stilarkfilen din i hovedenheten av

din HTML først av alt.

Sett deretter inn disse CSS-reglene i "style.css" -filen din:

 kropp font-familie: Verdana, Arial, Helvetica, sans-serif; bakgrunnsfarge: # 222; bredde: 960px; margin: 0; skriftstørrelse: 0,75em;  .page-wrapper bakgrunnsfarge: # 444; tekstjustering: venstre; bredde: 960px; margin: 0 auto; polstring: 20px; stilling: relativ; topp: 30px; igjen: 30px; overløp: auto;  .page-wrapper h1 font-size: 1.8em;  .page-wrapper h2 font-size: 1.2em; farge: # 222;  .page-wrapper .feedIcon vertical-align: middle; polstring: 0 10px;  

Deretter litt stil som skal brukes på hver av bildedivene:

 .album-wrapper. foto bredde: 200px; bakgrunnsfarge: # 666; tekst-align: center; vertikaljustering: midt; flyte: venstre; polstring: 10px; margin: 10px;  .album-wrapper .photo img border: none;  .album-wrapper .photo small color: #aaa; fontstørrelse: 0.9em;  

Trinn 7

Nå for å legge til litt interaktivitet, tar vi med noen jQuery. Jeg synes det ville vært fint å ha en

svever effekt, og muligheten til å klikke et bilde og se en større versjon. Inkluder jQuery-skriptet

fil, som du kan få den nyeste versjonen av fra

target = "_ blank"> jquery.com

vei.

Trinn 8

Den første delen av jQuery å legge til i "script.js" -filen, er en $ (dokument) .ready () å håndtere

alt du vil ha jQuery å gjøre, etter at dokumentet har lastet inn.

 $ (dokument) .ready (funksjon () $ ('. foto'). fadeTo (0, 0,5);

Dette vil fade hver div med klassen ".photo" til 50% så snart dokumentet er fullt lastet

og klar. Deretter vil vi få bildene til å lyse når musen svinger over dem.

 $ (dokument) .ready (funksjon () $ ('. foto'). fadeTo (0, 0,5); $ ('. foto'). hover (funksjon (e) $ (dette) .stop (). fadeTo ('slow', 1.0);, funksjon (e) $ (dette) .stop (). fadeTo ('slow', 0.5);););

Disse ekstra 5 linjene forteller jQuery å gjøre hvert bilde, på hover, visne til 100%, og når musen

går av igjen, fade tilbake til 50%. (Takk til Mike Schneider og Simon i kommentarene til noen
endres her)

Trinn 9

Det ville være fint å gjøre miniatyrbildene klikkbare, slik at du kan se en større versjon av bildene.

For å gjøre dette bruker vi Thickbox, bygget på jQuery.

Last ned Thickbox, og deretter

inkludere den i hodet til "index.php" -filen, som vist ovenfor.

Når de er inkludert, kan du redigere følgende linjer for å trene nettadressen til et fullstendig bilde, og legge til en

lenke med en klasse av 'thickbox'. Dette aktiverer Thickbox, og det skal bare fungere, jeg har også lagt til

tittel som gir en bildetekst.

 $ full_url = bilde ($ url, 'full'); ekko 'get_title (). '">'." \ n "; 

Fullstendig!

Det er det! Du bør nå ha et skript som viser en Flickr-feed for deg, og lar deg

klikk på dem og se en større versjon. Nyt!

• Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.