Share
Ho voluto scrivere un tutorial per un po 'di tempo e le API sono sempre state di particolare interesse per me. Così, con la recente incursione nella fotografia di mia moglie, ho deciso che un tutorial su Flickr sarebbe stato il primo tassista fuori dal rango! Anche l'utilizzo di RSS, Flickr e jQuery è stato molto divertente.
Ok, quindi stiamo andando a toccare un certo numero di tecnologie per questo tutorial. Useremo
un feed RSS da Flickr, un po 'di PHP e alcuni jQuery per rendere le cose belle e interattive! Bene
usa SimplePie per gestire il feed RSS, come esso
rende la vita molto più facile e può essere utilizzata in qualsiasi altro progetto in cui sono coinvolti i feed RSS.
Crea un file chiamato "index.php" e avvialo con una struttura HTML abbastanza semplice da ospitare
i vari componenti del nostro feed di Flickr.
Cose piuttosto standard, si noti che abbiamo aggiunto classi per l'intestazione e il piè di pagina, ma di più
importante, l'album-wrapper. Questo è il div dove pubblicheremo tutte le immagini che entrano
dal nostro feed su Flickr.
Crea due nuove cartelle chiamate "include" e "cache", quindi scarica href = "http://simpliepie.org/" target = "_ blank"> SimplePie
SimplePie memorizza in modo intelligente una versione memorizzata nella cache del tuo feed Flickr localmente per velocizzare il futuro
visite. Nota: se non lo fai su Windows, non dimenticare di verificare la cartella "cache"
è scrivibile.
handle_content_type (); ?>
L'inserimento di questo codice nella parte superiore del file "index.php" ci dà accesso a SimplePie
libreria per gestire il feed RSS per noi. Inoltre, la seconda e la terza riga creano un nuovo oggetto feed
basato sull'URL RSS per il tuo feed su Flickr.
Ora possiamo iniziare a sporcare il nostro HTML con frammenti di PHP per produrre informazioni dal nostro Flickr
alimentazione. Alcune delle funzioni chiave di SimplePie sono:
$ Feed-> get_title (); // Restituisce il titolo del feed RSS $ feed-> get_image_url (); // Restituisce l'immagine per il feed, nel caso di Flickr, l'avatar dell'utente $ feed-> get_items (); // Restituisce una matrice degli elementi nel feed, nel caso di Flickr, le foto con le loro descrizioni, ecc.
Ogni oggetto restituito da get_items () ha anche il proprio get_title () ecc. Per recuperarli è vario
elementi. Per un elenco completo delle funzioni disponibili per SimplePie, consulta il href = "http://simplepie.org/wiki/reference/start" targt = "_ blank"> Documentazione SimplePie
Quindi le prime funzioni che chiameremo nel nostro script saranno il titolo e l'intestazione:
Album di Flickr: <?php echo $feed->get_title (); ?>
get_title (); ?>
Prima di poter iniziare a scorrere le foto nel feed, dobbiamo scrivere due brevi funzioni.
Il primo individua il tag immagine all'interno della descrizione di una foto nel feed RSS. Puoi
scrivere questa funzione tra i tag PHP esistenti nella parte superiore dello script.
Accentsconagua
; ?> )
get_title (); ?> funzione image_from_description ($ data) preg_match_all ('/
] *)> / i ', $ data, $ corrisponde); return $ matches [1] [0]; La seconda funzione consente di selezionare la dimensione dell'immagine da recuperare da Flickr, ma
aggiustando il nome del file in un tag immagine. Questa funzione dovrebbe anche essere collocata tra il PHP esistente
tag nella parte superiore dello script.
] *)> / i ', $ data, $ corrisponde); return $ matches [1] [0]; function select_image ($ img, $ size) $ img = explode ('/', $ img); $ nomefile = array_pop ($ img); // Le dimensioni elencate qui sono quelle fornite da Flickr per impostazione predefinita. Passa l'indice dell'array nella variabile $ size per selezionarne uno. // 0 per il quadrato, 1 per il pollice, 2 per il piccolo, ecc. $ S = array ('_s.', // quadrato '_t.', // pollice '_m.', // piccolo '.', / / medio '_b.' // grande); $ img [] = preg_replace ('/ (_ (s | t | m | b))? \ ./ i', $ s [$ size], $ nomefile); return implode ('/', $ img); 
Ora possiamo scorrere le foto nel feed RSS e inviarle. Useremo un ciclo for su
ripassa ogni voce nel feed.
get_items () come $ item):?>get_enclosure ()) echo ''. $ enclosure-> get_title (). '
.' "\ N"; $ img = image_from_description ($ item-> get_description ()); $ thumb_url = select_image ($ img, 0); eco '.' "\ N"; ?>
get_date ('j F Y | g: i a'); ? >
Per spiegare questo bit di codice, mentre eseguiamo il ciclo, emettiamo un nuovo div che possiamo definire più tardi.
All'interno di ogni div, usiamo le funzioni che abbiamo scritto in precedenza per ottenere una dimensione particolare dell'immagine (ho scelto
quadrato per facilità di styling). Stiamo anche stampando il titolo di ogni foto prima di emettere il
foto stessa e la data sotto ogni foto.
Ora è il momento di dare un po 'di stile all'album! Quindi, in primo luogo, dare una base alla struttura
Struttura HTML, imposterò alcuni caratteri, larghezze, margini, ecc. Anche un piccolo stile per ordinare l'allineamento
dell'immagine dell'icona del feed di Flickr. Non dimenticare di collegare il tuo foglio di stile nella sezione principale di
il tuo HTML prima di tutto.
Quindi inserisci queste regole CSS nel tuo file "style.css":
body font-family: Verdana, Arial, Helvetica, sans-serif; background-color: # 222; larghezza: 960 px; margine: 0; font-size: 0.75em; .page-wrapper background-color: # 444; allineamento del testo: a sinistra; larghezza: 960 px; margine: 0 auto; imbottitura: 20px; posizione: relativa; superiore: 30 px; a sinistra: 30 px; overflow: auto; .page-wrapper h1 font-size: 1.8em; .page-wrapper h2 font-size: 1.2em; colore: # 222; .page-wrapper .feedIcon vertical-align: middle; padding: 0 10px;
Quindi uno stile da applicare a ciascuna delle foto div:
.album-wrapper .photo width: 200px; background-color: # 666; allineamento del testo: centro; allineamento verticale: medio; fluttuare: a sinistra; imbottitura: 10px; margine: 10px; .album-wrapper .photo img border: none; .album-wrapper .photo small color: #aaa; font-size: 0.9em;
Ora per aggiungere un po 'di interattività, introdurremo jQuery. Penso che sarebbe bello avere un
effetto hover e possibilità di fare clic su un'immagine e vedere una versione più grande. Include lo script jQuery
file, da cui è possibile scaricare l'ultima versione
target = "_ blank"> jquery.com
, renditi anche tu un "script.js" e includilo nello stessomodo.
Il primo bit di jQuery da aggiungere al tuo file "script.js" è un $ (documento) .ready () da gestire
tutto quello che vuoi che jQuery faccia, dopo che il documento è stato caricato.
.' "\ N"; ?> $ (document) .ready (function () $ ('. photo'). fadeTo (0, 0.5); Questo svanirà ogni div con la classe ".photo" al 50% non appena il documento è completamente caricato
e pronto. Quindi faremo illuminare le immagini quando il mouse passa sopra di loro.
$ (document) .ready (function () $ ('. photo'). fadeTo (0, 0.5); $ ('. photo'). hover (function (e) $ (this) .stop (). fadeTo ('slow', 1.0);, function (e) $ (this) .stop (). fadeTo ('slow', 0.5););); Queste 5 linee extra dicono a jQuery di rendere ogni foto, al passaggio del mouse, dissolvenza al 100% e quando il mouse
si spegne di nuovo, si riduce al 50%. (Grazie a Mike Schneider e Simon nei commenti per alcuni
cambia qui)
Sarebbe bello rendere cliccabili le miniature, in modo da poter visualizzare una versione più grande delle immagini.
Per fare questo, useremo Thickbox, costruito su jQuery.
Scarica Thickbox, e poi
includilo nella testa del tuo file "index.php", come mostrato sopra.
Una volta inclusi, modifica le seguenti righe per elaborare l'URL di un'immagine completa e aggiungilo a
link con una classe di "thickbox". Questo attiva Thickbox e dovrebbe funzionare, ho anche aggiunto
titolo che fornisce una didascalia.
$ full_url = foto ($ url, 'completo'); echo 'get_title (). '">
Questo è tutto! Ora dovresti avere uno script che visualizza un feed di Flickr per te e che ti permette di farlo
cliccali e vedi una versione più grande. Godere!
