Corso online Responsive Design per imparare a creare siti Web table-less responsivi con HTML5 e CSS3

sLideR (jQuery slidegallery plugin)

Pubblicato da Luca Ruggiero nella categoria Projects » » »

sLideR č un plugin per jQuery che genera una slidegallery in Javascript. L'idea m'č nata provando a personalizzare diversi plugin simili, tutti ottimi, ma molto pesanti e non facilmente configurabili: sLideR pesa meno di 1 Kb e la sua configurazione č molto semplice.

DEMO

Ecco un esempio di sLideR (clicca sulle frecce a destra ed a sinistra delle immagini):

DOWNLOAD

Distribuito con licenza GPL, č possibile modificarlo e distribuirlo, con la preghiera di citare sempre la fonte:

Luca Ruggiero - http://www.lucaruggiero.it/

Il file ZIP contiene i seguenti file:

Questi i file indispensabili da conservare nella cartella:

/sLideR

nella root del proprio sito.

Inoltre, nella cartella sono contenute delle foto di esempio (cancellabili) e l'esempio HTML statico.

CONFIGURAZIONE

Per prima cosa, richiamare nell'header della pagina jQuery e la libreria sLideR.js.

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/sLideR/sLideR.js"></script>

Quindi specificare lo script che permette di richiamare e configurare sLideR:

<script type="text/javascript">
$(document).ready(function(){
  // ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
  // sLideR (GPL) Powered by Luca Ruggiero - www.lucaruggiero.it
  // ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
  var sLideR_a = 1, sLideR_b = 3;
  sLideR(sLideR_a, sLideR_b, 5);
  $("#sLideR_dv").click(function(){
    sLideR(sLideR_a=sLideR_a-1, sLideR_b=sLideR_b-1, 5);
  });
  $("#sLideR_av").click(function(){
    sLideR(sLideR_a=sLideR_a+1, sLideR_b=sLideR_b+1, 5);
  });
// ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
});
</script>

In arancione sono evidenziati i parametri da modificare: il valore della variabile sLideR_b rappresenta il numero di foto da mostrare, mentre il terzo parametro della funzione sLideR() (che dev'essere sempre uguale nei tre richiami) rappresenta il numero di foto contenute nella gallery.

In fine, il codice HTML per la visualizzazione:

<div id="my_sLideR">
  <table id="tbl_sLideR" cellpadding="0" cellspacing="0">
  <tr>
    <td class="td_sLideR_sxdx">
      <a href="javascript:void(0)" id="sLideR_dv"><img src="/sLideR/sx_1.png"></a>
      <span id="sLideR_df"><img src="/sLideR/sx_2.png"></span>
    </td>
    <td id="sLideR_img">
      <img src="/sLideR/1.jpg" id="sLideR_1" class="sLideR">
      <img src="/sLideR/2.jpg" id="sLideR_2" class="sLideR">
      <img src="/sLideR/3.jpg" id="sLideR_3" class="sLideR">
      <img src="/sLideR/4.jpg" id="sLideR_4" class="sLideR">
      <img src="/sLideR/5.jpg" id="sLideR_5" class="sLideR">
    </td>
    <td class="td_sLideR_sxdx">
      <a href="javascript:void(0)" id="sLideR_av"><img src="/sLideR/dx_1.png"></a>
      <span id="sLideR_af"><img src="/sLideR/dx_2.png"></span>
    </td>
  </tr>
  </table>
</div>

Le unica porzione di codice su cui agire č l'elenco delle immagini, passando il percorso ed il nome delle foto da visualizzare nella gallery, avendo sempre cura di specificare la classe sLideR e di mantenere il numero progressivo degli ID:

<img src="/foto/pippo.jpg" id="sLideR_1" class="sLideR">
<img src="/foto/pluto.jpg" id="sLideR_2" class="sLideR">
<img src="/foto/paperino.jpg" id="sLideR_3" class="sLideR">

Trattandosi di codice HTML č possibile impostare link senza bisogno di impostare a zero il bordo all'immagine, essendo anche questo aspetto gią gestito da sLideR.

Inoltre č possibile realizzare da se le frecce direzionali, attive e non, nel formato che si preferisce (PNG, GIF, JPG e cosi via), modificando quindi il richiamo nei punti in cui compaiono nel codice HTML.

E' in fine importante ricordare di NON cambiare nome alle classi ed agli ID utilizzati nel codice HTML.

INFO SUL NOME

Il nome sLideR vuole sottolineare la sua funzionalitą e sono evidenziate con lettere maiuscole le iniziali del mio nome e cognome.

CANALI DEL BLOG
Hosting (11)
Linux (3)
Office (4)