Share
La prochaine étape de la session Pixels Premium concerne les commandes du curseur d’image d’Orman. Nous allons prendre le PSD, le reconstruire pour le navigateur, puis le rendre fonctionnel avec le génial Nivo Slider jQuery Plugin.
Pour tout garder en ordre, nous allons d'abord créer notre structure de dossiers. Allez-y et créez trois dossiers appelés "css", "images" et "js" respectivement. Le dossier css contiendra notre feuille de style. Images est pour, bien images, et js contiendra nos plugins jQuery - Nivo slider dans ce cas!
D'accord, nous avons notre structure de dossiers, nous devons maintenant créer notre document HTML. Créez ceci à la racine de votre projet. Nous utiliserons un modèle de base HTML5 simple tout en créant un lien vers la bibliothèque jQuery hébergée par Google..
Contrôles du curseur d'image
Nous lancerons les choses avec quelques styles de réinitialisation:
html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tbody, tfoot, thead, tr, th, td, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie section, résumé, heure, marque, audio, vidéo margin: 0; rembourrage: 0; bordure: 0; font: hériter; alignement vertical: ligne de base; / * Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs * / article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; a text-decoration: none;
Maintenant, avant de sauter dans le curseur, nous allons ajouter un arrière-plan à la page. Si vous avez déjà téléchargé le fichier PSD, vous verrez qu'il existe un calque avec un dégradé radial suggérant un éclairage subtil. Nous allons créer cela en ayant un motif reproductible, légèrement plus léger que le PSD. Après avoir appliqué l’arrière-plan, nous allons utiliser des ombres de boîtes incrustées sur la balise html pour essayer de reproduire la lumière au centre..
html -webkit-box-shadow: encart 250px 250px 250px rgba (0,0,0, 0,25), encart -250px -250px 250px rgba (0,0,0, 0,25); -moz-box-shadow: encart 250px 250px 250px rgba (0,0,0, 0,25), encart -250px -250px 250px rgba (0,0,0, 0,25); boîte-ombre: encart 250px 250px 250px rgba (0,0,0, 0,25), encart -250px -250px 250px rgba (0,0,0, 0,25); largeur: 100%; hauteur: 100%; body background: url (… /images/bg.jpg) repeat; taille de police: 100%;
Maintenant nous pouvons enfin commencer notre slider! Le Nivo Slider est l'oeuvre de Gilbert Pellegrom et Michael Wright, connus sous le nom de Dev7studios et copains professionnels avec Orman..
Cela nous permet de créer notre curseur en utilisant le minimum de balises possible. Tout ce que nous avons à faire est de créer une div avec un identifiant de ce que vous voulez; J'utilise "slider" dans ce cas, et une classe de "nivoSlider". Ensuite, tout ce que vous avez à faire est de placer vos images à l’intérieur du div, c’est tout.!
Contrôles du curseur d'image 
Nous centrerons ensuite notre curseur au milieu de la page. Si vous avez suivi mon dernier tutoriel, vous aurez suivi le processus pour y parvenir. Si vous souhaitez plus d'informations, consultez cet article sur les astuces CSS.
Nous avons également ajouté des zones d’ombre au curseur tout en nous rappelant les préfixes du navigateur. Notez que nous avons également ajouté un peu plus de CSS, qui est requis pour que nivoSlider fonctionne.
#slider position: absolute! important; en haut: 50%; à gauche: 50%; largeur: 650px; hauteur: 350px; marge supérieure: -175px; marge gauche: -325px; -webkit-box-shadow: 0px 0px 5px rgba (0,0,0, 0,5), 0px 0px 20px rgba (0,0,0, 0,2); -moz-box-shadow: 0px 0px 5px rgba (0,0,0, 0,5), 0px 0px 20px rgba (0,0,0, 0,2); box-shadow: 0px 0px 5px rgba (0,0,0, 0,5), 0px 0px 20px rgba (0,0,0, 0,2); .nivoSlider img position: absolute; en haut: 0; gauche: 0; affichage: aucun; .nivoSlider a border: 0; bloc de visualisation; .nivo-slice display: block; position: absolue; z-index: 5; hauteur: 100%; .nivo-box display: block; position: absolue; z-index: 5;
Il est temps d'intégrer le Slider Nivo. Commencez par vous rendre sur http://nivo.dev7studios.com/pricing/ et téléchargez le plugin jQuery. Une fois téléchargé et décompressé, copiez le fichier jquery.nivo.slider.js dans votre dossier js créé à l’étape 1..
Ensuite, nous devrons créer un lien vers ce fichier dans notre document HTML..
Contrôles du curseur d'image
Maintenant que notre plugin est téléchargé et lié à, nous devrons le relier à notre curseur, tout en définissant des paramètres optionnels. Consultez la documentation de Nivo pour plus de détails sur toutes les options disponibles..
Accentsconagua
