Impressum

Des diaporamas & bandeaux simples et élégants en JQuery ... « généraux » et « pour SPIP, Drupal, Joomla & WordPress »

mardi 4 janvier 2011
par  François Daniel Giezendanner
popularité : 5%
3 votes

Nous présentons une liste non-exhaustive de mécanismes de défilement d’images facile a adapter et modifier pour créer des diaporamas et bandeaux animés élégants et modernes.

Les diaporamas mettent en œuvre des mécanismes de défilement d’images très à la mode, on en voit partout ! Dans tous les blogs, les CMS, les sites d’information, les portfolios, les boutiques en ligne, partout, ils sont donc devenus incontournables !


 Préambule

L’adaptation à SPIP d’une vingtaine de « Menus diaporama jQuery » est présentée dans les articles de la rubrique :


 Quelques diaporamas simples et élégants en JQuery ...dont certains sont adaptés pour SPIP

Ils ont pour noms Images sliders, Image Rotator, Flash diaporama, jQuery Diaporama, transitions slideshow, Auto Image Rotator, Fade-in slideshow etc.

Ils mettent en œuvre des mécanismes de défilement d’images très à la mode, on en voit partout ! Dans tous les blogs, les CMS, les sites d’information, les portfolios, les boutiques en ligne, partout, ils sont donc devenus incontournables !

Nous en présentons ci-dessous une liste non-exhaustive et, avec quelques manipulations simple, ils permettent de créer des bandeaux animés. Nous décrirons ultérieurement les galops d’essais que nous avons réalisés avec certains d’entre eux.

En complément, vous trouverez dans l’article suivants les plugins adaptés pour SPIP :


 QUELQUES DIAPORAMAS EN jQuery QUE NOUS AVONS EXPLORE


 Nivo Slider (SPIP et non SPIP)

Caractéristiques principales (v2.4)

  • 11 uniques effets de transitions
  • mark up simple et propre dans le code
  • chargement optimisé
  • options de navigation intégrées
  • poids du module de 10kb !!!
  • support des images liées (c’est à dire hébergées sur le web)
  • navigation au clavier entre les différents slide de Nivo Slider
  • HTML Captions (commentaire associé aux images)
  • Gratuit sous licence MIT.

Réglages de l’affichage :

  1. Largeur : px
  2. Hauteur : px
  3. 11 effets de transitions : sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft
  4. Nombre de tranches
  5. Vitesse de l’animation : ms
  6. Pause entre les images : ms
  7. Utiliser les flèches
  8. Cacher les flèches (afficher au survol)
  9. Afficher les puces
  10. Utiliser les fléches droite & gauche du clavier
  11. Pause au survol
  12. captionOpacity

Nivo Slider est compatible sur les navigateurs Internet suivant :

  • IE7 +
  • Firefox 3 +
  • Chrome v4
  • Safari v4
  • Opera 10.5

Le plugin a été intégré à SPIP, Drupal, Joomla et WordPress :

SOURCES NIVO SLIDER


 s3Slider : Plugin jQuery

Boban Karisik est un développeur (programmeur) indépendant PHP / MySQL basé à Belgrade (Serbie) qui travaille avec des clients partout dans le monde.

N’ayant pas trouvé ce qui lui convenait après une petite recherche il décide de le construire lui-même, il en est résulté le plugin jQuery s3Slider.

Description, téléchargement et mode d’emploi :

  • Trois exemples d’utilisation de s3Slider
    • Example 1 : This example shows the layer appears on top or bottom.
    • Example 2 : This example shows the layer appears on left or right.
    • Example 3 : This example shows the layer appears on all sides (left, right, bottom or top).

Le plugin a été intégré à SPIP


 JW Image Rotator

A propos de « JW Image Rotator »

« JW Image Rotator » (créé avec Flash d’Adobe) permet d’afficher les photos en séquence avec des transitions fluides. Il supporte la rotation d’un playlists RSS, XSPF ASX ou JPG, GIF et PNG, un large éventail de FlashVars (variables) pour peaufiner le comportement et l’apparence et un vaste API JavaScript.

Licence CC à usage non commercial. Sinon s’acquitter de la licence.

Parmi les nombreux paramètres de réglage disponibles relevons :

  • transition (random) : les transitions entre images :
    • random
    • fade
    • bgfade
    • blocks
    • bubbles
    • circles
    • flash
    • fluids
    • lines
    • slowfade.
  • shuffle (true/false) : la valeur true indique de jouer les images dans un ordre alléatoire.
  • audio (undefined) : assigne un fichier additonnel synchronisé MP3 pour la music de fond (background music).
  • volume (80) : fixe le volume de la musique de fond (background music).

