blog

s3Slider: un semplice Slideshow jQuery

sabato 4 Dicembre 2010

s3Slider un semplice Slideshow jQuery

s3Slider è un semplice Slideshow di immagini che utilizza la libreria jQuery.

s3Slider è un progetto di Boban Karišik, un freelance serbo, che ha condiviso gratuitamente il sorgente di questo plugin in jQuery.

Cercherò di spiegare come includere in un sito s3Slider:

Javascript

Prima di tutto includiamo i file javascript all’intero dell’HEAD: la liberia jQuery, scaricabile dal sito di jQuery e il javascript s3Slider.

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

Per inizializzare s3Slider e impostare il tempo di visualizzazione dell’immagine (il valore è in millisecondi) c’è bisogno delle seguenti istruzioni:

$(document).ready(function() { 
   $('#s3slider').s3Slider({ 
      timeOut: 4000 
   });
});

HTML

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Scrivi qui il testo</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Scrivi qui il testo</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

CSS

#s3slider { 
   width: 400px; 
   height: 300px;
   position: relative;
   overflow: hidden;
}
 
#s3sliderContent {
   width: 400px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
 
.s3sliderImage {
   float: left;
   position: relative;
   display: none;
}
 
.s3sliderImage span {
   position: absolute;
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #fff;
   display: none;
   top: 0;
 
   /*
       top: 0; -> il box con il testo verrà visualizzato in alto
       bottom: 0; -> il box con il testo verrà visualizzato in basso
   */
}
 
.clear {
   clear: both;
}

Supporto del Browser

  • Firefox 2.x (Win)
  • Firefox 3.0.3 (Win / Linux / Mac)
  • Opera 9.6 (Win / Linux)
  • Safari 3.0.3 (Win / Mac)
  • Internet Explorer 6 (Win)
  • Internet Explorer 7 (Win)
  • Google Chrome (Win)

s3slider esempio slideshow jquery

Copyright

Questo script è sotto licenza Creative Commons Attribuzione 2,5. Così lo si può utilizzare in tutti i vostri progetti, anche quelli commerciali.

Demo Download

Categorie: AJAX

Un Commento

  1. chiara

    26 Ottobre 2012, 12:59

    ti giuro che le ho provate tutte…ma non mi funziona!!!

Scrivi un commento

© 2010-2022 SimoneDesign.it    C.F. FRTSMN87P18F844X    P.I 01478670555  -  Licenza Creative Commons