Share
Ik wilde al geruime tijd een tutorial schrijven en API's zijn altijd al een bijzondere interesse van mij geweest. Dus met de recente inval van mijn vrouw in fotografie besloot ik dat een Flickr-tutorial de eerste cab uit de rang zou zijn! Het gebruik van RSS, Flickr en jQuery was ook best leuk.
Ok, dus we gaan een aantal technologieën aanraken voor deze tutorial. We zullen gebruiken
een RSS-feed van Flickr, een beetje PHP en wat jQuery om dingen leuk en interactief te maken! Goed
gebruik SimplePie om de RSS-feed als zodanig te behandelen
maakt het leven veel eenvoudiger en kan worden gebruikt in andere projecten waarbij RSS-feeds betrokken zijn.
Maak een bestand met de naam "index.php" en begin ermee met een redelijk eenvoudige HTML-structuur
de verschillende componenten van onze Flickr-feed.
Vrij standaarddingen, merk op dat we klassen hebben toegevoegd voor de kop- en voettekst, maar meer
belangrijker, de album-wrapper. Dit is de div waar we alle afbeeldingen die binnenkomen zullen uitvoeren
van onze Flickr-feed.
Maak twee nieuwe mappen met de naam "includes" en "cache" en download href = "http://simpliepie.org/" target = "_ blank"> SimplePie
SimplePie slaat op slimme wijze een in de cache opgeslagen versie van uw Flickr-feed lokaal op om de toekomst te versnellen
bezoeken. Opmerking: als u dit niet in Windows doet, vergeet dan niet om de map "cache" te controleren
is beschrijfbaar.
handle_content_type (); ?>
Door deze code helemaal bovenin uw "index.php" -bestand te plaatsen, hebben we toegang tot de SimplePie
bibliotheek om de RSS-feed voor ons af te handelen. De tweede en derde regel maken ook een nieuw feedobject
op basis van de RSS-URL voor uw Flickr-feed.
Nu kunnen we beginnen met het rommel maken van onze HTML met fragmenten van PHP om informatie van onze Flickr uit te voeren
voeden. Enkele van de belangrijkste functies die SimplePie biedt zijn:
$ Feed-> get_title (); // Geeft als resultaat de titel van de RSS-feed $ feed-> get_image_url (); // Retourneert de afbeelding voor de feed, in het geval van Flickr, de avatar $ feed-> get_items () van de gebruiker; // Retourneert een array van items in de feed, in het geval van Flickr, de foto's met hun beschrijvingen, enzovoort.
Elk item geretourneerd door get_items () heeft ook een eigen get_title () enz. Om het verschillende op te halen
elementen. Voor een volledige lijst van de functies die beschikbaar zijn voor SimplePie, bekijk de href = "http://simplepie.org/wiki/reference/start" targt = "_ blank"> SimplePie-documentatie
Dus de eerste functies die we in ons script zullen noemen, zijn de titel en titel:
Flickr Album: <?php echo $feed->get_title (); ?>
get_title (); ?>
Voordat we de foto's in de feed kunnen doorlopen, moeten we twee korte functies schrijven.
De eerste lokaliseert de afbeeldingstag in de beschrijving van een foto in de RSS-feed. Jij kan
schrijf deze functie tussen de bestaande PHP-tags aan de bovenkant van het script.
Accentsconagua
; ?> )
get_title (); ?> function image_from_description ($ data) preg_match_all ('/
] *)> / i ', $ gegevens, $ overeenkomsten); return $ matches [1] [0]; Met de tweede functie kunt u de grootte selecteren van de afbeelding die u wilt ophalen van Flickr, maar
aanpassing van de bestandsnaam in een afbeeldingstag. Deze functie moet ook tussen de bestaande PHP worden geplaatst
tags aan de bovenkant van het script.
] *)> / i ', $ gegevens, $ overeenkomsten); return $ matches [1] [0]; function select_image ($ img, $ size) $ img = explode ('/', $ img); $ filename = array_pop ($ img); // De hier vermelde formaten zijn degene die Flickr standaard biedt. Geef de array-index door in de variabele $ size om er een te selecteren. // 0 voor vierkant, 1 voor duim, 2 voor klein, etc. $ s = array ('_s.', // square '_t.', // thumb '_m.', // small '.', / / medium '_b.' // groot); $ img [] = preg_replace ('/ (_ (s | t | m | b))? \ ./ i', $ s [$ size], $ filename); return implode ('/', $ img); 
Nu kunnen we de foto's in de RSS-feed doorlopen en deze uitvoeren. We zullen een for-lus gebruiken om
over elk item in de feed gaan.
get_items () als $ item):?>get_enclosure ()) echo ''. $ enclosure-> get_title (). '
.' "\ N"; $ img = image_from_description ($ item-> get_description ()); $ thumb_url = select_image ($ img, 0); echo '.' "\ N"; ?>
get_date ('j F Y | g: i a'); ? >
Om dit stukje code uit te leggen, voeren we tijdens het doorlopen een nieuwe div uit die we later kunnen stylen.
Binnen elke div gebruiken we de functies die we eerder hebben geschreven om een bepaalde afbeeldingsgrootte te krijgen (ik heb ervoor gekozen
vierkant voor het gemak van styling). We voeren ook de titel van elke foto uit voordat de
foto zelf en de datum onder elke foto.
Nu is het tijd om het album wat stijl te geven! Dus eerst om wat basisstructuur aan de basis te geven
HTML-structuur, ik zal wat lettertypen, breedtes, marges etc. instellen. Ook een beetje stijl om de uitlijning te sorteren
van het pictogramafbeelding van de Flickr-feed. Vergeet niet uw stylesheet-bestand te linken in het head-gedeelte van
jouw HTML eerst.
Voeg deze CSS-regels vervolgens toe aan uw "style.css" -bestand:
lichaam font-family: Verdana, Arial, Helvetica, sans-serif; achtergrondkleur: # 222; breedte: 960 px; marge: 0; lettergrootte: 0.75em; .page-wrapper background-color: # 444; text-align: left; breedte: 960 px; marge: 0 auto; opvulling: 20px; positie: relatief; top: 30px; links: 30px; overloop: automatisch; .page-wrapper h1 font-size: 1.8em; .page-wrapper h2 font-size: 1.2em; kleur: # 222; .page-wrapper .feedIcon vertical-align: middle; opvulling: 0 10px;
Vervolgens wat stijl toepassen op elk van de foto-divs:
.album-omslag .photo width: 200px; achtergrondkleur: # 666; text-align: center; vertical-align: middle; zweven: links; opvulling: 10px; marge: 10px; .album-wrapper .photo img border: none; .album-wrapper .photo small color: #aaa; lettergrootte: 0.9em;
Om een beetje interactiviteit toe te voegen, voegen we wat jQuery toe. Ik denk dat het leuk zou zijn om een te hebben
zweefeffect en de mogelijkheid om op een afbeelding te klikken en een grotere versie te bekijken. Voeg het jQuery-script toe
bestand, waarvan je de nieuwste versie van kunt krijgen
target = "_ blank"> jquery.com
, maak ook jezelf een "script.js" en voeg daar hetzelfde inmanier.
Het eerste stukje jQuery dat u aan uw "script.js" -bestand moet toevoegen, is een $ (document) .ready () om te verwerken
alles wat u jQuery wilt laten doen, nadat het document is geladen.
.' "\ N"; ?> $ (document) .ready (function () $ ('. photo'). fadeTo (0, 0.5); Hierdoor wordt elke div met de klasse ".photo" vervaagd tot 50% zodra het document volledig is geladen
en klaar. Vervolgens laten we de afbeeldingen oplichten als de muis eroverheen zweeft.
$ (document) .ready (function () $ ('. photo'). fadeTo (0, 0.5); $ ('. photo'). hover (functie (e) $ (this) .stop (). fadeTo ('slow', 1.0);, functie (e) $ (this) .stop (). fadeTo ('slow', 0.5););); Deze extra 5 regels vertellen jQuery dat elke foto, bij zweven, vervaagt tot 100%, en wanneer de muis
gaat weer af, vervaagt terug naar 50%. (Met dank aan Mike Schneider en Simon in de commentaren voor sommigen
wijzigingen hier)
Het zou leuk zijn om de thumbnails klikbaar te maken, zodat u een grotere versie van de afbeeldingen kunt bekijken.
Om dit te doen, zullen we Thickbox gebruiken, gebouwd op jQuery.
Download Thickbox en dan
neem het op in de kop van uw "index.php" bestand, zoals hierboven getoond.
Nadat ze zijn opgenomen, bewerkt u de volgende regels om de URL uit te werken naar een volledige afbeelding en voegt u a toe
link met een klasse van 'thickbox'. Dit activeert Thickbox, en het zou gewoon moeten werken, ik heb het ook toegevoegd
titel die een bijschrift levert.
$ full_url = foto ($ url, 'full'); echo 'get_title (). '">
Dat is het! U zou nu een script moeten hebben dat een Flickr-feed voor u weergeeft, en u kunt dat doen
klik erop en zie een grotere versie. Genieten!