Sources et compléments d’information :

JW IMAGE ROTATOR (sur SPIP)
lundi 16 juillet 2007, par Alexandra


 Coin Slider - jQuery Image Slider with Unique Effects

Caractéristiques

  • Unique transition effects
  • Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Lightweight (8kb only)
  • Linking images
  • Free to use under MIT licence
  • Fully customizable using CSS

COIN SLIDER - jQuery Image Slider with Unique Effects


 Dewslider : diaporama d’images en Flash (+ Plugin SPIP)

Il s’agit d’une animation Flash pour faire défiler des images ou photos.

Dewslider est libre d’utilisation et gratuit même dans un cadre professionnel ou commercial. Pour une version personnalisée professionnelle, n’hésitez pas à contacter AlsaCreation.

Utilisation

Définissez une liste d’images et laissez Dewslider faire le reste. Il est possible d’indiquer un titre pour chaque photo, d’utiliser des boutons de défilement, la molette de la souris, des liens, des actions, et de préciser le temps d’affichage de chaque image.

Son utilisation est très simple car il suffit d’utiliser le code HTML fourni pour une animation flash, en spécifiant les noms de fichiers images à lire (de type JPG), dans le code HTML ou via un fichier XML...

Suite sur le site officiel AlsaCreation


 Ultimate Fade-in slideshow (v2.4)

Description :

Ce script de diaporama de fondu enchainé intègre certaines des fonctions les plus demandées. Les caractéristiques du script sont :

  • Effet de fondu de l’image actuelle sur la précédente.
  • Possibilité d’afficher des images, soit comme un diaporama automatique ou manuel. En mode manuel, vous définissez votre propre contrôles « prev / next » donnant la main à l’utilisateur pour passer les diapositives.
  • En mode automatique, le diaporama peut être réglé pour arrêter de tourner au bout de x cycles.
  • Chaque diapositive peut être éventuellement un lien hypertexte.
  • Chaque diapositive peut avoir une description facultative qui lui est associée. Les descriptions peuvent être soit configurées pour afficher à la demande (lorsque la souris survole la diapositive), ou être toujours visibles jusqu’à explicitement rejeté.
  • Persistance de la dernière image chargée, ainsi lorsque l’utilisateur recharge la page, le diaporama reprend à partir de cette dernière diapositive.
  • Le diaporama s’arrête automatiquement avec onMouseover.

Ultimate Fade-in slideshow (v2.4)
Author : Dynamic Drive


 Jquery Auto Image Rotator


 Wow Slider 1.3

Présentation

Sur le site officiel de Wow Slider on explique :

jQuery Slideshow est un assistant basé sur la célèbre scripte jQuery qui vous permet de Créer facilement des galeries de photos Web en quelques clics sans avoir à écrire une seule ligne de code.

Il vous suffit de glisser-déposer vos photos dans la fenêtre de jQuery Slideshow, d’appuyer sur « Publier » et vous obtenez votre propre Galerie Web avec de beaux effets. L’album est ouvert instantanément dans votre navigateur ! Pas de code javascript, css, html, pas de retouche d’image, un simple clic suffit pour obtenir votre galerie.

jQuery Slideshow est gratuit pour un usage non-commercial.

Une petite taxe est nécessaire pour l’usage professionnel. La version jQuery Slideshow Business offre en plus une option pour supprimer le filigrane « Wowslider.com » ainsi qu’une fonction pour mettre votre propre filigrane dans l’image.

jQuery Slideshow

Wow Slider - jQuery Slideshow Download


 Diaporama en jQuery sans Innerfade - Pour SPIP

bb explique :

Dans la famille diaporamas en jQuery, je demande le père. Voici donc un petit diaporama tout simple basé sur le script Slideshow de Matt Oakes. Le script n’est malheureusement plus disponible sur le site de l’auteur. Sur jQuery.com on peut lire ceci :

« jQuery Innerfade : Advanced version of »Slideshow« from Matt Oakes. »

Pas la peine que je traduise :)

On peut voir ce que ça donne sur ce site :

http://www.ville-de-combrit.fr/

L’avantage de ce script est qu’il se dégrade bien lorsque javascript est désactivé. Dans ce cas une seule image est affichée et les autres restent masquées.

dans son article, il donne le script à insérer dans un squelette et le plugin à télécharger.


 Multiviewer Full pour SPIP2

Version FULL du plugin Multiviewer Flash

  • Utilisation ultra-simple
  • Les viewers ImageRotator et Simpleviewer2.0 ajoutés.
  • 6 Galeries Flash au choix.
  • Affichage en plein écran inclus.

