Slide show con caption utilizzando jQuery e il plug-in Cycle

Precedente Successiva Torna all'elenco Chiudi

Slide show con il plugin Cycle e jQuery

Caratteristiche dello slide show:

  • scorrimento continuo verso sinistra delle slide senza stacco
  • captions

 

Caption della prima slide che può andare anche su due righe di testo come in questo caso
Caption della seconda slide
Caption della terza slide
Caption della quarta slide
Caption della quinta slide

 

Elementi grafici di Fireworks

 

Codice CSS

      #slideshow {
         width: 400px;
         height: 440px;
         overflow: hidden;
         margin-top: 0px;
         margin-right: auto;
         margin-bottom: 0px;
         margin-left: auto;
         padding: 0px;
      }
      
      .slide {
         width: 400px;
         height: 440px;
         overflow: hidden;
      }
      
      .captionSlide {
         height: 40px;
         width: 392px;
         text-align: left;
         background-image: url(Immagini/sfondo_caption_trasparente.png);
         background-repeat: repeat;
         background-position: 0px 0px;
         top: -40px;
         position: relative;
         padding-top: 0px;
         padding-right: 4px;
         padding-bottom: 0px;
         padding-left: 4px;
         overflow: hidden;
      }
      

Codice JavaScript

      $(document).ready(function() {
          $('#slideshow').cycle({
            fx:		'fade',	// Dissolvenza
            speed:    1000,	// Velocità dell'animazione
            timeout:  2000,	// Tempo di permanenza di una slide
            pause:       1,	// Se 1 mette in pausa quando il mouse è sopra lo slide show, altrimenti 0
            startingSlide: 0	// Parte dalla prima slide
         });
      });
      

Codice Html

<div id="slideshow">

	<div class="slide">
		<img src="Foto/slide_quadrata_01.jpg" />
      <div class="captionSlide">Caption della prima slide che può andare anche su due righe di testo come in questo caso</div>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_02.jpg" />
		<div class="captionSlide">Caption della seconda slide</div>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_03.jpg" />
		<div class="captionSlide">Caption della terza slide</div>
	</div>
	<div class="slide">	
		<img src="Foto/slide_quadrata_04.jpg" />
		<div class="captionSlide">Caption della quarta slide</div>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_05.jpg" />
		<div class="captionSlide">Caption della quinta slide</div>
	</div>

</div>
         

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Località Cinquale - Italy
P.IVA 01027000452
C.F. VRSMTT71R16F704B
Privacy e Cookies
Preferenze Cookie