PUBLIC MARKS from eledo34 with tags slideshow & jQuery

Voici aujourd’hui Roundabout petit plugin jQuery surpuissant pour faire des carrousels html de vos listes. Ce plugin jQuery permet donc de transformer vos listes html en carrousel avec des transitions plutôt pas bien faites. Côté pratique il permet de créer des carousels, des slideshows mais aussi des animations 3d tournantes, l’affichage de défilement de chiffres version compteur à l’ancienne et un « sélecteur de mot » qui pourrait être utilisé comme des select dans les formulaires.

Sequence est un slider jQuery avancé permettant de créer des effets de transitions très réussies et aux possibilités illimitées. Sequence est un slider jQuery avancé permettant de créer des effets de transitions avancés et aux possibilités illimitées. Face à la foison des slideshow et sliders jQuery sur le marché, il faut réussir à se démarquer ! Et le plugin jQuery Sequence le fait fort bien! A travers un système d'animations recherché, vous pourrez enfin donner du peps à votre slideshow démodé qui orne votre homepage. L'objectif mis en avant par Sequence est de pouvoir créer son propre style de slideshow, sans thème prédéfini. Les 3 démos proposées, toutes différentes en terme de style, sont d'ailleurs très réussies (Sur les navigateurs modernes qui supportent lesanimations CSS3).

complet et souple (html, video, image)

Si il y a une chose récurrente c’est bien le manque de sémantique dans les gadget du web. Fx slider ne doit pas être le seul mais il est parfaitement sémantique et extrêmement simple d’intégration. Coté Html une liste suffit pour peut qu’elle soit identifiée ou classé.

Les plugins jQuery qui génèrent un diaporama sont nombreux, mais ils sont souvent lourds à charger du fait des nombreuses options qui ne sont pas forcément utilisées. Avec Craftyslide, on va à l’essentiel : un slideshow simple, léger et efficace ! Pourquoi Craftyslide ? Craftyslide est né d’une raison assez originale. En effet, l’auteur en avait marre de devoir utiliser des plugins trop lourds pour ses besoins : un code superflu et parfois non-sémantique, beaucoup d’options peu utilisées, des transitions de plus en plus complexes… En s’inspirant du plugin jQuery Slides qui a été conçu avec le même objectif, Craftyslide permet de mettre en place un diaporama très simple, avec seulement cinq options de base.

Moins d’un an après la sortie de la version 2 de jDiaporama et plus de 35 000 pages vues, je vous présente aujourd’hui la toute dernière version dotée de nombreuses nouvelles fonctionnalités ! Au programme de cette nouvelle version : Affichage de miniatures pour contrôler le diaporama Pas moins de 12 nouvelles animations de transitions ! Ajout et configuration d’easing pour certaines animations Ajout de contrôles externes pour interagir avec le diaporama Ajout de nombreuses fonctions de callback Choix de la position des miniatures (dessus / dessous) Version pack de seulement 20 ko ! Gestion partielle de la cohabitation d’images au format portrait et paysage Ajout d’un mode debug Diverses optimisations, améliorations et corrections de bugs

Codrops nous propose un tutoriel expliquant comment créer une bannière animée uniquement avec l’aide de jQuery (ce qui sous entend sans flash ou gif animés). banniere animee jquery L’exemple de Codrops sera beaucoup plus parlant qu’une longue explication : http://tympanus.net/Tutorials/CustomAnimationBanner/ Pour obtenir ce résultat, il vous faudra créer un DIV principal contenant les “DIV slider”, c’est à dire qui contiennent les différente images à afficher. A ce niveau, il faudra un peu de HTML et CSS pour obtenir le résultat voulu. Ensuite, l’animation s’appuie sur les plugins jQuery Easing et jQuery 2D transform. Avec ce couple, il est possible de diriger les images comme on le souhaite et obtenir des effets visuels très sympathiques. Enfin, il vous faudra créer un troisième fichier, javascript cette fois ci, et architecturer vos animations : on indique au premier slide, je veux que l’image soit pourvue de telle animation, d’une durée de n secondes, avec un enchainement “untel”… pour le second slide idem etc… Et jQuery s’occupe du reste ! Le tutoriel est très bien fait et le résultat tout simplement parfait.

Slides est un slideshow en JQuery simple et léger sans effets superflues ou configurations en trop. Slides, un slideshow simple Slides possède une 20aines d'options classiques que l'on retrouve dans les autres Slideshow, comme le paramétrage de la vitesse de défilement des images, le temps d'arret lorsque la souris passe dessus... Depuis Ferme du Web : http://www.lafermeduweb.net/billet/slides-un-slideshow-en-jquery-simple-et-leger-987.html

AviaSlider est un diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images (j’ai un faible pour la transition fullwidth-fade-slider). Le marquage HTML5 et les effets CSS3 sont présents mais le Slider reste compatible avec IE6, Safari 3+, Firefox 2+, Opera 10+, Google Chrome 3+ en version Mac et PC pour les 3 derniers navigateurs cités. Prêt à fonctionner avec prettyPhoto Lightbox lorsqu’on clique sur une image.

SimpleSlide. Un plugin, comme son nom l’indique, simple et efficace. Avec ce slider, on n’est pas obligé de faire slider des images, on peut faire défiler le contenu que l’on souhaite ! Par contre, au niveau des options, c’est un petit peu plus léger que le plugin JQuery précédent. On y retrouve les classiques : vitesse et délais, des options pour la barre de statut (elle ne sert pas à naviguer), un callback et c’est à peu près tout. Et si l’on veut ajouter des flèches de navigation (comme ci-dessus), il suffit d’ajout des div avec les bonnes classes (« left-button » par exemple) et le bon attribut « rel ». Avec cette méthode, tu peux aussi faire un bouton de type « jump to » si on veut amener le visiteur à un slide particulier. D’autres démos de ce plugin sont disponibles ici. Et à noter que tout le contenu du site est dans un SimpleSlide !

Touch-Gallery est un plugin jQuery permettant de reproduire le look & feel des photos sous iPad / iPhone 4 sur son site mobile en plein écran. Touch gallery : slideshow plein écran iPad Grâce à Touch-Gallery, on ne fera plus de différence entre la présentation des photos sur l'appli native de l'iPad ou iPhone 4 et de votre site. Le slideshow / slider d'images s'ouvre en plein écran et le défilement se fait aux doigts. Touch-Gallery est optimisé pour la version Safari Mobile des iPad et iPhone 4 mais fonctionne aussi comme simple slideshow en lightbox pour la version desktop de Safari, Firefox 4, Opera et Chrome. RECUP DEPUIS : http://www.lafermeduweb.net/billet/touch-gallery-un-slider-photos-pour-ipad-et-iphone-4-en-plein-ecran-931.html