Share
Créez un diaporama jQuery qui vous permet de cliquer sur chaque diapositive lorsque JavaScript est désactivé, sans avoir à afficher toutes les diapositives l'une sous l'autre..
Il existe plusieurs tutoriels qui expliquent comment créer un diaporama jQuery, mais ils ne sont pas nombreux.
cet accent sur le rendre fonctionner sans JavaScript. C’est parce que la plupart des gens pensent que ce n’est pas possible mais
Je vais expliquer une méthode extrêmement simple qui montre que c'est effectivement possible. Tu seras bientôt
se donner des coups de pied et demander "Comment n'ai-je pas pensé à cela?"…
Dans ce tutoriel, je couvrirai les éléments suivants:
Tout d’abord, nous devons écrire le balisage que notre diaporama utilisera. Alors sautons droit
dans et le coder:
Diaporama jQuery à onglets
Glisser une
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Donec pretium arcu non velit. Phasellus adipiscing auctor lorem. Curabitur in urna ut purus conséquat sollicitudin. Phasellus ut diam. Cras magna libero, id id, venenatis sit amet, venenatis et, dui.
Glisser deux
Nam ac nibh sit amet augue ultricies sagittis. Donec sit amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus nisi condimentum urna, assis amét molesté odio dolor non lectus. Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus.
Diapositive trois
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse adipiscing dui a nibh. Entier tristique lorem vitae massa. Etiam dapibus, eros sit amet euismod semper, felis erat congue lacus, aliquam métus libero sed elit.
- Glisser une
- Glisser deux
- Diapositive trois
Ce n'est pas encore tout à fait complet, mais en règle générale, nous devrions
commencez toujours avec le strict minimum et améliorez / ajoutez-le lorsque
nécessaire.
Nous n'allons pas créer le plus beau diaporama aujourd'hui car je
je veux juste démontrer la fonctionnalité plus que tout. le
Les styles suivants configurent notre diaporama et sont prêts pour l'action:
/ * ---------------------------------------------------- ---- */ /* GLOBAL /* --------------------------------------- ------------- * / html font-size: 76%; body font-family: arial, helvetica, sans-serif; hauteur de ligne: 1.4em; taille de police: 1.2em; padding: 5%; / * ---------------------------------------------- ---------- * / / * SLIDESHOW / * --------------------------------- ------------------- * / #slideshow width: 960px; couleur de fond: #eee; border: 1px solid #ddd; #slideshow ul margin: 0; rembourrage: 0; type de style de liste: aucun; hauteur: 1%; / * Correction d'IE * / #slideshow ul: after content: "."; clarifier les deux; bloc de visualisation; hauteur: 0; visibilité: masqué; / * ------------------------------------------- --------- * / / * DIAPORAMA> DIAPOSITIVES / * ------------------------------------ -------------------- * / #slideshow .slides overflow: hidden; width: 960px; #slideshow .slides ul / * largeur totale de toutes les diapositives - 960px multiplié par 3 dans ce cas * / width: 2880px; #slideshow .slides li width: 920px; float: gauche; padding: 20px; #slideshow .slides h2 margin-top: 0; / * ------------------------------ ---------------------- * / / * DIAPORAMA> NAVIGATION / * ------------------- --------------------------------- * / #slideshow .slides-nav background-color: #ddd; border-top: 2px solid #ccc; #slideshow .slides-nav li float: left; #slideshow .slides-nav li a display: block; rembourrage: 15px 20px; contour: aucun;
Ajouter ces styles à un diaporama.css feuille de style
dans un répertoire CSS à la racine. Vous devriez maintenant voir quelque chose
semblable à ceci:
Certains d'entre vous se demandent probablement comment cela va fonctionner
maintenant, donc je ne vous ferai pas attendre plus longtemps.
Tout ce que nous avons à faire est de donner à chacune de nos diapositives un identifiant et une référence qui
ID dans l'attribut href de l'élément de navigation approprié. C'est ça
simple.
Votre nouveau balisage devrait ressembler à ceci:
Diaporama jQuery à onglets
Glisser une
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Donec pretium arcu non velit. Phasellus adipiscing auctor lorem. Curabitur in urna ut purus conséquat sollicitudin. Phasellus ut diam. Cras magna libero, id id, venenatis sit amet, venenatis et, dui.
Glisser deux
Nam ac nibh sit amet augue ultricies sagittis. Donec sit amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus nisi condimentum urna, assis amét molesté odio dolor non lectus. Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus.
Diapositive trois
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse adipiscing dui a nibh. Entier tristique lorem vitae massa. Etiam dapibus, eros sit amet euismod semper, felis erat congue lacus, aliquam métus libero sed elit.
- Glisser une
- Glisser deux
- Diapositive trois
Maintenant, testez votre nouveau code en cliquant sur chaque onglet…?
Ce n'est en aucun cas une technique non découverte. Les gens utilisent déjà
sur des sites que vous avez probablement utilisés sans vous en rendre compte, tels que le
Site web Coda.
C'était bien amusant! Il est maintenant temps d'ajouter quelques animations glissantes géniales
à notre diaporama.
Vous aurez besoin de télécharger le
minifié
jQuery Cycle plug-in qui inclut toutes les transitions et enregistrez-le sous jquery.cycle.js
dans un répertoire "js" à la racine de votre projet. Ajoutez ensuite ce qui suit à votre
sous la balise script de la bibliothèque jquery.
Nous allons maintenant créer le diaporama.js fichier mentionné ci-dessus et enregistrez-le dans le
Répertoire 'js' avec le code suivant:
Accentsconagua
$ slideshow = contexte: false, tabs: false, délai d'expiration: 1000, // temps avant l'affichage de la diapositive suivante (en ms) slideSpeed: 1000, // temps nécessaire pour faire glisser les diapositives (en ms) tabSpeed: 300, / / temps nécessaire pour faire glisser chaque diapositive (en ms) lorsque vous cliquez sur les onglets fx: 'scrollLeft', // l'effet de diapositive à utiliser init: function () // définissez le contexte pour accélérer les sélecteurs / améliorer les performances ceci .context = $ ('# slideshow'); // définit les onglets pour les éléments de navigation actuels codés en dur this.tabs = $ ('ul.slides-nav li', this.context); // supprime les éléments de navigation codés en dur de DOM // parce qu'ils ne sont pas connectés à jQuery cycle this.tabs.remove (); // prépare le diaporama et les onglets du cycle jQuery this.prepareSlideshow (); , prepareSlideshow: function () // initialise le plug-in du cycle jquery - // pour plus d'informations sur les options définies ci-dessous, accédez à: // http://malsup.com/jquery/cycle/options.html $ ("div. slides> ul ", $ slideshow.context) .cycle (fx: $ diaporama.fx, délai d'attente: $ diaporama.timeout, vitesse: $ diaporama.slideSpeed, fastOnEvent: $ slideshow.tabSpeed, pager: $ (" ul.slides -nav ", $ slideshow.context), pagerAnchorBuilder: $ slideshow.prepareTabs, avant: $ slideshow.activateTab, pauseOnPagerHover: true, pause: true); , prepareTabs: function (i, slide) // renvoie le balisage à partir d'onglets codés en dur à utiliser comme onglets de cycle jQuery // (attache les événements de cycle jQuery nécessaires aux onglets) return $ slideshow.tabs.eq (i); , activateTab: function (currentSlide, nextSlide) // récupère l'onglet actif var activeTab = $ ('a [href = "#' + nextSlide.id + '"]', $ slideshow.context); // s'il y a un onglet actif if (activeTab.length) // supprime le style actif de tous les autres onglets $ slideshow.tabs.removeClass ('on'); // ajoute un style actif au bouton actif activeTab.parent (). addClass ('on'); ; $ (function () // initialise le diaporama lorsque le DOM est prêt $ slideshow.init (););
NOTE: Pour que ce tutoriel soit court, je n’expliquerai pas tout.
dans ce nouveau fichier javascript mais si vous avez des questions, n'hésitez pas
demander dans les commentaires ci-dessous et je ferai de mon mieux pour vous aider =)
Ouvrez votre diaporama mis à jour dans un navigateur (en veillant à ce qu'il n'y ait pas de # slide- num) sur
la fin de votre URL) et attendez… Vous voyez couler?…
Génial! Maintenant, vous pouvez cliquer sur les onglets et le regarder glisser un peu plus vite.
Donc, nous l’avons fait fonctionner, mais c’est quoi $ slideshow.activateTab ()
méthode que nous avons ajoutée? Et bien ce n’est pas tout à fait nécessaire depuis le cycle jQuery
plugin ajoute déjà un .activeSlide classe à la navigation active
lien pour vous, cependant, je tiens à donner un peu plus de contrôle sur mes navigations afin
cette méthode ajoute simplement un .sur classe au parent
du lien actif.
Avec ceci en place, vous pouvez ajouter le CSS suivant à la fin de notre
slideshow.css feuille de style pour mettre en surbrillance l'onglet actif:
#slideshow .slides-nav li.on, #slideshow .slides-nav li.on a background-color: #eee; #slideshow .slides-nav li.on position: relative; en haut: -4px;
Lors de la prévisualisation, vous remarquerez probablement que le premier onglet n’est pas mis en surbrillance.
chargement de la page… cela est facile à corriger… utilisez simplement jQuery pour ajouter un .js
classe à la tag comme indiqué ci-dessous:
$ (function () // ajoute une classe 'js' au corps $ ('body'). addClass ('js'); // initialise le diaporama lorsque le DOM est prêt $ slideshow.init ();) ; Ajoutez ensuite le CSS que nous venons d’ajouter avec le nouveau .js classe:
.js #slideshow .slides-nav li.on, .js #slideshow .slides-nav li.on a background-color: #eee; .js #slideshow .slides-nav li.on position: relative; en haut: -4px;
Cela signifie que les boutons en surbrillance ne seront stylés que si l'utilisateur dispose de javascript.
activé et ensuite nous codons le .sur classe pour le premier onglet
la navigation du diaporama:
… Et le tour est joué! Essayez de désactiver / activer JavaScript et d'actualiser la
diaporama pour vous assurer que tout fonctionne toujours et nous avons terminé!
