30/10/11

Blueberry : un diaporama « responsive »

Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage. Lire le reste de cet article »

13/09/11

Elastislide : un carousel jQuery réactif (Responsive Webdesign)

Le webdesign réactif (traduction approximative de Responsive Webdesign) est un ensemble de techniques permettant d’adapter la mise en page d’un site web selon le périphérique de l’utilisateur. Avec l’arrivée des Media Queries en CSS3, le webdesign réactif devient de plus en plus utilisé. Il manquait toutefois des carousels réactifs. C’est le cas de Elastislide qui profitera au mieux des caractéristiques de l’écran. Via @guerrier. Lire le reste de cet article »

31/08/11

FlexSlider — un Slider flexible et sémantique pour jQuery

FlexSlider est un slider, un de plus, qui permettra de faire défiler vos contenus avec le marquage HTML de votre choix.  FlexSlider est utilisable avec le clavier, ce qui est toujours bon pour l’accessibilité ; son poids plume (6 kb minifié) est également un atout de taille. Il est possible d’ajouter une légende (caption) pour chaque image. Pour cela, une simple balise p sous l’image suffit. Pour plus de sémantique et pour profiter des nouvelles balises apportées dans la hotte du Père Noël HTML5, il faudrait tester FlexSlider avec une balise figure et un bon vieux figcaption des familles. Merci à @allfordesign et @oncletom pour la suggestion :) Lire le reste de cet article »

21/08/11

jQuery Timelinr

jQuery Timelinr est un plugin jQuery qui permet de créer un effet de ligne temporelle verticale ou horizontale avec d’un côté des dates et de l’autre des événements. Une démonstration valant mieux qu’un long discours voici deux exemples : défilement horizontal, défilement vertical. Lire le reste de cet article »

15/08/11

73 tutoriels pour faire défiler vos contenus (Slideshow, Sliders & Diaporama)

Les diaporamas et autres Slideshows sont devenus un passage quasi-obligé pour les sites qui veulent présenter un grand nombre d’informations tout en ménageant l’espace disponible. Voici une liste condensée de 73 tutoriels ou scripts jQuery détaillés pour mettre en avant vos contenus texte et/ou image. Lire le reste de cet article »

06/05/11

JbhSlider — Slider en jQuery

JbhSlider permet de réaliser des diaporamas en jQuery avec la particularité de gérer les évènements rapprochés. Il n’y aura pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider. Oui, les visiteurs font ça :-) Outre la gestion des liens «Suivants et Précédent, JbhSlider gère la pagination entre les diapos et permet des effets de transition. Lire le reste de cet article »

03/05/11

Agile Carousel — Un diaporama agile et plein de ressources

Agile Carousel est un script qui permet de faire défiler automatiquement ou manuellement du texte et des images. Il existe des centaines de diaporama plus ou moins gourmands en ressources et possédant plus ou moins d’options. Agile Carousel semble un bon compromis entre le poids et les fonctionnalités. Le format de données JSON permettra à votre Slideshow de dialoguer avec les informations issues de votre CMS préféré. Lire le reste de cet article »

08/03/11

Un diaporama pleine-page avec jQuery

Full background image slider est un script qui permet d’afficher un diaporama occupant toute la fenêtre du navigateur (ou le container que vous voulez). Outre le changement de background de votre site — ce qui pourrait s’avérer fatiguant pour les yeux –, ce script pourra se rendre utile pour présenter des visuels sur une page séparée. Lire le reste de cet article »

22/12/10

Slides — Slideshow jQuery

Slides est un Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama. Slides est simple à utiliser et propose de nombreuses options : auto-rewind, auto-play, effets de fading et de transitions, préchargement d’images, pagination automatique, etc. Compatible avec Internet Explorer 7/8/9, Firefox 3+, Chrome, Safari, Safari Mobile et même IE6 ! Slides est disponible sur Github. Via Pierre Vion.

17/11/10

jQuery Cycle — Slideshow avec effets de transition

Le diaporama jQuery Cycle propose six effets de transition originaux. Le nombre des options disponibles est impressionnant : pas moins de 50 paramètres vous permettront de réaliser tous vos fantasmes souhaits ! jQuery Cycle est compatible avec les plugins Metadata et Easing. Lire le reste de cet article »