Compatibilité

  • SPIP 2.0
  • SPIP 2.1

 Flash diaporama (SPIP)

Un diaporama pour Flash Player 9. Divers aspects du diaporama sont paramétrables (taille, couleurs, taille miniatures, lecture automatique, ...).

Compatibilité

  • SPIP 2.0
  • SPIP 2.1

 Plugin Spip jQuery Cycle 2

Adaptation du script Cycle pour jQuery en plugin SPIP.

Compatible SPIP 2.1.

Cette version 2 du plugin Spip jQuery Cycle « sjcycle » est compatible avec spip 2.1

Par défaut, la fonction tooltip est désactivée mais est activable via la configuration par CFG. De même pour l’effet fancybox mais qui nécessite, lui, l’installation du plugin fancybox pour fonctionner. Spip jQuery Cycle utilise la librairie fournie par le plugin FancyBox mais pas ses paramètres de configuration.


 Plugin pour bannières 2 (SPIP)

Ce plugin permet d’afficher et de gérer des campagnes d’information composées d’images ou animations. La balise #BANNIERE permet de positionner facilement cet objet dans vos squelettes. Plusieurs objets peuvent être placés sur la page et gérés en fonction de leur position (ex. : #BANNIERE1). Si vous lui faites passer des informations de localisation, vous pourrez choisir l’objet à afficher en conséquence. Un lien est placé sur les images et le clic est comptabilisé. Enfin, la campagne s’affiche pendant la période que vous définissez dans l’espace privé.

Compatibilité

  • SPIP 2.0
  • SPIP 2.1

Plus de détails ici : Plugin « Bannières 2 » : Galop d’essai et intégration à SARKA

Documentation et téléchargement


 COMPILATIONS DE DIAPORAMAS EN JQUERY


 6 Images sliders simples et élégants, réalisés avec JQuery

Guy introduit comme suit sa liste de 6 sliders :

Dire que le mécanisme de slider d’images est à la mode est un doux euphémisme. On en voit simplement partout ! Dans tous les blogs, dans les sites d’information, les portfolios, les boutiques en ligne, partout !

J’ai regroupé ci-dessous une liste non-exhaustive de plugins JQuery qui permettent de faire défiler des images. Ils figurent dans cette liste car ils sont simples mais élégants et facile à mettre en œuvre.


 13 Super Useful jQuery Content Slider Scripts and Tutorials

Vous avez probablement remarqué que beaucoup de sites récents ont aussi une zone dont le contenu présente une animation de diapositives ou des changements d’une certaine façon. Il s’agit d’une grande technique pour voir plusieurs pièces de contenu dans un espace limité et un bon moyen d’engager l’utilisateur. Si vous vous demandez comment cela est réalisé, voici 13 tutoriaux très utiles et de scripts qui vous aideront à créer ces types d’effets en utilisant jQuery.


 10 jQuery Slider Techniques and Plugins

L’année dernière nous avons publié une collection de techniques et plugins de slider en jQuery. En un an, la tendance à l’utilisation de ces types de sliders ou de diaporamas pour afficher le contenu présenté n’a fait que croître en popularité. Cela signifie que plus de sites utilisent les sliders jQuery et que plus de gens arrivent avec de nouvelles façons de les créer. Si vous n’avez pas encore essayé d’implémenter des applications sur un site, voici 10 techniques de plus en plugins qui vous aideront à démarrer.


 10 Useful jQuery Plugins for Images

Nous connaissons et aimons tous jQuery pour sa souplesse et ses nombreuses utilisations. Mais quelques-unes des applications jQuery les plus impressionnantes sont celles qui comportent des images. Elles peuvent vraiment vous permettre de faire des choses utiles et même ajouter des effets impressionnants à votre projet. Donc, ici, nous avons fait le tour de 10 plugins jQuery pour vous aider à afficher des images dans votre prochain projet


 15 jQuery slideshow/gallery plugins

Choisir le meilleur plugins de slideshow en jQuery peut être difficile. WAD a établit le top 15 de ces plugins pour vous rendre la vie plus facile.

Voici son choix de plugins jQuery qu’il considère comme les plus esthétiques, innovants et créatifs.


 20 Best jQuery Slideshow / Photo Gallery Plugins

Galerie de photos, galerie d’images, diaporama sont la meilleure façon de présenter vos images / photos à vos lecteurs. Ce post est une vitrine des 20 meilleurs plugins de diaporama en jQuery.


 16 Jquery Slideshow Scripts You CANNOT Miss - Updated | BradBlogging

