Tutoriels jQuery. Thumbnails Navigation Gallery with jQuery. In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with […] View demoDownload source In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. The beautiful photos are from Mark Sebastian’s photostream on Flickr. So, let’s get started!
The Markup Our HTML is mainly going to consist of a wrapper and the menu list. Inside of our wrapper we will add the following: The first element is our full preview image. The CSS. JQuery Cycle Plugin. Check out Cycle2, the latest in the Cycle line of slideshows. The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Images are used in these demos because they look cool, but slideshows are not limited to images. Use the Effects Browser page to preview the available effects. For more about options, see the Options Reference page.
Frequently Asked Questions Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007. Hosted Libraries - Developer's Guide - Make the Web Faster. Afficher les articles en colonne avec WordPress | Le blog | nukleo.fr. Traditionnellement la liste des articles d’un blog sont affichés les uns à la suite des autres, de haut en bas (comme sur ce blog).
Pour diverses raisons (design, optimisation de l’espace, utilisation spécifique de WordPress etc…) on pourrait souhaiter les afficher en colonne. Voici une méthode simple pour y arriver. Voici ce que l’on veut obtenir : afficher sur la page d’accueil la liste des articles (ou les extraits) dans 2 colonnes, avec les plus récents en haut. Pour y parvenir nous utiliserons l’opérateur modulo de PHP et de la fonction rewind_posts() de WordPress. Le problème On pourrait tout simplement utiliser la propriété float de CSS pour arriver à nos fins et ça fonctionnerai parfaitement dans le cas de figure où tous les blocs contenant les articles ont la même hauteur (comme dans l’image précédente).
Mais il est très probable que ça ne soit pas le cas : la hauteur de chaque bloc va varier en fonction de son contenu (l’extrait ou l’article). La solution Le template WordPress. Slideshow jQuery accessible. Dans ce tutoriel, vous allez apprendre comment réaliser un slideshow jQuery accessible pour votre site web. Étapes par étapes, vous découvrirez le processus de création en allant du HTML jusqu’au Javascript. Ceci est un tutoriel basé sur celui du site anglophone SixRevisions. Merci à eux de nous avoir autorisé à le reprendre pour le traduire et l’améliorer un peu. La 2ème partie de ce tutoriel (et exclusivement conçue par nous) portera sur la gestion dynamique de ce slideShow : Ajout/Suppression de slides , miniaturisation automatique des images, changer la position des slides (et tout ça en Ajax).
Cette partie va en fait consister à étudier la partie statique de ce slideShow. Les bases du concept La partie la plus importante de tout bon composant web est d’avoir une structure HTML solide et bien construite. La structure de notre contenu est matérialisé par une div qu’on appellera #slidehow et qui servira de conteneur principal pour notre slideshow. Etape 1: HTML Les flèches (CSS) Résumé. Wordpress & jQuery UI - L'accordéon d'article. Beaucoup d’entre vous me demandent comment fabriquer un système d’accordéon avec jQuery et WordPress. Un système en étant un autre. Il y a peu d’article explicatif sur cette méthode. Un manque corrigé avec ce tutoriel détaillé. Avant de commencer, je vous demande d’insérer la librairie jQuery et jQueryUI. Et pour ce faire, je vous renvoi au tutoriel sur jQuery UI.
Avec ces librairies, il est très simple de créer un accordéon. Le code avec une boucle WordPress En sortie votre code devra, stricto sensu, ressembler à ceci : <div id="accordion"><h3><a href="Lien 1">Le titre</a></h3><div>Le contenu</div><h3><a href="Lien 2">Le titre</a></h3><div>Le contenu</div><h3><a href="Lien 3">Le titre</a></h3><div>Le contenu</div><h3><a href="Lien 4">Le titre</a></h3><div>Le contenu</div></div> Pour ce faire, nous allons utiliser le loop de WordPress afin de générer ce code : <div id="accordion"><?
J’utilise donc la fonction query_posts pour n’afficher que les 5 premiers articles. Résultat final. Créer un "scrollTop" avec jQuery. Upload en Drag & Drop. Caroufredsel.