WebCssDesign

Diaporama style Apple CSS jQuery

• Accueil
• Ajax
• Diaporama style Apple CSS jQuery

Un petit tutoriel du très bon site Tutorialzine pour créer un diaporama avec le style Apple avec un peu de CSS et de jQuery.
Très jolie diaporama qui reprend le fameux thème du site Apple, il s’agit ici une succession de div avec un défilement horizontal du plus bel effet.

Ici pas de bases de données, tout ce passe dans la page html.

Etape HTML:

<div id="main">
 <div id="gallery">
  <div id="slides">
   <div><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
   <div><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
   <div><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>

  </div>
  <div id="menu">
   <ul>
    <li>&nbsp;</li>
    <li><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li>
    <li><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li>
    <li><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
   </ul>
  </div>
 </div>
</div>

Etape CSS:

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}

body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;

	/* CSS3 Rounded Corners */

	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;

	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;

	border:1px solid white;

	background:url(img/panel.jpg) repeat-x bottom center #ffffff;

	/* The width of the gallery */
	width:920px;
	overflow:hidden;
}

#slides{
	/* This is the slide area */
	height:400px;

	/* jQuery changes the width later on to the sum of the
widths of all the slides. */
	width:920px;
	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:45px;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}

li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}

Vous noterez l’utilisation de propriétés spécifiques au CSS3, box-shadow et border-radius prisent en charge que par Safari, Chrome et Firefox pour l’instant.

Etape JAVASCRIPT:

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	var totWidth=0;
	var positions = new Array();

	$('#slides .slide').each(function(i){
		/* Loop through all the slides and store their accumulative widths
in totWidth */
		positions[i]= totWidth;
		totWidth += $(this).width();

		/* The positions array contains each slide's commulutative offset
from the left part of the container */

		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
	});

	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the
slides combined */

	$('#menu ul li a').click(function(e){

		/* On a thumbnail click */
		$('li.menuItem').removeClass('act').addClass('inact');
		$(this).parent().addClass('act');

		var pos = $(this).parent().prevAll('.menuItem').length;

		$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
		/* Start the sliding animation */

		e.preventDefault();
		/* Prevent the default action of the link */
	});

	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
});

L’idée principale de ce script est de boucler sur les vignettes, aditionne leur largeur et assigne la valeur au conteneur de la vignette déterminé par son id.
Lorsque que vous cliquez sur la miniature le script calcule quelle vignette afficher et fait défiler les vignettes en assignant un margin négatif avec la fonction animate().

Voir le tutoriel original : http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
Voir la démo : http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html
Télécharger les fichier sources : http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.zip