Share
Je veux écrire un tutoriel depuis un certain temps déjà, et les API ont toujours été un de mes centres d'intérêt. Donc, avec la récente incursion de ma femme dans la photographie, j'ai décidé qu'un tutoriel Flickr serait le premier taxi du rang! Utiliser RSS, Flickr et jQuery tous ensemble était assez amusant aussi.
Ok, nous allons donc aborder un certain nombre de technologies pour ce tutoriel. Nous allons utiliser
un flux RSS de Flickr, un peu de PHP et du jQuery pour rendre les choses agréables et interactives! Bien
utiliser SimplePie pour gérer le flux RSS, comme il
rend la vie beaucoup plus facile et peut être utilisé dans tout autre projet impliquant des flux RSS.
Créez un fichier appelé "index.php", et démarrez-le avec une structure HTML assez basique pour héberger
les différentes composantes de notre flux Flickr.
Jolies choses standard, notez que nous avons ajouté des classes pour l'en-tête et le pied de page, mais plus
surtout, la pochette de l'album. C'est la div où nous allons sortir toutes les images qui viennent
de notre flux Flickr.
Créez deux nouveaux dossiers appelés "includes" et "cache", puis téléchargez href = "http://simpliepie.org/" target = "_ blank"> SimplePie
SimplePie stocke intelligemment une version en cache de votre flux Flickr localement pour accélérer les opérations futures.
visites. Remarque: Si vous ne le faites pas sous Windows, n'oubliez pas de vous assurer que le dossier "cache"
est inscriptible.
handle_content_type (); ?>
L’insertion de ce code tout en haut de votre fichier "index.php" nous donne accès à SimplePie
bibliothèque pour gérer le flux RSS pour nous. De plus, les deuxième et troisième lignes créent un nouvel objet de fil
basé sur l'URL RSS de votre flux Flickr.
Maintenant, nous pouvons commencer à encombrer notre code HTML avec des extraits de code PHP pour générer des informations à partir de notre site Flickr.
alimentation. Voici quelques unes des fonctions clés fournies par SimplePie:
$ feed-> get_title (); // Renvoie le titre du flux RSS $ feed-> get_image_url (); // Retourne l'image du flux, dans le cas de Flickr, l'avatar de l'utilisateur $ feed-> get_items (); // Retourne un tableau des éléments du flux, dans le cas de Flickr, les photos avec leurs descriptions, etc..
Chaque élément renvoyé par get_items () a aussi son propre get_title (), etc. pour le récupérer
éléments. Pour une liste complète des fonctions disponibles à SimplePie, consultez la href = "http://simplepie.org/wiki/reference/start" targt = "_ blank"> Documentation SimplePie
Ainsi, les premières fonctions que nous appellerons dans notre script seront le titre et l'en-tête:
Album Flickr: <?php echo $feed->get_title (); ?>
get_title (); ?>
Avant de pouvoir parcourir les photos du flux, nous devons écrire deux courtes fonctions..
Le premier localise la balise d'image dans la description d'une photo du flux RSS. Vous pouvez
écrire cette fonction entre les balises PHP existantes en haut du script.
Accentsconagua
; ?> )
get_title (); ?> function image_from_description ($ data) preg_match_all ('/
] *)> / i ', $ data, $ correspond)); return $ correspond à [1] [0]; La deuxième fonction vous permet de sélectionner la taille de l’image à récupérer à partir de Flickr, mais
ajuster le nom de fichier dans une balise d'image. Cette fonction doit également être placée entre le PHP existant
balises en haut du script.
] *)> / i ', $ data, $ correspond)); return $ correspond à [1] [0]; function select_image ($ img, $ size) $ img = exploser ('/', $ img); $ filename = array_pop ($ img); // Les tailles répertoriées ici sont celles que Flickr fournit par défaut. Passez l'index du tableau dans la variable $ size pour en sélectionner un. // 0 pour un carré, 1 pour un pouce, 2 pour un petit, etc. $ s = array ('_s.', // square '_t.', // thumb '_m.', // small '.', / / medium '_b.' // large); $ img [] = preg_replace ('/ (_ (s | t | m | b))? \ ./ i', $ s [$ taille], $ nom du fichier); return implode ('/', $ img); 
Nous pouvons maintenant parcourir les photos du flux RSS et les imprimer. Nous allons utiliser une boucle for pour
passer en revue chaque élément du flux.
get_items () en tant que $ item):?>get_enclosure ()) echo ''. $ enclosure-> get_title (). '
'. "\ n"; $ img = image_from_description ($ item-> get_description ()); $ thumb_url = select_image ($ img, 0); écho ''. "\ n"; ?>
get_date ('j F Y | g: i a'); ? >
Pour expliquer ce morceau de code, alors que nous parcourons en boucle, nous produisons une nouvelle div que nous pourrons styliser plus tard.
Dans chaque div, nous utilisons les fonctions que nous avons écrites précédemment pour obtenir une taille d’image particulière (j’ai choisi
carré pour la facilité de style). Nous produisons également le titre de chaque photo avant la sortie du
photo elle-même et la date sous chaque photo.
Il est maintenant temps de donner du style à l'album! Donc, premièrement, pour donner une structure de base à la base
Structure HTML, je vais définir des polices, des largeurs, des marges, etc. Un peu de style pour trier l'alignement
de l'image de l'icône du flux Flickr. N'oubliez pas de lier votre fichier de feuille de style dans la section head de
votre HTML d'abord.
Ensuite, insérez ces règles CSS dans votre fichier "style.css":
corps font-family: Verdana, Arial, Helvetica, sans serif; couleur de fond: # 222; largeur: 960px; marge: 0; taille de police: 0,75em; .page-wrapper background-color: # 444; text-align: left; largeur: 960px; marge: 0 auto; rembourrage: 20px; position: relative; en haut: 30px; à gauche: 30px; débordement: auto; .page-wrapper h1 font-size: 1.8em; .page-wrapper h2 font-size: 1.2em; couleur: # 222; .page-wrapper .feedIcon vertical-align: middle; rembourrage: 0 10px;
Ensuite, un peu de style à appliquer à chacune des photos divs:
.album-wrapper .photo width: 200px; couleur de fond: # 666; text-align: center; alignement vertical: milieu; float: gauche; rembourrage: 10px; marge: 10px; .album-wrapper .photo img border: none; .album-wrapper .photo small color: #aaa; taille de police: 0.9em;
Maintenant, pour ajouter un peu d’interactivité, nous allons faire appel à jQuery. Je pense que ce serait bien d'avoir un
hover effect, et la possibilité de cliquer sur une image et d’en voir une version plus grande. Inclure le script jQuery
fichier, dont vous pouvez obtenir la dernière version à partir de
target = "_ blank"> jquery.com
, faites-vous également un "script.js" et incluez-le dans le mêmefaçon.
Le premier bit de jQuery à ajouter dans votre fichier "script.js" est un $ (document) .ready () à gérer
tout ce que vous voulez que jQuery fasse, une fois le document chargé.
'. "\ n"; ?> $ (document) .ready (function () $ ('. photo'). fadeTo (0, 0.5); Cela atténuera chaque div avec la classe ".photo" à 50% dès que le document sera complètement chargé
et prêt. Ensuite, nous allons éclairer les images lorsque la souris les survole.
$ (document) .ready (fonction () $ ('. photo'). fadeTo (0, 0.5); $ ('. photo'). hover (fonction (e) $ (this) .stop (). fadeTo ('slow', 1.0);, fonction (e) $ (this) .stop (). fadeTo ('slow', 0.5););); Ces 5 lignes supplémentaires indiquent à jQuery de faire en sorte que chaque photo, en survol, passe à 100%, et lorsque la souris
s'éteint à nouveau, disparaît à 50%. (Merci à Mike Schneider et Simon dans les commentaires pour certains
change ici)
Ce serait bien de rendre les vignettes cliquables pour que vous puissiez voir une version plus grande des images..
Pour ce faire, nous utiliserons Thickbox, construit sur jQuery.
Téléchargez Thickbox, puis
incluez-le dans la tête de votre fichier "index.php", comme indiqué ci-dessus.
Une fois qu’ils sont inclus, éditez les lignes suivantes pour transformer l’URL en une image complète, puis ajoutez un
lien avec une classe de "thickbox". Cela active Thickbox, et ça devrait marcher, j'ai aussi ajouté
titre qui fournit une légende.
$ full_url = photo ($ url, 'full'); echo 'get_title (). '">
C'est tout! Vous devriez maintenant avoir un script qui affiche un fil Flickr et vous permet de
Cliquez dessus pour voir une version plus grande. Prendre plaisir!
