img-polaroid
In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.
在本教程中，我们将创建一个具有宝丽来外观的图片库。 我们将提供一些相册，这些相册将扩展为悬停时弹出的略微旋转的缩略图集。 单击缩略图后，整个图像将从底部滑入。 在完整图像视图中，用户可以浏览图片，或简单地选择另一个要显示的缩略图。
For this gallery we will be using the 2D Transform plugin to animate rotations.
对于这个画廊，我们将使用2D变换插件为旋转动画。
The beautiful photos used in the demo are by talented Tetsumo. Visit his blog here.
演示中使用的精美照片是由有才华的Tetsumo制作的。 在这里访问他的博客。
Let’s get started!
让我们开始吧！
标记 (The Markup)
We are going to include all our HTML in a div with the class “pp_gallery”. It will consist of the loading div, the navigation that will appear when the full image is viewed and the main thumbnails container.
我们将把所有HTML都包含在“ pp_gallery”类的div中。 它包括加载div，查看完整图像时将出现的导航以及主要的缩略图容器。
Inside of the thumbnails container which will have the class “pp_thumbContainer”, we will have several divs for the albums and a div for going back to the album view. Each album will contain the thumbnails with a description wrapped in a div with the class “content”. We will also include a div element for the description of the album itself.
在缩略图容器(将具有“ pp_thumbContainer”类)的内部，我们将为相册提供多个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>
The HTML structure of the dynamically created full image preview will be the following:
动态创建的完整图像预览HTML结构如下：
<div id="pp_preview" class="pp_preview">
<img src="images/album1/1.jpg" />
<div class="pp_descr"><span>Description</span></div>
</div>
Now, let’s take a look at the style.
现在，让我们看一下样式。
CSS (The CSS)
We will start with a reset and some general styles for the body:
我们将从重置和身体的一些常规样式开始：
*{
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;
}
A structured background fits very nicely, so we choose to add a wood texture. You can find this and more textures on Webtreats.
结构化的背景非常适合，因此我们选择添加木材纹理。 您可以在Webtreats上找到此纹理以及更多纹理。
Next, we will style the loading div and the navigation for stepping through the pictures when we are in the preview mode:
接下来，我们将设置加载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;
}
The loading div is set to the center of the page by using the 50% negative margin trick. When the position is fixed, we can set the top and left to 50% and add a top and left margin to the negative value of half of the element’s width, or height, respectively.
使用50％负边距技巧将加载div设置为页面的中心。 当位置固定后，我们可以将顶部和左侧的边距设置为50％，并在元素的宽度或高度的一半的负值上分别添加顶部和左侧边距。
The same we do for the navigation items, just that here will only center the elements vertically.
我们对导航项所做的操作一样，只是在此处将元素垂直居中。
The thumbnails container will be positioned at the bottom of the page:
缩略图容器将位于页面底部：
#pp_thumbContainer{
position:fixed;
bottom:0px;
left:0px;
height:65px;
width:100%;
}
The albums are hidden initially. When we load the page, they will slide in from the bottom, so we will set the initial bottom value to -90 pixels:
专辑最初是隐藏的。 加载页面时，它们将从底部滑入，因此我们将初始底部值设置为-90像素：
#pp_thumbContainer .album{
position:absolute;
width:200px;
height:65px;
bottom:-90px;
}
The left value for the positioning of the albums will be calculated dynamically on page load. We will spread all the albums evenly throughout the width of the page.
相册位置的左侧值将在页面加载时动态计算。 我们将在页面的整个宽度上均匀分布所有相册。
The description of the album and the back element will share some styles:
专辑说明和back元素将共享一些样式：
.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;
}
…but not all. We will overwrite and add the values that are specific to the .pp_back class:
…但不是所有的。 我们将覆盖并添加特定于.pp_back类的值：
.pp_back{
text-transform:uppercase;
bottom:120px;
left:-100px;
width:80px;
}
The wrapper for the image and the image title will have the following style:
图像的包装和图像标题将具有以下样式：
#pp_thumbContainer .content{
position:absolute;
top:0px;
height:155px;
cursor:pointer;
}
These wrappers will also be spread into position dynamically in our JavaScript. We set the top value to 0, so that all the thumbnails align to the top of the thumbnails container. We don’t want vertical thumbnails to stick out.
这些包装器还将在我们JavaScript中动态散布到位置。 我们将top值设置为0，以便所有缩略图都与缩略图容器的顶部对齐。 我们不希望垂直缩略图突出。
The thumbnail will have a white border and a box shadow:
缩略图将带有白色边框和阴影框：
#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;
}
The description for each image is invisible. We will only use it to fill the description element for the full view.
每个图像的描述都是不可见的。 我们将仅使用它来填充完整视图的description元素。
#pp_thumbContainer .content span{
display:none;
}
The wrapper for the full image will be positioned outside of the page by setting the top value to 150%. Once the image is loaded, we will slide it in from the bottom. We are setting the left value to 50% since we want to center the picture. Since we don’t know the width and height of the picture yet, we cannot set any negative margins yet. We will do that in our JavaScript function.
通过将最高值设置为150％，整个图像的包装纸将位于页面外部。 加载图像后，我们将从底部将其滑入。 由于要将图片居中，我们将左侧值设置为50％。 由于我们尚不知道图片的宽度和高度，因此我们无法设置任何负边距。 我们将在JavaScript函数中执行此操作。
.pp_preview{
position:fixed;
top:150%;
left:50%;
}
The full image will have a bigger white border at its bottom where we will insert the description:
完整图片的底部会有一个较大的白色边框，我们将在其中插入说明：
.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;
}
The description will be at the bottom of the preview element. In the JavaScript we will set the width and height of the preview div to the one of the image dynamically, so the description will be positioned at the thicker bottom border of the image.
描述将在预览元素的底部。 在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;
}
We will cufonize the description using a nice hand written font (see at the end).
我们将使用漂亮的手写字体来简化描述(请参见最后)。
And now, let’s add some real magic!
现在，让我们添加一些真正的魔术！
JavaScript (The JavaScript)
There will be many animations throughout the JavaScript. The albums will slide in from the bottom when the page loads. Once an album is clicked, we will spread the thumbnails evenly by giving them an according left value. When we choose a thumbnail, we need to create the preview div and slide it in from the bottom. The image will get resized so that it fits into the window.
整个JavaScript中都会有许多动画。 页面加载时，相册将从底部滑入。 单击相册后，我们将通过为它们提供相应的左值来均匀分布缩略图。 选择缩略图时，我们需要创建预览div并将其从底部滑入。 图像将被调整大小以适合窗口。
Let’s start by defining some initial variables. First, we want to know if we are dealing with Internet Explorer since we don’t want to use the rotation of the full image here (it’s buggy when used together with the slide in animation):
让我们从定义一些初始变量开始。 首先，我们想知道我们是否正在使用Internet Explorer，因为我们不想在这里使用完整图像的旋转(当与动画幻灯片一起使用时，这是有问题的)：
var ie = false;
if ($.browser.msie) {
ie = true;
}
We will use some index variables for the navigation and save some elements:
我们将使用一些索引变量进行导航并保存一些元素：
//current album/image displayed
var current = -1;
var album = -1;
//windows width
var w_width = $(window).width();
//caching
var $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');
We want to spread the albums evenly throughout the page, so we will calculate the according left value:
我们希望将相册均匀地分布在整个页面上，因此我们将计算左值：
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'));
});
The spreadPictures function will do a similar thing: it will move the chosen album to the left and spread all the thumbnails:
SpreadPictures函数将执行类似的操作：它将选定的相册向左移动并展开所有缩略图：
function spreadPictures(){
var $album = $(this);
//track which album is opened
album = $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 width
var 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);
});
}
Now, we will define what happens when we click on the item to go back to the albums view. We will animate the album to its initial left position and slide the other albums up again. If the user was viewing a full image, we will make it slide up, out of the window (hideCurrentPicture):
现在，我们将定义当单击项目返回到相册视图时会发生什么。 我们将使该专辑动画到其初始左侧位置，然后再次向上滑动其他专辑。 如果用户正在查看完整图像，我们将使其向上滑动，使其脱离窗口(hideCurrentPicture)：
$back.bind('click',function(){
$back.stop().animate({'left':'-100px'},300);
hideNavigation();
//there's a picture being displayed
//lets slide the current one up
if(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);
});
The next function, called showImage, will display the full image by sliding it in from the bottom. If there was another image being shown, we will slide that one up. For centering the preview, we need to set its negative margins according to the width and height of the image. We will also rotate the preview randomly:
下一个名为showImage的函数将通过从底部向内滑动来显示完整图像。 如果显示了另一张图像，我们将其向上滑动。 为了使预览居中，我们需要根据图像的宽度和高度设置其负边距。 我们还将随机旋转预览：
function showImage(nav){
if(nav == 1){
//reached the first one
if(current==0){
return;
}
var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
.find('.content:nth-child('+parseInt(current)+')');
//reached the last one
if($content.length==0){
current-=2;
return;
}
}
else
var $content = $(this);
//show ajax loading image
$loader.show();
//there's a picture being displayed
//lets slide the current one up
if(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 size
resize($imgL);
//create an element to include the large image
//and its description
var $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 navigation
showNavigation();
//hide the ajax image loading
$loader.hide();
//slide up (also rotating) the large image
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'50%'
};
else
var 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);
}
The next two functions handle the navigation through the images:
接下来的两个功能处理图像导航：
//click next image
$next.bind('click',function(){
current+=2;
showImage(1);
});
//click previous image
$prev.bind('click',function(){
showImage(1);
});
The function hideCurrentPicture will make the preview slide up. We will not use any rotation animation if the browser is IE:
函数hideCurrentPicture将使预览向上滑动。 如果浏览器是IE，我们将不使用任何旋转动画：
//slides up the current picture
function hideCurrentPicture(){
current = -1;
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'-100%'
};
else
var param = {
'top':'-100%',
'rotate': r+'deg'
};
$('#pp_preview').stop()
.animate(param,500,function(){
$(this).remove();
});
}
The showNavigation and hideNavigation functions will take care of showing and hiding the navigation items:
showNavigation和hideNavigation函数将负责显示和隐藏导航项：
//shows the navigation buttons
function showNavigation(){
$next.stop().animate({'right':'0px'},100);
$prev.stop().animate({'left':'0px'},100);
}
//hides the navigation buttons
function hideNavigation(){
$next.stop().animate({'right':'-40px'},300);
$prev.stop().animate({'left':'-40px'},300);
}
When hovering over a thumbnail, we want it to move up a little and rotate slightly:
将鼠标悬停在缩略图上时，我们希望它稍微向上移动并稍微旋转：
function upImage(){
var $content = $(this);
$content.stop().animate({
'marginTop' : '-70px'
},400).find('img')
.stop()
.animate({'rotate': '0deg'},400);
}
When the mouse leaves the currently hovered thumbnail, we want it to drop back, rotating randomly again:
当鼠标离开当前悬停的缩略图时，我们希望它回落，再次随机旋转：
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);
}
And finally, we will use a resize function to fit the full image into the window:
最后，我们将使用调整大小功能将整个图像放入窗口中：
function resize($image){
var widthMargin = 50
var 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'});
}
Since we cufonize the description, we need to add the following lines to the head of the HTML:
由于我们简化了说明，因此需要在HTML的开头添加以下几行：
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Note_this_400.font.js" type="text/javascript"></script>
You can find the beautiful “Note This” font on www.fontsquirrel.com.
您可以在www.fontsquirrel.com上找到漂亮的“ Note This”字体。
And that’s it! We hope you enjoyed this tutorial and find it useful!!
就是这样！ 我们希望您喜欢本教程并发现它有用！！
翻译自: https://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/
img-polaroid