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

Slide show con il plugin Cycle e jQuery

Caratteristiche dello slide show:

maschera in formato PNG sovrapposta alle foto
captions
foto in dimensioni differenti centrate orizzontalmente

Caption della prima slide

Caption della seconda slide

Caption della quinta slide

Elementi grafici di Fireworks

Maschera slide.png

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;
         text-align: center;
         overflow: hidden;
      }
      
      .photoslide {
         width: 400px;
         height: 400px;
         background-repeat: no-repeat;
         background-position: center;
      }
      
      .caption {
         text-align: center;
         height: 40px;
         width: 400px;
         overflow: hidden;
         margin: 0px;
         padding: 0px;
      }

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">
		<div style="background:url(Foto/slide_quadrata_01.jpg);" class="photoslide">
			<img src="Immagini/maschera_slide.png" />
		</div>
		<p class="caption">Caption della prima slide</p>
	</div>
	<div class="slide">
		<div style="background:url(Foto/slide_quadrata_02.jpg);" class="photoslide">
			<img src="Immagini/maschera_slide.png" />
		</div>
		<p class="caption">Caption della seconda slide</p>
	</div>
	<div class="slide">
		<div style="background:url(Foto/slide_quadrata_03.jpg);" class="photoslide">
			<img src="Immagini/maschera_slide.png" />
		</div>
	</div>
	<div class="slide">
		<div style="background:url(Foto/slide_quadrata_04.jpg);" class="photoslide">
			<img src="Immagini/maschera_slide.png" />
		</div>
	</div>
	<div class="slide">
		<div style="background:url(Foto/slide_quadrata_05.jpg);" class="photoslide">
			<img src="Immagini/maschera_slide.png" />
		</div>
		<p class="caption">Caption della quinta slide</p>
	</div>

</div>