SUPERTRAMP
haut  Double-clic sur la page pour revenir en haut de page
   titre    Les meilleurs "Slideshows"arriere
  puce_tete   LES MEILLEURS DIAPORAMAS
 
  puce   Mon site devant être constitué en majorité de photos, il est important de disposer de bons diaporamas.
  puce   Après de nombreuses heures de recherche sur des sites proposant des liens vers des ressources, avec un tri rigoureux et de nombreux tests personnels, voici une sélection exigeante de 19 diaporamas ( + 3 petits ) et 3 logiciels pour en créer.
Je les ai retenu tant pour leur aspect esthétique que pour leur nombre d'effets de transitions de qualité et leur capacités de paramétrage. Je les ai classé plus ou moins par ordre de mes propres préférences : difficile d'en démarquer certains ( quoique chacun est adapté à différents usages selon ce que l'on veut obtenir et seront choisi en fonction de cela ).
Ils sont ici présentés adaptés à mon site, mais vous pouvez aussi aller les voir les démos et leur fichiers originaux sur le site de l'éditeur ( il y a toujours un lien de mes sources sur chaque diaporama ).
  puce   Ayant besoin de maîtriser leurs transitions et leurs thèmes ( pour les diaporamas en disposant de différents ), je les ai chacun(e)s représenté(e)s ici de façon visuelle et en fonctionnement avec leur code expliqué en français, où quelques "bugs" ont été résolus ( parfois problématiques ).  Profitez-en !
En fait, je partage ce qui me sert de pense-bête !

  dot  Nota : les meilleurs diaporamas sont le plus souvent les diaporamas gratuits, dont certains devenus payants. Mais leur précédente version reste gratuite avec peu de différences par rapport à leur dernière version ! Ces anciennes versions difficiles à trouver ( leur éditeur les faisant soigneusement disparaître de la toile ! ), j'en propose alors le téléchargement des ressources ici ( comme Chop Slider 2.2 ).
Sinon pour la majorité des diaporamas payants, ils restent à un prix très abordable :  entre 5 $ et 14 $, sauf GALLERIA à 29 $ et TN3 GALLERY à 37 $ ( les versions pour Wordpress sont aussi parfois plus chères ) . Vous pouvez les tester ici avant de les acheter.
Quant aux logiciels, Amazing Slider  ( 69 $ ) et Wow Slider  ( 69 $ ), leur versions annoncées au premier abord comme soit disant gratuites affuble les images d'un filigrane ( watermark ) disgracieux ( on peut l'enlever : cherchez sur Google et Youtube ). Et leurs versions payantes sont trop chères pour ce que c'est !

   fleche111  Astuce pour intégrer de la musique aux diaporamas : voir ci-dessous.

   Attention  ATTENTION : Diaporamas posant problème de transitions 3D "Cube" avec Internet Explorer Internet Explorer 

               flecheanimee   VOIR L'ARTICLE LES CONÇERNANT.
 

temp04

JSSOR SLIDDER           asterique   asterique   asterique

Mon préféré.   Ils l'ont fait !
Un diaporama exceptionnel avec des performances impressionnantes. ENTIEREMENT GRATUIT et distançant de loin tous les payants !
+ de 360 effets de transition  d'images de grande qualité et + de 390 effets de légendes ! Des "assistants" pour concevoir très facilement ces effets. Possibilité de créer ses propres skins avec les exemples fournis. Une grande quantité d'options et de paramétrages permettant de créer tout type de diaporama et de donner libre cours à sa créativité.
Une  documentation complète et claire pour mettre les mains dans le moteur. Et j'en oublie ... Il suffit d'aller voir leurs nombreuses  demos .
J'ai également détaillé le code ( en français ! ) de mes propres démos.
Vous pouvez vous en inspirer et surtout éviter quelques erreurs.
fleche10  Exemple avec un fond de page


 
CUTE SLIDER
CUTE SLIDER
UNOSLIDER
SEVEN SLIDDER  coeur    11 $
CUTE SLIDER     14 $
UNOSLIDER     9 $

TOP ! + de 350 transitions très bien conçues dont leurs variantes et 2 thèmes ici. Le plus " riche " des diaporamas !
fleche111  Exemple avec puces
fleche111  Avec 3D compatible IE



105 transitions de qualité (dont 64 3D)
+ celles que l'on personnalise. Assistants (visualisation et code). SUPER !
Toutes transitions compatibles  Internet Explorer 


Un beau diaporama avec 44 transitions
  prédéfinies + 62 créées ( et plus ! ), ultra-paramétrable, avec 12 thèmes.
Assistant pour création de transitions.


temp04
temp04
temp04
CHOP SLIDER V2.2     FREE
QUAKE SLIDER     FREE
SKITTER     FREE

130 transitions dynamiques incroyables! Possibilité d'en créer d'autres. Différences minimes entre V 2.2 et V 3 ( 15 $ ).
fleche111 Autres : Exemple 01 & Exemple 02


Un grand Diaporama. 48 transitons variées. Facilement paramétrable.
Six "thèmes" sont proposés ici, avec la possibilité de les personnaliser.


37 belles transitions en souplesse.
Diaporama facilement paramétrable.
Deux "thèmes" ici.
fleche111  Exemple avec puces et légendes

temp04
tn3
temp04
CCSLIDER     14 $
TN3 GALLERY      37 $
CAMERA     FREE

14 transitions 3D paramétrables ou 16 transitions 2D de qualité. Très beau.
fleche111 Exemple avec le fond du site
fleche111  Exemple avec transitions 2D


De nombreuses transitions à créer facilement avec un assistant pour des effets multiples, plein écran, gestion d'albums
et autres possibilités .


22 belles transitions "doubles" ( soit
44 effets ) + 7 simples. Toutes les
options de paramétrage nécessaires.
Beau diaporama !

temp04
temp04
temp04
iPresenter     FREE
JGALLERY     FREE
iView     FREE

De belles transitions qui "effeuillent" les images. On les crée soi même selon son inspiration. Beau diaporama.
fleche111 Exemple avec le fond du site


Un diaporama avec 68 transitions et 3 modes (Standard, Slidder et Plein Écran), des albums et nombreux paramètres.
fleche111 Exemple avec le fond du site


35 belles transitions. Présentation agréable avec toutes les options de
paramétrage nécessaires. 
fleche111  Autre exemple "Responsive"

temp04
Banner_rotator
Jawdropper
PANEL GALLERY     FREE
BANNER ROTATOR     11 $
JAWDROPPER     6 $

59 transitions, dont 44 en "barres" mais tellement belles ( + jackpot ). Entièrement paramétrable. Aucun "contrôle".


+ de 60 transitons variées avec de beaux effets "easing" . Un excellent diaporama complémentaire.
fleche111  Exemple avec image de fond


22 transtions (+22 variantes) dont une transition unique à ce diaporama : lightBeam. Un diaporama très sympa, passe partout.

temp05
temp04
temp04
GALLERIA     29 $
REFINE SLIDE     FREE
CJ SHUFFLE     5 $

Un "Slider", donc 5 transitions de base, mais avec" lightbox" et "plein écran". Belle présentation. Version mini gratuite.
fleche111  Thème "Azur"


Diaporama soigné : 12 effets 2D et 2 effets 3D "Cube". Facilement paramétrable. ( la 3D devient 1/2 rotations sur Internet Explorer ). 
Version IE sans 3D.

Des photos empilées qui défilent
en glissant les unes sur les autres.
Une façon originale d'envisionner quelques unes.



  Petits_diaporamas      PETITS DIAPORAMAS (POUR CONTENUS DE PAGES )

temp04
temp04
temp04
COIN SLIDER     FREE
AVIASLIDER      14 $
JQUERY IMAGE CUBE     FREE

Petit diaporama complémentaire et
simple avec des effets de blocs. Dans le même concept que jqFancyTransitions

Petit diaporama avec 3 transitions (mais par une seule pour chaque diaporama), paramétrables en plusieurs options.

Un petit diaporama simple avec un bel
effet unique de cube pivotant dans toutes les directions. Paramétrable.


  Petits_diaporamas     LOGICIELS

temp04
temp04
temp04
CSSLIDER     FREE
AMAZING SLIDER      69 $
WOW SLIDER      69 $

Logiciel
pur CSS vraiment gratuit et convivial. En développent : à suivre, avec de nouveaux effets de transitions à venir.

9 transitions et plusieurs "thèmes".
Logiciel entièrement paramétrable et conception rapide. Les 2 effets 3D deviennent des 1/2 rotations sur Internet Explorer  !

21 transitions (mais par une seule pour chaque diaporama) et plusieurs thèmes. Logiciel entièrement paramétrable.
 
 
  Petits_diaporamas     ASTUCE POUR INTÉGRER DE LA MUSIQUE AUX DIAPORAMAS
 

Ici, la plupart des diaporamas ne gèrent pas cette fonction.
Il suffit d'insérer un petit lecteur audio en flash sur la page de façon invisible qui démarre automatiquement et configuré en lecture en boucle.

Pour  cela il existe un excellent lecteur : devplayer-vol.swf                                         Télécharger dewplayer-vol.swf   téléchargement

1 /  Placer le fichier dewplayer-vol.swf   ( 10 Ko ) dans le même dossier que la page.        ( n'existe plus chez Alsacreation )

2 / Insérer ce code en tout en début du BODY (  Copier le code ) :

<object type="application/x-shockwave-flash" data="dewplayer-vol.swf" width="0" height="0"
id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="dewplayer-vol.swf" />
<param name="flashvars" value="mp3=../musique/morceau.mp3&amp;autostart=true&amp;autoreplay=1" />
</object>

 -  autostart=true pour lancer automatiquement la lecture ( ne pas oublier &amp; pour séparer les options ).
 -  autoreplay=1 pour relancer automatiquement la lecture en fin de morceau ( en boucle ).
 -  width="0" : largeur = 0  ( invisible ).
 -  height="0" : hauteur = 0  ( invisible ).

Voici le lecteur visible à écouter :



ATTENTION : avec Google Chrome, on ne peut pas activer le Player visible ici, car cette page a une protection contre le surlignage ( par contre le Player invisible inséré aux diaporamas ne pose aucun problème ).
Sinon tout cela fonctionne très bien avec une page sans cette protection.

Source : le site de  Dewplayer chez  Alsacreation ( GRATUIT )

 

ATTENTION : ne fonctionne pas sur un OS d'APPLE, définitivement fâché avec la technologie "Flash".
On peut alors substituer le lecteur flash avec un lecteur audio HTML5 avec à minima les deux formats : .ogg, et .mp3 ( éventuellement .wav, selon le navigateur ).  Voir la balise Audio HTML5.

 

  fleche011  Voici donc une solution universelle simple ( testée sur les principaux navigateurs ) :

 

<audio autoplay loop width="0" height="0">
<source src="music/melingo.mp3" type="audio/mp3" />
<source src="music/melingo.ogg" type="audio/ogg" />
Votre navigateur ne supporte pas l'audio HTML5.
</audio>

 

- La propriété "controls" est ignorée : pas d'affichage du lecteur ( inséré de façon invisible comme désiré ).

- La propriété "autoplay" indique que le fichier son doit être lu automatiquement lorsqu'il est chargé.

- La propriété "loop" indique que le fichier son doit être joué en boucle.

- Les propriétés width="0" et height="0" sont optionnelles ( précaution vis à vis d'un navigateur "exotique" )

 

Si l'on veut un lecteur visible, on ajoute la propriété "controls" sans width="0" height="0" ( non pris en compte avec la propriété "controls"). Le code est placé à l'endroit de la page où l'on désire que le lecteuir apparaisse ( je n'ai pas mis la propriété "autoplay" pour ne pas avoir la musique au chargement de cette page) :

 

<audio controls loop>
<source src="music/melingo.mp3" type="audio/mp3" />
<source src="music/melingo.ogg" type="audio/ogg" />
Votre navigateur ne supporte pas l'audio HTML5.
</audio>

 

 
bas  Double-clic sur la page pour revenir en haut de page
              visites                                          Webmaster:                   :                  
Haut de page