Con jQuery Jssor è possibile creare slideshow di ogni tipo (a pagina intera, gallerie di immagini, slide show, verticali, con schede e molto altro ancora) in modo semplice e personalizzabile.

Inoltre, i componenti di interfaccia realizzati con jQuery Jssor sono ottimizzati per i dispositivi mobili.

Creare una slideshow con jquery jssor

Creare una slideshow con jquery jssor

Jssor è rilasciato con licenza MIT ed è possibile utilizzarlo anche senza jQuery.

La slideshow di base con jQuery Jssor

Inserire nel documento il seguente codice di marcatura per definire l’area della slide show e le immagini da visualizzare al suo interno. Adattare le proprietà width ed height presenti nell’attributo style dell’elemento #container1 e del div al suo interno, alla larghezza e all’altezza delle immagini da visualizzare nella slide show.

<div id="container1" style="position: relative; top: 0px; left: 0px; width: 400px; height: 300px;">
 <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 400px; height: 300px;">
  <div><img u="image" src="images/1.png" /></div>
  <div><img u="image" src="images/2.png" /></div>
  <div><img u="image" src="images/3.png" /></div>
  <div><img u="image" src="images/4.png" /></div>
  <div><img u="image" src="images/5.png" /></div>
 </div>
</div>

Inserire una copia di jQuery e del plugin per jQuery, che si chiama jssor.slider.mini.js, e poi attivare il plugin come indicato nel seguente esempio.

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jssor.slider.mini.js"></script>
<script>
  $(function ($) {
    var jssor_slider1 = new $JssorSlider$('slider1_container');
  });
</script>

Il costruttore di Jssor accetta anche delle opzioni che possono essere usate per controllare il plugin.

<script>
  $(function ($) {
    var options = { $AutoPlay: true };
    var jssor_slider1 = new $JssorSlider$('container1', ptions);
  });
</script>

Nell’esempio viene attivata la riproduzione automatica delle immagini con la proprietà autoplay.

I controlli di spostamento tra le immagini

Per visualizzare i controlli di spostamento delle immagini sono necessarie alcune modifiche. Prima di tutto aggiungere i controlli nel codice html.

<div id="container1" style="position: relative; top: 0px; left: 0px; width: 400px; height: 300px;">
 <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 400px; height: 300px;">
    <div><img u="image" src="images/1.png" /></div>
    <div><img u="image" src="images/2.png" /></div>
    <div><img u="image" src="images/3.png" /></div>
    <div><img u="image" src="images/4.png" /></div>
    <div><img u="image" src="images/5.png" /></div>
  </div>
  <span u="arrowleft" class="jssora01l" style="top: 123px; left: 8px;"> </span>
  <span u="arrowright" class="jssora01r" style="top: 123px; right: 8px;"> </span>
</div>

Per visualizzare le due frecce ai lati della slide show sono necessarie le seguenti classi css da includere nel proprio foglio di stile.

.jssora01l, .jssora01r {
  display: block;
  position: absolute;
  width: 45px;
  height: 45px;
  cursor: pointer;
  background: url(images/a01.png) no-repeat;
  overflow: hidden;
}
.jssora01l {background-position: -8px -38px;}
.jssora01r {background-position: -68px -38px;}
.jssora01l:hover {background-position: -128px -38px;}
.jssora01r:hover {background-position: -188px -38px; }
.jssora01l.jssora01ldn {background-position: -8px -38px;}
.jssora01r.jssora01rdn {background-position: -68px -38px;}

Nella classe .jssora01l è indicata l’immagine da utilizzare come controllo da scegliere tra quelle disponibili nella cartella img del plugin.

Infine, aggiungere le opzioni per i controlli di navigazione ($ArrowNavigatorOptions) che consentono di definire, tra le altre cose, il posizionamento dei controlli e il passo di spostamento.

$(function ($) {
var options = { 
   $AutoPlay: true,
   $ArrowNavigatorOptions: {
   $Class: $JssorArrowNavigator$,
   $ChanceToShow: 2,
   $AutoCenter: 0, // 0 No (def), 1 Horizontal, 2 Vertical, 3 Both
   $Steps: 1
   }};
   var jssor_slider1 = new $JssorSlider$('container1', options);
});

Altre opzioni ed esempi sui controlli di navigazione sono disponibili nel sito ufficiale del plugin.

Adattare la slideshow ai dispositivi

Al momento la slideshow ha una dimensione fissa ma per renderla adattabile alla larghezza dei diversi dispositivi modificare lo script come mostrato di seguito.

<script>
$(function ($) {
var options = { 
    $AutoPlay: true,
    $ArrowNavigatorOptions: {
      $Class: $JssorArrowNavigator$,
      $ChanceToShow: 2,
      $AutoCenter: 0, // 0 No (def), 1 Horizontal, 2 Vertical, 3 Both
      $Steps: 1
}};
  var jssor_slider1 = new $JssorSlider$('container1', options);
  // Responsivefunction 
  ScaleSlider() {
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
    if (parentWidth)
      jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));
    else
      window.setTimeout(ScaleSlider, 30);
  }
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
</script>

La funzione ScaleSlider() si occupa del ridimensionamento automatico della slideshow e sarà eseguita quando la pagina viene caricata, quando la finestra viene ridimensionata e quando cambia l’orientamento del dispositivo.

Le dimensioni delle immagini vengono automaticamente ridotte o aumentate in base alla dimensione della finestra e perciò si consiglia di utilizzare immagini sufficientemente grandi per evitare che la qualità degradi troppo quando vengono ingrandite.

Informazioni e demo sono disponibili nel sito ufficiale del plugin.