Linea21

h1. Création d'une galerie d'images

h2. 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 :

<pre>

<code class="javascript">

<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>

</code>

</pre>

et le code HTML suivant :

<pre>

<code class="html">

<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>

</code>

</pre>

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

h2. 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/]].

<pre>

<code class="javascript">

<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>

</code>

</pre>

Et pour la partie HTML : 

<pre>

<code class="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>

</pre>