在本教程中，我们将创建一个具有宝丽来外观的图像库。我们将会有一些专辑，将会扩展到一些稍微旋转的缩略图，在悬停的时候弹出。一旦点击缩略图，完整的图像将从底部滑出。在完整的图像视图中，用户可以浏览图片或简单地选择要显示的另一个缩略图。

对于这个画廊，我们将使用2D转换插件来进行旋转。

演示中使用的漂亮照片是由才华横溢的Tetsumo拍的。访问他的博客。

让我们开始吧!

标记

我们将把所有的HTML都包含在一个div中，其中包含类“pp_gallery”。它将由加载div组成，当查看完整的图像和主缩略图容器时，将出现导航。

在缩略图容器内，将有类“pp_thumbContainer”，我们将有几张唱片和一个div的div，用于返回到相册视图。每一张专辑都将包含一个包含有“内容”的div标签的缩略图。我们还将包括一个div元素，用于描述专辑本身。

<div id="pp_gallery" class="pp_gallery"><div id="pp_loading" class="pp_loading"></div><div id="pp_next" class="pp_next"></div><div id="pp_prev" class="pp_prev"></div><div id="pp_thumbContainer"><div class="album"><div class="content"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" /><span>The Sixties by Tetsumo</span></div><div class="content"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" /><span>The Sixties by Tetsumo</span></div>...			<div class="descr">The Sixties			</div></div><div class="album" style="bottom:-90px;">...		</div>...		<div class="pp_back">Albums</div></div></div>

动态创建的HTML结构完整图像预览将如下:

<div id="pp_preview" class="pp_preview"><img src="images/album1/1.jpg" /><div class="pp_descr"><span>Description</span></div></div>

现在，让我们来看看它的风格。

CSS

我们将从重置和一些一般的风格开始:

