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

Slide show with the plugin Cycle e jQuery

Characteristics of slide show:

mask in PNG format overlaid on photos
captions
photos in different sizes centered horizontally

Caption of the first slide

Caption of the second slide

Caption of the fifth slide

Graphics elements of Fireworks

Maschera slide.png

Code 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;
      }

Code 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
         });
      });

Code 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 of the first 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 of the second 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 of the fifth slide</p>
	</div>

</div>