Share
Les curseurs jQuery offrent un moyen simple et élégant d’afficher du contenu sans renoncer à des biens immobiliers de valeur sur votre page Web. Leur popularité a explosé et peut être utilisée de différentes manières. Passons en revue les styles populaires, en choisissant un curseur et en intégrant un dans un site de démonstration.
Il était une fois une image sur le Web avec un seul moyen de se présenter: un fichier JPG, GIF ou PNG à plat. Il y a quelques années, les images ont commencé à apprendre de nouveaux trucs; Ils se sont regroupés et ont commencé à apparaître dans les curseurs jQuery sous les applaudissements des visiteurs tout autour..
Depuis lors, ils ont appris une multitude de nouveaux trucs qui en font un matériau de choix pour tout concepteur de sites Web. Que vous les utilisiez auparavant ou non, ce didacticiel vous donnera un aperçu des différentes saveurs de curseurs, du moment où vous les utiliserez dans un dessin, et nous vous expliquerons même l'installation.
S'il y a une chose que les curseurs jQuery n'ont pas, c'est un nom cohérent. Le curseur comporte de nombreux alias: galerie, carrousel, promotions et rotateurs, mais ils offrent tous la même fonctionnalité générale: afficher plusieurs éléments de contenu dans un espace partagé de la page. Pour les besoins de cet article, je les désignerai tous comme un "curseur".
Les curseurs jQuery peuvent être utilisés pour presque tout, mais la plupart sont utilisés pour afficher un certain nombre de photos dans un format de diaporama d’une manière autrefois gérée par Adobe Flash. Beaucoup offrent un certain nombre d'effets de transition entre les diapositives et peuvent être contrôlés par les boutons précédents / suivants, la navigation par onglets ou par vignettes..
Le nombre et la variété de curseurs continuent de croître régulièrement. Il n'a donc jamais été aussi facile de trouver un curseur pour répondre à vos besoins. Ils viennent dans toutes les formes, tailles et tailles - un certain nombre d'entre eux sont gratuits, ce qui signifie que lorsque vous payez pour un curseur, il est généralement rempli de fonctionnalités.
Permet de parcourir quelques-uns des styles de curseurs les plus populaires ci-dessous. Gardez à l'esprit que la plupart des exemples présentés proviennent de versions de démonstration non stylées et que tous peuvent être personnalisés à l'aide de connaissances de base en CSS et en lisant la documentation..
Le curseur photo est un style de slider très populaire. Beaucoup acceptent une image et certaines métadonnées telles qu'une légende, souvent extraite automatiquement de la balise alt ou title.
Avantages: Généralement le plus facile à utiliser pour les débutants. L'accent est mis directement sur une grande image que vous choisissez. Beaucoup ont des effets de transition multiples entre les diapositives, glissades, fondus, zooms, etc..
Désavantages: Si vous avez besoin d'afficher une grande variété de contenus, tels que du HTML, des images ou des vidéos, un curseur de contenu mixte peut s'avérer un meilleur choix. La plupart des cas vous obligent à vous en tenir aux images..
Bien que similaires au curseur de photo, les curseurs de contenu mixte vous permettent d’utiliser plus que des images. Passez en revue toutes les options lorsque vous choisissez un curseur d'image. Certaines autorisent l'utilisation de HTML mais peuvent ne pas être répertoriées dans la liste des fonctionnalités principales..
Avantages: Parfait pour l'affichage de contenu vidéo, HTML et d'image dans le même curseur si nécessaire.
Désavantages: Les curseurs de contenu mixte peuvent être un peu plus avancés que votre curseur de photo standard..
Le style de galerie est souvent utilisé dans les applications de photographie. La navigation est souvent composée de vignettes pour parcourir les images de votre collection..
Avantages: Très facile pour les utilisateurs de parcourir les images qu'ils veulent voir rapidement.
Désavantages: Prend souvent plus de temps sur la page qu'un curseur standard pour adapter l'image et toutes les vignettes.
Pensez à un cube Rubik, construit sur le Web, sans tous les maux de tête. C'est en gros ce qu'est un 3D Block Slider: il est incroyablement impressionnant du point de vue visuel et peut être parfait pour ajouter un peu plus d'enthousiasme à un site..
Avantages: L'un des curseurs les plus étonnants sur le plan visuel. Si les visiteurs ne l'ont pas vu auparavant, leurs mâchoires pourraient toucher le sol.
Désavantages: Bien que les autres curseurs de ce didacticiel soient de type jQuery, la plupart des curseurs de bloc 3D sont construits dans une combinaison d'Adobe Flash et de XML… qui n'est pas le format le plus «standard». Ces curseurs peuvent nécessiter un peu plus de temps pour "précharger"; Parce qu'ils sont construits avec Flash, cela signifie aussi qu'ils peuvent être un peu plus difficiles à installer si vous ne les connaissez pas bien..
Inspiré par l'effet de couverture de Apple, cet effet de curseur est un moyen étonnant d'afficher votre travail. Associé à un style minimal, ce curseur peut se sentir à l'aise.
Avantages: Ce style peut constituer un moyen très impressionnant et très interactif pour les utilisateurs de parcourir une galerie d'images mettant en valeur votre travail..
Désavantages: Beaucoup ont une petite barre de défilement ou utilisent la molette de la souris ou le clavier pour afficher les images, ce qui peut être un peu gênant avec un défilement involontaire..
Le curseur de taille normale est ce qu'il semble être - un curseur qui prend toute la page pour montrer votre travail d'une manière qui ne peut pas être manquée.
Avantages: Si vous avez le style "allez gros ou allez à la maison", ils ne deviennent vraiment pas plus gros que ça.
Désavantages: Ils peuvent être un peu difficiles à intégrer dans un site car ils sont conçus pour remplir votre écran de travail. Les images utilisées doivent être assez grandes pour remplir les nouveaux écrans haute résolution.
Parfois, vous pouvez vous retrouver dans une situation où vous souhaitez afficher une grille d'images et permettre une navigation rapide sans que l'utilisateur ne charge une deuxième ou une troisième page..
Certains curseurs peuvent afficher plusieurs images à la fois ou par diapositive. Consultez la liste des fonctionnalités. Dans jCarousel Lite présenté ci-dessus, "visible" est défini sur 3, montrant trois diapositives à la fois..
Avantages: Vous permet de faire défiler plusieurs éléments à la fois pour les moments où une image ou un contenu de grande taille n'est pas nécessaire. Idéal pour les groupes d'articles ou lorsque vous avez la salle sur le site.
Désavantages: Il n'y a pas beaucoup d'inconvénients à ce style, à part le fait d'être un peu plus complexe à configurer que le curseur photo standard.
Le style accordéon permet de parcourir les éléments en vedette un peu comme de feuilleter les pages d'un livre. Cela utilise un comportement classique de l'utilisateur "masquer et révéler" en affichant simplement un extrait du contenu avant de faire glisser l'intégralité de la boîte en accordéon.
Avantages: Une manière très unique et amusante d'afficher vos articles. Le style progressif peut aider à renforcer le sens de l'ordre si vous utilisez un paradigme de contenu "étape 1, étape 2, étape 3".
Désavantages: Pas génial pour des dizaines de diapositives et cela peut être un peu difficile pour les nouveaux utilisateurs d'internet d'ouvrir et de fermer des éléments par glissement accidentel avec un simple clic de souris. Envisagez un clic pour ouvrir un style ou un paramètre de tabulation, le cas échéant..
La sensation que vous obtenez lorsque vous utilisez le grand curseur à onglets est un sentiment de simplicité - étape 1, étape 2, étape 3. Un excellent moyen d'afficher les modifications progressives, les fonctionnalités ou les options du produit.
Avantages: Très attrayant avec un style approprié. A la manière de l'accordéon, ce curseur affiche un soupçon de contenu de chaque diapositive, ce qui peut s'avérer très utile pour les visiteurs à la recherche d'informations spécifiques..
Désavantages: Vous devrez peut-être limiter le nombre d'éléments que vous souhaitez inclure, sauf si vous utilisez un curseur à onglets comme iTunes Music Store..
Bien que la variété et la quantité de curseurs soient en augmentation constante, il est parfois impossible de trouver une solution adaptée à votre situation particulière..
Si vous comptez utiliser de nombreux curseurs dans vos projets, cela vaut la peine de creuser et d’apprendre vraiment comment ils fonctionnent et en construire un vous-même. La meilleure façon d'apprendre est par exemple.
Disséquer les curseurs existants, voir comment ils fonctionnent et en tirer des leçons. Ne volez pas le code d'un autre développeur, mais concentrez-vous plutôt sur ce qu'il fait: des animations, modifier l'opacité, revoir les paramètres proposés et écrivez-le à votre manière..
Avec des outils tels que Firebug, vous pouvez "inspecter" un curseur en temps réel, en le regardant manipuler l'index z, l'opacité ou le positionnement pour déplacer le contenu d'une diapositive à la suivante..
Vous comprendrez mieux ce qui se passe sous le capot, serez capable d'effectuer des personnalisations et de résoudre les problèmes plus rapidement en creusant dans autant de curseurs que possible pour comprendre leur fonctionnement..
La seule chose plus abondante que le nombre de curseurs jQuery est le nombre de sites les présentant. Plutôt que d'essayer de les énumérer toutes ici (de nouvelles paraissent chaque semaine!), Voyons comment en trouver une qui vous convient:
Une recherche rapide sur Google révélera que des curseurs peuvent être trouvés à différents endroits:
Souvent intitulé "25 scripts utiles de curseurs de contenu jQuery" - il s'agit de messages créés pour collecter et examiner les différents curseurs disponibles à ce moment. Lisez les commentaires ainsi que l'article pour connaître l'opinion d'autres personnes sur la collection..
Les sites proposant des didacticiels sur les curseurs de construction incluent souvent le code source final du projet. Vous obtenez ainsi un guide étape par étape sur la manière dont il est construit et sur le résultat final. Sauf indication contraire, le projet source est uniquement destiné à des fins éducatives, demandez avant de l'utiliser dans tout projet.
CodeCanyon propose une catégorie entière pour les curseurs premium. https://codecanyon.net/category/javascript/sliders
Parfois, vous rencontrerez un site avec un curseur et vous voudrez voir quel plugin ils ont utilisé. Puisque JavaScript est un script côté client, créez une source de visualisation de la page et recherchez les fichiers JavaScript importés. Les informations du plug-in doivent être incluses en haut du script source du plug-in avec une URL pour plus d'informations sur le plug-in à télécharger. et documentation.
Soyez courtois vis-à-vis des efforts que d'autres ont déployés, lisez et respectez les contrats de licence inclus et accordez un crédit lorsque le crédit est dû.
Le choix d'un curseur dépend en grande partie de la fonctionnalité et des options dont vous avez besoin, ainsi que du style général recherché. Choisissez le type de contenu que vous souhaitez afficher, comment vous voulez que les utilisateurs le parcourent et voyez quel curseur correspond le mieux à vos besoins..
Une fois que vous avez réduit vos choix, comparez la taille globale du script et vérifiez si elle est compatible avec tous les navigateurs..
Certains curseurs sont proposés dans une version "allégée" telle que jQuery Cycle Lite si vous souhaitez conserver la taille globale du fichier dans votre projet. Souvent, la version allégée manque simplement des effets de transition supplémentaires, mais reste fidèle aux options les plus populaires..
Si vous n'êtes pas un maître jQuery, choisissez un curseur avec d'excellentes démos en direct que vous pouvez télécharger et une documentation pour vous guider dans la personnalisation..
L'un des avantages de l'utilisation d'un curseur prédéfini est que la plupart d'entre eux sont incroyablement faciles à redessiner en fonction de vos besoins. Ce processus (généralement appelé simplement "skinning") n'est pas aussi difficile que cela puisse paraître. Habituellement, il suffit de modifier un simple fichier CSS - le skinning le plus complexe consiste généralement à permuter les graphiques dont vous avez créé les graphiques par défaut (tels que les arrière-plans et les boutons)..
Outre les curseurs de skinning, il convient également de noter qu'avec la plupart des curseurs, il est facile de modifier la taille pour l'adapter au site Web que vous concevez..
Placer un curseur dans une conception existante n'est pas un processus en une seule étape, mais la plupart des scripts de curseur contiennent une page exemple basique pour commencer, importer jQuery, CSS, un contenu exemple et initialiser le plug-in avec les paramètres par défaut..
Importons jQuery Cycle dans un exemple de site créé spécialement aux fins de ce didacticiel..
Téléchargez les sites avant et après à suivre.
Le site de démonstration se compose de base HTML, CSS et d’une image qui sera le point de départ de l’intégration du curseur..
Nous allons intégrer le plugin jQuery Cycle pour cette démo.
Importez la bibliothèque jQuery et le plugin Cycle dans le dossier
de votre site en ajoutant ce code:Le premier script devrait être la dernière version de jQuery. Vous pouvez le récupérer sur jquery.com ou le charger à partir des bibliothèques Google, comme nous l'avons fait ci-dessus..
Le second script est la source du plugin que nous avons placée dans le dossier / js /.
Remplacez l'image statique sample_water.jpg actuelle utilisée dans le site de démonstration par une liste non numérotée de diapositives:
Nous allons juste utiliser trois images pour commencer, notez l'attribut, nous l'utiliserons plus tard pour dire à notre plugin que c'est le conteneur de nos diapositives. Étant donné que les diapositives sont essentiellement une liste de contenu associé, une balise UL est un bon choix..
Sous la liste non organisée des promotions que nous avons ajoutées ci-dessus, nous allons ajouter la navigation pour contrôler les diapositives. Le plugin créera les liens de navigation individuels de manière dynamique au moment de l'exécution, à mesure que vous ajoutez et supprimez des diapositives de la liste..
Diapositive suivante
La classe du bouton de la diapositive suivante correspond au paramètre 'next' que nous allons utiliser pour faire avancer les diapositives manuellement.
L'index de promotion est automatiquement généré si le paramètre 'pager' est défini dans les options. En le saisissant manuellement, nous pouvons contrôler où il se trouve sur la page au cas où vous le voudriez ailleurs que là où le plugin le place..
Ajoutons CSS pour styler la liste des curseurs. Certains curseurs comme Nivo Slider ont une feuille de style personnalisée que vous pouvez télécharger et commencer, mais pour cette démo, ajoutons notre CSS personnalisé directement à la fin du fichier principal screen.css du site..
/ * Supprimer le format de liste de Promo UL / LI * / #promo, #promo li margin: 0; rembourrage: 0; type de style de liste: aucun; / * Styles du conteneur de navigation promo en option * / #promonav padding: 4px; fond: #eee; bordure: 1px solide # e0e0e0; marge supérieure: 1px; / * Gardez le bouton suivant au bord droit * / #promonav .next float: right; / * Styles de liens dans la navigation promotionnelle * / #promonav a padding: 0 3px; bordure: 1px solide #eee; texte-décoration: aucun; contour: 0; couleur: # 777; / * Style appliqué au survol du (des) lien (s) de navigation promo * / #promonav a: hover color: # 000; / * L'index obtient automatiquement une classe activeSlide. Utilisez-le pour indiquer la diapositive actuelle * / #promoindex a.activeSlide font-weight: bold; background: #fff; couleur de bordure: #ccc;
À ce stade, nous avons importé jQuery et le plug-in, mais rien ne dit au plug-in quel élément de la page est notre curseur ni quelles options inclure, il doit être initialisé..
Créez un fichier nommé setup.js et placez-le dans le répertoire / js /.
Importez-le sous les scripts jQuery et Cycle que vous avez importés dans
zone du site plus tôt dans le tutoriel.Il est important que vous importiez jQuery, jQuery Cycle, puis setup.js dans cet ordre exact, sinon le plug-in ne fonctionnera pas..
Dans setup.js, ajoutez le code suivant:
Accentsconagua
$ (document) .ready (fonction () $ ('# promo'). cycle (fx: 'scrollHorz', délai dépassé: 4000, vitesse: 800, ensuite: '#promonav .next', pageur: '#promoindex ', hauteur: 200, pause: 1);); Me permet d'expliquer ce qui se passe dans le code ci-dessus.
Nous commençons par vérifier si le document est prêt avec le document.ready, sinon le plugin peut essayer de modifier des éléments de la page qui ne sont pas disponibles ou prêts..
La ligne suivante indique au plug-in Cycle quel élément nous utilisons en tant que conteneur des éléments que nous souhaitons parcourir. Dans notre cas, le conteneur a un identifiant de promo donc nous entrons #promo.
Les éléments listés de fx à pause sont des options que nous passons dans le plugin. Si nous n'en incluons pas et utilisons simplement: $ ('# promo'). Cycle (); le plugin utiliserait ses paramètres par défaut. Les options sont répertoriées dans une liste séparée par des virgules. Le nombre et le type d'options varient selon les plugins, mais vous pouvez trouver jQuery Cycle à l'adresse http://jquery.malsup.com/cycle/options.html.
Les options next et pager font référence à la navigation que nous avons construite à l'étape 5 ci-dessus et peuvent être supprimées si vous ne souhaitez pas inclure la navigation sur le curseur..
Téléchargez les sites avant et après à suivre.
Les curseurs n'ont pas besoin d'être de grands curseurs de photos s'étendant sur une page de votre site. Utilisez-les pour afficher des sections de contenu en rotation, telles que des témoignages, vos derniers tweets ou des articles de blog populaires, dans les zones du site qui pourraient bénéficier d'une salle supplémentaire..
Merci d'avoir lu!