*{	margin:0;	padding:0;}body{	background:#000 url(../bg.jpg) repeat center center;	font-family:"Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;	font-size:12px;	color: #fff;	overflow:hidden;}

一个结构化的背景非常适合，所以我们选择添加一个木材纹理。你可以在网络上找到更多的纹理。

接下来，我们将在预览模式下，对加载div和浏览图片进行导航:

.pp_loading{	display:none;	position:fixed;	top:50%;	left:50%;	margin:-35px 0px 0px -35px;	background:#fff url(../icons/loader.gif) no-repeat center center;	width:70px;	height:70px;	z-index:999;	opacity:0.7;	-moz-border-radius:10px;	-webkit-border-radius:10px;	border-radius:10px;}.pp_next, .pp_prev{	cursor:pointer;	top:50%;	margin-top:-16px;	width:32px;	height:32px;	position:fixed;	text-align:center;	border:1px solid #111;	color:#fff;	-moz-box-shadow:0px 0px 3px #000;	-webkit-box-shadow:0px 0px 3px #000;	box-shadow:0px 0px 3px #000;}.pp_next{	right:-40px;	background:#222 url(../icons/next.png) no-repeat center center;}.pp_prev{	left:-40px;	background:#222 url(../icons/prev.png) no-repeat center center;}

加载div设置为页面的中心，使用50%的负边缘技巧。当位置固定时，我们可以将顶部设置为50%，并在元素宽度的一半(或高度)中添加一个顶部和左边的边距。

我们对导航项也是一样的，只是这里只会垂直地将元素居中。

缩略图容器将放置在页面底部:

#pp_thumbContainer{	position:fixed;	bottom:0px;	left:0px;	height:65px;	width:100%;}

最初的专辑是隐藏的。当我们加载页面时，页面将从底部开始滑动，因此我们将最初的底部值设置为- 90个像素:

#pp_thumbContainer .album{	position:absolute;	width:200px;	height:65px;	bottom:-90px;}

左边的价值定位的专辑将在页面加载动态计算。我们将把所有的专辑均匀地分布在整个页面的宽度上。

对专辑和背面元素的描述将分享一些风格:

.album .descr,.pp_back{	position:absolute;	bottom:0px;	left:-16px;	background:#222;	text-align:center;	border:1px solid #111;	padding:5px;	cursor:pointer;	width:169px;	color:#fff;	cursor:pointer;	text-shadow:0px 0px 1px #fff;	-moz-box-shadow:1px 1px 4px #000;	-webkit-box-shadow:1px 1px 4px #000;	box-shadow:1px 1px 4px #000;}

…但不是全部。我们将覆盖并添加特定于该值的值。pp_back类:

.pp_back{	text-transform:uppercase;	bottom:120px;	left:-100px;	width:80px;}

用于图像和图像标题的包装将具有以下样式:

#pp_thumbContainer .content{	position:absolute;	top:0px;	height:155px;	cursor:pointer;}

这些包装器也将在我们的JavaScript中动态地扩展到位置。我们将顶端的值设置为0，这样所有的缩略图都对齐到缩略图容器的顶端。我们不想让竖的缩略图突出来。

缩略图将有一个白色边框和一个框阴影:

#pp_thumbContainer img{	border:5px solid #fff;	-moz-box-shadow:1px 1px 7px #000;	-webkit-box-shadow:1px 1px 7px #000;	box-shadow:1px 1px 7px #000;}

每个图像的描述都是不可见的。我们只会用它来填充整个视图的description元素。

#pp_thumbContainer .content span{	display:none;}

完整图像的包装器将被放置在页面的外部，将顶部的值设置为150%。一旦图像被加载，我们将从底部滑动它。我们将左边的值设置为50%，因为我们想要将图像居中。因为我们还不知道图片的宽度和高度，所以我们还不能设置任何的负值。我们会在JavaScript函数中做这个。

.pp_preview{	position:fixed;	top:150%;	left:50%;}

完整的图像在其底部将具有更大的白色边界，在此我们将插入下面的描述:

.pp_preview img{	position:absolute;	top:0px;	left:0px;	border:10px solid #fff;	border-bottom:45px solid #fff;	-moz-box-shadow:1px 1px 7px #000;	-webkit-box-shadow:1px 1px 7px #000;	box-shadow:1px 1px 7px #000;}

描述将位于预览元素的底部。在JavaScript中，我们会动态地设置预览div的宽度和高度，这样描述将被定位在图像的较厚的底部边框上。

.pp_descr{	height:45px;	line-height:45px;	font-size:20px;	width:100%;	bottom:0px;	left:0px;	position:absolute;	text-align:center;	color:#00021c;}

我们将使用一个漂亮的手写字体来对描述进行描述(见最后)。

现在，让我们添加一些真正的魔法!

JavaScript

在整个JavaScript中会有很多动画。当页面加载时，相册会从底部滑动。一旦一个相册被点击，我们将通过给他们一个按左的值来均匀的传播缩略图。当我们选择缩略图时，我们需要创建预览div并将其从底部滑动。图像将被调整大小以使其适合于窗口。

让我们先定义一些初始变量。首先，我们想知道我们是否在处理Internet Explorer，因为我们不想使用完整图像的旋转(它与动画中的幻灯片一起使用时是有问题的):

var ie 			= false;if ($.browser.msie) {ie = true;}

我们将使用一些索引变量来导航和保存一些元素:

//current album/image displayedvar current		= -1;var album		= -1;//windows widthvar w_width 	= $(window).width();//cachingvar $albums 	= $('#pp_thumbContainer div.album');var $loader		= $('#pp_loading');var $next		= $('#pp_next');var $prev		= $('#pp_prev');var $images		= $('#pp_thumbContainer div.content img');var $back		= $('#pp_back');

我们希望在整个页面中均匀地分布这些相册，因此我们将计算其左值:

var nmb_albums	= $albums.length;var spaces 		= w_width/(nmb_albums+1);var cnt			= 0;//preload all the images (thumbs)var nmb_images	= $images.length;var loaded 	= 0;$images.each(function(i){	var $image = $(this);$('<img />').load(function(){++loaded;		if(loaded == nmb_images){			//let's spread the albums evenly at the bottom of the page$albums.each(function(){				var $this 	= $(this);++cnt;				var left	= spaces*cnt - $this.width()/2;$this.css('left',left+'px');$this.stop().animate({'bottom':'0px'},500);}).unbind('click').bind('click',spreadPictures);			//also rotate each picture of an album with a random number of degrees$images.each(function(){				var $this = $(this);				var r = Math.floor(Math.random()*41)-20;$this.transform({'rotate'	: r + 'deg'});});}}).attr('src', $image.attr('src'));});

展布功能也会做类似的事情:它会把所选的相册移到左边，然后将所有的缩略图都传播开来:

function spreadPictures(){	var $album = $(this);	//track which album is openedalbum = $album.index();	//hide all the other albums$albums.not($album).stop().animate({'bottom':'-90px'},300);		$album.unbind('click');		//now move the current album to the left//and at the same time spread its images throughout//the window, rotating them randomly, hide the description of the album//store the current left for the reverse operation$album.data('left',$album.css('left')).stop().animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200);		var total_pic 	= $album.find('.content').length;		var cnt			= 0;		//each picture$album.find('.content').each(function(){			var $content = $(this);++cnt;			//window widthvar w_width 	= $(window).width();			var spaces 		= w_width/(total_pic+1);			var left		= (spaces*cnt) - (140/2);			var r 			= Math.floor(Math.random()*41)-20;			//var r = Math.floor(Math.random()*81)-40;$content.stop().animate({'left':left+'px'},500,function(){$(this).unbind('click').bind('click',showImage).unbind('mouseenter').bind('mouseenter',upImage).unbind('mouseleave').bind('mouseleave',downImage);}).find('img').stop().animate({'rotate': r+'deg'},300);		$back.stop().animate({'left':'0px'},300);});}

现在，我们将定义当我们点击项目返回到相册视图时会发生什么。我们将把这张专辑的动画制作到它的初始位置，然后再把其他专辑放上去。如果用户正在查看完整的图片，我们将会把它从窗口(hidecurrent图画)中滑出。

$back.bind('click',function(){	$back.stop().animate({'left':'-100px'},300);hideNavigation();	//there's a picture being displayed//lets slide the current one upif(current != -1){hideCurrentPicture();}	var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');	$current_album.stop().animate({'left':$current_album.data('left')},500).find('.descr').stop().animate({'bottom':'0px'},500);	$current_album.unbind('click').bind('click',spreadPictures);	$current_album.find('.content').each(function(){				var $content = $(this);				$content.unbind('mouseenter mouseleave click');				$content.stop().animate({'left':'0px'},500);});	$albums.not($current_album).stop().animate({'bottom':'0px'},500);});

下一个功能，称为showImage，将通过从底部滑动来显示完整的图像。如果有另一个图像被显示出来，我们就会把它滑上去。为了对预览进行定心，我们需要根据图像的宽度和高度设置它的负边距。我们还将随机旋转预览:

function showImage(nav){	if(nav == 1){		//reached the first oneif(current==0){			return;}		var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')').find('.content:nth-child('+parseInt(current)+')');		//reached the last oneif($content.length==0){current-=2;			return;}}	elsevar $content 	= $(this);	//show ajax loading image$loader.show();	//there's a picture being displayed//lets slide the current one upif(current != -1){hideCurrentPicture();}current 				= $content.index();	var $thumb				= $content.find('img');	var imgL_source 	 	= $thumb.attr('alt');	var imgL_description 	= $thumb.next().html();	//preload the large image to show$('<img style=""/>').load(function(){		var $imgL 	= $(this);		//resize the image based on the windows sizeresize($imgL);		//create an element to include the large image//and its descriptionvar $preview = $('<div />',{			'id'		: 'pp_preview',			'className'	: 'pp_preview',			'html' 	: '<div class="pp_descr"><span>'+imgL_description+'</span></div>',			'style'		: 'visibility:hidden;'});		$preview.prepend($imgL);$('#pp_gallery').prepend($preview);		var largeW 	= $imgL.width()+20;		var largeH 	= $imgL.height()+10+45;		//change the properties of the wrapping div//to fit the large image sizes$preview.css({			'width'			:largeW+'px',			'height'		:largeH+'px',			'marginTop'		:-largeH/2-20+'px',			'marginLeft'	:-largeW/2+'px',			'visibility'	:'visible'});Cufon.replace('.pp_descr');		//show navigationshowNavigation();		//hide the ajax image loading$loader.hide();		//slide up (also rotating) the large imagevar r 			= Math.floor(Math.random()*41)-20;		if(ie)			var param = {				'top':'50%'};		elsevar param = {				'top':'50%',				'rotate': r+'deg'};		$preview.stop().animate(param,500);}).error(function(){		//error loading image.//Maybe show a message : 'no preview available'}).attr('src',imgL_source);}

接下来的两个函数通过图像来处理导航:

//click next image$next.bind('click',function(){current+=2;showImage(1);});//click previous image$prev.bind('click',function(){showImage(1);});

该功能的hidecurrent图景将使预览幻灯片出现。如果浏览器是IE，我们将不会使用任何旋转动画：

//slides up the current picturefunction hideCurrentPicture(){current = -1;	var r 	= Math.floor(Math.random()*41)-20;	if(ie)		var param = {			'top':'-100%'};	elsevar param = {			'top':'-100%',			'rotate': r+'deg'};$('#pp_preview').stop().animate(param,500,function(){$(this).remove();});}

showNavigation和hideNavigation功能将负责显示和隐藏导航项:

//shows the navigation buttonsfunction showNavigation(){	$next.stop().animate({'right':'0px'},100);	$prev.stop().animate({'left':'0px'},100);}//hides the navigation buttonsfunction hideNavigation(){	$next.stop().animate({'right':'-40px'},300);	$prev.stop().animate({'left':'-40px'},300);}

当悬停在一个缩略图上时，我们希望它向上移动一点并稍微旋转:

function upImage(){	var $content 	= $(this);	$content.stop().animate({		'marginTop'		: '-70px'},400).find('img').stop().animate({'rotate': '0deg'},400);}

当鼠标离开当前悬停的缩略图时，我们想让它向后掉落，再随机旋转:

function downImage(){	var $content 	= $(this);	var r 			= Math.floor(Math.random()*41)-20;$content.stop().animate({		'marginTop'		: '0px'},400).find('img').stop().animate({'rotate': r + 'deg'},400);}

最后，我们将使用一个调整大小的函数来将完整的图像放到窗口中:

function resize($image){	var widthMargin		= 50var heightMargin 	= 200;	var windowH = $(window).height()-heightMargin;	var windowW = $(window).width()-widthMargin;	var theImage = new Image();theImage.src = $image.attr("src");	var imgwidth = theImage.width;	var imgheight = theImage.height;	if((imgwidth > windowW)||(imgheight > windowH)){		if(imgwidth > imgheight){			var newwidth = windowW;			var ratio = imgwidth / windowW;			var newheight = imgheight / ratio;theImage.height = newheight;theImage.width= newwidth;			if(newheight>windowH){				var newnewheight = windowH;				var newratio = newheight/windowH;				var newnewwidth =newwidth/newratio;theImage.width = newnewwidth;theImage.height= newnewheight;}}		else{			var newheight = windowH;			var ratio = imgheight / windowH;			var newwidth = imgwidth / ratio;theImage.height = newheight;theImage.width= newwidth;			if(newwidth>windowW){				var newnewwidth = windowW;				var newratio = newwidth/windowW;				var newnewheight =newheight/newratio;theImage.height = newnewheight;theImage.width= newnewwidth;}}}$image.css({'width':theImage.width+'px','height':theImage.height+'px'});}

由于我们对描述进行了描述，所以我们需要在HTML的头部添加以下几行代码:

<script src="js/cufon-yui.js" type="text/javascript"></script><script src="js/Note_this_400.font.js" type="text/javascript"></script>

你可以在fontsquirrel上找到这个漂亮的“注意”字体。

这是它!我们希望您喜欢本教程并发现它有用! !