background preloader

Slideshow jQuery accessible

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é

10 Jquery carousel slideshow plugin galerie photos | Autodidactique Publié par Steven le 19 Février 2011 - 20:05 mis à jour le 23 Septembre 2011 - 22:21 Un bon plugin Jquery carousel, slideshow ou galerie photos, est un plugin : qui est facile à mettre en place, qui a une documentation claire et précise, qui a des exemples d'utilisation. Voici une sélection de 10 plugins jquery carousel / slideshow / galerie photos qui répondent à ces critères. PrettyPhoto prettyPhoto est un sosie de Jquery lightbox. Il est très facile à mettre en place, très flexible si vous voulez le customiser. jqFancyTransitionsy jqFancyTransitions est plugin jQuery facile à utiliser pour afficher vos photos comme des slides avec des effets originaux. jqFancyTransitions est compatible et testé avec Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+. AD Gallery AD Gallery est un plugin de gallerie photos complètement customisable pour jQuery. voir demo Elixon Theater Carousel Nivo Slider Nivo Slider est beau, simple, facile d'utilisation et très bien documenté.

Définition jQuery Un article de Wikipédia, l'encyclopédie libre. jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006. La bibliothèque contient notamment les fonctionnalités suivantes : Usage[modifier | modifier le code] jQuery se présente comme un unique fichier JavaScript de 247 Kio (92,2 Kio dans sa version minimalisée par la suppression des commentaires et caractères d'espacements. La bibliothèque jQuery peut être appelée de deux manières différentes : via la fonction jQuery, ou $. $("div.test").add("p.quote").addClass("blue").slideDown("slow"); via l'objet $. $.each([1,2,3], function() { document.write(this + 1); }); Voici un exemple d'Ajax avec jQuery : Modules d'extension[modifier | modifier le code] Notes et références[modifier | modifier le code] Annexes[modifier | modifier le code] Sur les autres projets Wikimedia : Programmation web

Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web Slicebox - A fresh 3D image slider with graceful fallback Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don't support the new properties. View demo Download source With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3D object. In case the browser does not support 3D transforms, a simple slider will be used as fallback. Please note that you can only see the cool 3D effect of Slicebox in a browser that supports those CSS3 properties. The images used in the demos are by ND Strupler. Usage In order to use Slicebox, put your images in an unordered list with the class “sb-slider”: You can use the div with the class “sb-description” to add any kind of description for the respective image. Options

jQuery : Documentation 15 Responsive Web Design Issues You Don’t Want to Deal With Responsive web design is not only about pretty layouts and fashionable templates. Your utmost goal is to provide users with a uniform user experience across all devices. Creating independent experiences for each just doesn’t pay off – they’re too resource intensive. The focus should be on creating adaptive experiences, which scale to the user. Here are the main mistakes you want to avoid in order to accomplish your goal safely and effectively. 1. Responsive sites sharing the same code base have a great chance to reach content parity. 2. Since each device operates with its own form factor, constraints, interface conventions and opportunities, we must take all of these into consideration when creating natural-feeling experiences. (Source: emarketed.net) 3. Ever seen an online menu which took 20 JavaScript libraries to display? 4. Mobile isn’t just about small screens and the right layout. 5. Suppose you’ve decided to deliver the full user experience to your customers regardless of context.

jQuery User Interface : Documentation Direction-Aware Hover with CSS3 and jQuery How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. View demo Download source In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. We’ll use an unordered list for the thumbnails and the description overlays: The list items will be floating left and have a relative positioning because we will make the description overlay absolute: What we will do is the following: depending on the place we are entering with the mouse, we’ll apply the respective “from” style which will set the correct initial position of the overlay. So, the heart of our little plugin is the following part: We basically bind the ‘mouseenter’ and ‘mouseleave’ event to the list item and with the function _getDir we’ll get the direction we are moving in or out (imagine the “detection” area for each direction as a rectangle divided into four triangles).

12 CSS Effects Libraries For Developers Looking for some CSS3 effects libraries? If your answer is yes then look no further, here we have come up with an exciting collection of 12 ultimate CSS3 effects libraries that can truly spice up your designs. The latest CSS3 properties come with new possibilities to create animation and interactive web designs. In this showcase, you can find 12 excellent CSS3 effect libraries that you can use to make your web designs look even more eye catching and attractive. These CSS3 effect libraries let you create interactive designs without the need of Flash, Silverlight or After Effects. Have a look and feel free to share your opinions with us via comment section below. Animate.css A cross-browser library of CSS animations. DynCSS Simple, dynamic CSS rules to give life to your sites. Effeckt.css A Performant Transitions and Animations Library. Animatable One property, two values, endless possiblities. Hover Bouncejs Bounce.js lets you create tasty CSS3 powered animations in no time. Magic Animations Kitecss

dypsilon/frontend-dev-bookmarks

Related: