Diaporama automatique et fluide en 10 lignes de code.

Un diaporama/Slideshow automatique et fluide en quelques lignes de codes JavaScript avec la librairie Scriptaculous...
mercredi 24 mai 2006
par KreaComm’
popularité : 3%

Fonctionne parfaitement, testé sous Safari, Opera 8+, IE6+ et Firefox 1.5+.

Je suis tombé par hasard sur ces bouts de codes permettant de créer un diaporama à défilement automatique et ce de maniére trés fluide, et pour cause, il est basé sur la librairie Scriptaculous.

Premiere solution : Source : Slideshow JS par Code Snippets

  1. <div id="slideshow1" class="slide"><div>frame 1</div></div>
  2. <div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
  3. <div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
  4. <div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>
Télécharger
  1. <script type="text/javascript">
  2.    
  3.     start_slideshow(1, 4, 2000);
  4.    
  5.     function start_slideshow(start_frame, end_frame, delay) {
  6.         setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
  7.     }
  8.                            
  9.     function switch_slides(frame, start_frame, end_frame, delay) {
  10.         return (function() {
  11.             Effect.Fade('slideshow' + frame);
  12.             if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
  13.             setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
  14.             setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
  15.         })
  16.     }
  17. </script>
Télécharger

Seconde solution : Source : Easy Scriptaculous Slideshow

  1. var album = {
  2.   startup: function() {
  3.     new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds
  4.   },
  5.   cycle: function() {
  6.     new Effect.Fade('image', { // the id of the <DIV> containing the photos
  7.       duration: 1,
  8.       fps: 50,
  9.       afterFinish: function() {
  10.         new Ajax.Updater('image','/album/next', { // URL for next <IMG> tag
  11.           asynchronous: true,
  12.           onSuccess: function() {
  13.             new Effect.Appear('image', {
  14.               duration: 1,
  15.               fps: 50,
  16.               queue:'end'
  17.             })
  18.           }
  19.         })
  20.       }
  21.     })
  22.   }
  23. }
  24.  
  25. window.onload = album.startup
Télécharger

Une troisième solution s’offre à vous, version améliorée.

Edit du 20/08 : Une autre alternative pour créer un fondu automatique (diaporama ou slideshow) avec des bloc html (pas d’ajax) : Slideshow xhtml avec Scriptaculous


Code Snippets > Slideshow

Commentaires

Navigation

Articles de la rubrique