Update – Nov 12th, 2009

Je viens de tomber sur plus de 7 scripts de diaporama en Jquery que vous pouvez utiliser sur votre blog ou site web ! Je les ai ajoutés à la liste des diaporamas.

La bibliothèque javascript «  write less, do more  » a toutes sortes d’exemples de codes différents qui font un large éventail de choses. Aujourd’hui, nous allons nous pencher sur différentes applications de diaporamas en Jquery qui peuvent être utilisées pour diversifier votre page d’accueil, le contenu, ou n’importe où assez grand pour afficher une image.


 Top 14 jQuery Photo Slideshow / Gallery Plugins

jQuery est de plus en plus présent dans les sites Web 2.0. Les diaporama jQuery prennent un groupe d’images et le transforment en une image « flash-like » un diaporma.


 33 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials

 30 Stunning jQuery Slider Plugins and Tutorials To Boost Your Work

jQuery a déployé Flash dans beaucoup d’usages web devenant un outil très puissant pour les concepteurs Web. Un de ces usages auquel je me réfère est le curseur sur l’image. L’implémentation de cette fonctionnalité dans votre site sera certainement considérée comme un « grand plus » alors ne perdez pas votre temps et télécharger les plugins jQuery disponibles dans cette liste de 33 puissants Plugins de diaporama jQuery (Sliders) et tutoriels.

Vous avez probablement remarqué que beaucoup de sites récents ont aussi une zone contenant des diapositives ou des changements d’une certaine façon. Il s’agit d’une grande technique pour voir plusieurs pièces de contenu dans une quantité limitée d’espace et une bonne façon d’engager les utilisateurs. ... Si vous êtes intéressé à mettre en œuvre un diaporama jQuery dans votre site s’il vous plaît consulter ces tutoriels jQuery et la collecte des plugins.


 40+ Fresh And New jQuery Plugins Of Slider’s And Gallery’s Tutorials

La simplicité, les fonctionnalités avancées et un appui solide sont les arguments courants des développeurs qui préfèrent jQuery aux autres frameworks JavaScriptav. En fait, jQuery est l’un des principaux frameworks JavaScript, avec des outils puissants qui peuvent considérablement améliorer l’interaction de l’utilisateur avec les applications Web.

Pour vous aider à améliorer vos compétences, dans cet article, nous présentons plus de 40 nouveaux plugins jQuery qui ont été créés récemment et qui pourraient faire du développement de votre prochain site Web une expérience plus facile et plus intéressante que la précédente.


 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials

L’intégration des diaporamas dans les pages web est devenue de plus en plus populaire depuis un an ou deux, et avec jQuery devient même de plus en plus populaire, et de plus en plus de développeurs ont créé des galeries d’images étonnantes, puissantes, polyvalentes et élégantes. Merci jQuery.

Ci-dessous vous trouvez les plus puissants, les plus créatifs et les plus polyvalents des plugins jQuery et tutoriels construit en utilisant jQuery.

S’il vous plaît Notez : Cet article a été mis à jour, vous pouvez le voir ici : 20 jQuery Image and Multimedia Gallery Plugins.


 20 jQuery Image and Multimedia Gallery Plugins


 Fresh jQuery Plugins For Your Next Project – Episode 7

Rapide et puissant, jQuery peut aider les concepteurs et développeurs à créer des sites Web interactifs impressionnants qui sont attrayants et accessibles au plus grand nombre de navigateurs. Pour votre audience, la visite de votre site sera à la fois divertissante et amusante. Navigation, galeries et diaporamas, sont des points chauds pour un site qui veut briller.



Publications

Derniers articles publiés

Navigation

Articles de la rubrique

Agenda

<<

2016

 

<<

Juin

 

Aujourd'hui

LuMaMeJeVeSaDi
303112345
6789101112
13141516171819
20212223242526
27282930123
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


9 sites référencés dans ce secteur

Brèves

Mise à jour de sécurité SPIP 2.1.10 du 7 avril 2011

mardi 19 avril 2011

...et oui encore une nouvelle version de SPIP (SPIP 2.1.10) disponible suite à la découverte d’une faille par Arnault.

Cette faille concerne les branches 2.0 et 2.1 et peut permettre à un rédacteur de déconnecter le site de sa base de données.

PIWIK succède à PhpMyVisites pour SPIP 2

jeudi 8 janvier 2009

L’analyseur de trafic web PhpMyVisite en plugin pour SPIP 1.9x a maintenant un magnifique successeur très performant pour SPIP 2, il s’agit du plugin PIWIK :