Script automatique

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.

http://www.slidesjs.com/

kw: galerie, gallery, sliders

Trop top, outil simplissime et très efficace pour faire des sliders (galeries photos déroulantes)

<!doctype html>
<head>
  <style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }
  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="jquery.slides.min.js"></script>

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>
</head>
<body>
  <div id="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
  </div>
</body>

http://www.slidesjs.com/

l'outil sur le site http://www.slidesjs.com/

le script jquery.slides.js sur votre serveur ou utiliser la version de l'uni: http://cms.unige.ch/outils/js/jquery.slides.js

Mettez vos photos dans un répertoire créé par vos soins et lister les noms de fichier, exemple:

url= http://www.unige.ch/presse/phototheque/pics/

polar1.jpg
polarcanard-siffleur.jpg
polarCrumley1cadence.jpg
polarCrumleyBanditCochon.jpg
polarCrumleyContreeFinale.jpg
polar_crumley_danse_ours.jpg
polarCrumley.jpg
polarCrumleyPutes.jpg
polarCrumleyTirAuPigeon.jpg
polardancingbear.jpg
polardernier-baiser.jpg
polarDetectiveNovel1.jpg
polarDetectiveNovel.jpg
polarfausse-piste.jpg
polar.jpg
polarMasque.jpg

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="/js/slides/jquery.slides.min.js"></script>
 <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  <script>
    $(function() {
      $('#slides1').slidesjs({
        width: 250,
        height: 250,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true,
          pauseOnHover: true,
          restartDelay: 2500
        },
        pagination: false
 
      });
    });
  </script>
  <!-- End SlidesJS Required -->
  <div id="slides1" style="width: 60%">

<img alt="Photo by: author" src='/pics/polar/polar1.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarcanard-siffleur.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarCrumley1cadence.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarCrumleyBanditCochon.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarCrumleyContreeFinale.jpg'>
<img alt="Photo by: author" src='/pics/polar/polar_crumley_danse_ours.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarCrumley.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarCrumleyPutes.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarCrumleyTirAuPigeon.jpg'>
<img alt="Photo by: author" src='/pics/polar/polardancingbear.jpg'>
<img alt="Photo by: author" src='/pics/polar/polardernier-baiser.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarDetectiveNovel.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarfausse-piste.jpg'>
<img alt="Photo by: author" src='/pics/polar/polarMasque.jpg'>

  </div>
<p><em>Slides: open source <a href="http://www.slidesjs.com/">http://www.slidesjs.com/</a></em></p>