Création d'une galerie d'images¶

Diaporama natif (en mode overlay)¶

Linea21 utilise par défaut le plugin jquery Colorbox

Pour créer une galerie il suffit, directement depuis l'éditeur WYSIWYG, de déclarer les instructions javascript suivantes :

<p><!-- -- javascript ----></p>
    $(function(){
      $(".slideshow").colorbox({
           rel:'slideshow',
           slideshow:true,
           slideshowStart: "Démarrer le diaporama",
           slideshowStop: "Stopper le diaporama",
           slideshowSpeed: 3000,
           current: "image {current} de {total}",
           previous: "précédent",
           next: "suivant",
           close: "fermer",
      });
    });

</script>

et le code HTML suivant :

<p><a alt="yop" class="slideshow" href="../library/userfiles/images/images_DSC02023.jpg"><img class="nomouseover" src="../library/userfiles/images/images_DSC02023.jpg" style="height: 200px; width: 300px;" /></a></p>

<div id="slides2" style="display:none">
<p><a class="slideshow" href="../library/userfiles/images/images_DSC02030.jpg" title="yop">test</a></p>

<p><a class="slideshow" href="../library/userfiles/images/images_DSC02046.jpg" title="yop 2">test 2</a></p>

<p><a class="slideshow" href="../library/userfiles/images/images_DSC02053.jpg" title="yop 3">test 3</a></p>
</div>

La page ainsi créer affichera une image cliquable. Au clic, le diaporama sera automatiquement lancer.

Diaporama externe (exemple en mode slide avec SlidesJS)¶

L'exemple présenté ci-dessous utilise http://www.slidesjs.com/ et plus précisément http://www.slidesjs.com/examples/playing/.

<p><!-- -- javascript ----></p>
<script src="../path/js/Slides-SlidesJS-3/source/jquery.slides.min.js"></script><script>
    $(function(){
      $("#slides").slidesjs({
        width: 550,
        height: 350,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true,
          pauseOnHover: true,
          restartDelay: 2500
        }
      });
    });
</script>

Et pour la partie HTML :

<div class="slideshow-container">
<div id="slides">
<img class="nomouseover" src="http://placehold.it/550x350" />
<img class="nomouseover" src="http://placehold.it/550x350" />
<img class="nomouseover" src="http://placehold.it/550x350" />
<img class="nomouseover" src="http://placehold.it/550x350" />
<img class="nomouseover" src="http://placehold.it/550x350" />
</div>
</div>

Code CSS utilisé :

/*
* Slides-SlidesJS-3 */

    .slideshow-container {margin:0;}

   #slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../js/Slides-SlidesJS-3/examples/playing/img/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../js/Slides-SlidesJS-3/examples/playing/img/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }