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 :

<script>
    $(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 Slick)

Les inclusions :

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>

Le javascript :

<script>
    $('.slick-gallery').slick({
          dots: true,
          infinite: true,
          speed: 500,
          fade: true,
          autoplay: true,
          cssEase: 'linear'
        });
</script>

Et pour la partie HTML :

<div class="slick-gallery">
   <img alt="photo DSC08855.JPG" src="https://www.climataction-paysbasque.fr/library/userfiles/photos/forum/DSC08855.JPG" /> 
   <img alt="photo DSC08865.JPG" src="https://www.climataction-paysbasque.fr/library/userfiles/photos/forum/DSC08865.JPG" /> 
   <img alt="photo DSC08885.JPG" src="https://www.climataction-paysbasque.fr/library/userfiles/photos/forum/DSC08885.JPG" /> 
   <img alt="photo DSC08903.JPG" src="https://www.climataction-paysbasque.fr/library/userfiles/photos/forum/DSC08903.JPG" /> 
</div>

Diaporama externe (exemple en mode slide avec SlidesJS) - (obsolète)

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
    }