本教程将创建一个全页照片墙画廊，使用jQuery实现。点击缩略图时，面板从底部滑动显示全图，点击全图时，面板滑回。全图视图中有过渡效果，屏幕调整时，图像自动适应。此外，还提供了浏览全图的功能和窗口大小调整时图像的自动适应。
jquery 照片墙抽奖
Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.
今天，我们将创建一个令人惊叹的整页照片墙画廊。 我们的想法是让整个页面充满拇指，当我们将鼠标悬停时，会获得很好的灯光效果。 单击图像后，面板会从底部向上滑动以显示完整图片。 单击完整图像时，拇指面板会从底部向后滑动。 这种效果给人的印象是，每次更改模式时，我们都将面板堆叠在一起。 在全图视图中，当浏览照片时，我们会添加一些不错的过渡效果。
In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!
另外，我们将使用一个功能来调整整个图像的大小，使其适应屏幕尺寸。 因此，当调整屏幕尺寸时，我们的图像将自动适应！
The beautiful images in the demo are from Vincent Boiteau’s photostream on Flickr.
演示中的精美图片来自Vincent Boiteau在Flickr上的照片流。
This tutorial will be a little bit more complex than usual, so I will give my best to explain things clearly.
本教程将比平时复杂一些，因此，我将尽我所能清楚地进行解释。
Let’s get started with the markup.
让我们开始标记。
标记 (The Markup)
The HTML structure consists of three main containers: one for the info bar at the bottom of the page, one for the thumbnails and one panel container for the full image:
HTML结构由三个主要容器组成：一个用于页面底部的信息栏，一个用于缩略图，一个用于完整图像的面板容器：
<div class="infobar">
<span id="description"></span>
<span id="loading">Loading Image</span>
</div>
<div id="thumbsWrapper">
<div id="content" >
<img src="thumbs/1.JPG" alt="images/1.JPG" title="something"/>
<img src="thumbs/2.JPG" alt="images/2.JPG" title="something"/>
...
<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>
The info bar container has a span for the image description and one for the loading display. The thumbnail wrapper contains a content container for all the small images. The very last element after the thumbnails is a placeholder. We need to add some space to the end because we don’t want the thumbnails to get covered by the info bar. Since we don’t want to use any paddings or margins in our containers, we simply add another filler element.
信息栏容器具有一个用于图像描述的跨度和一个用于加载显示的跨度。 缩略图包装器包含所有小图像的内容容器。 缩略图之后的最后一个元素是占位符。 我们需要在末尾添加一些空间，因为我们不希望缩略图被信息栏覆盖。 由于我们不想在容器中使用任何填充或边距，因此我们只需添加另一个填充元素。
The structure for the panel contains a wrapper for the full image and two navigation items. In our JavaScript function we will add the full size image to this wrapper.
面板的结构包含完整图像的包装和两个导航项。 在我们JavaScript函数中，我们将全尺寸图片添加到该包装器中。
Now, let’s take a look at the style.
现在，让我们看一下样式。
CSS (The CSS)
First, we will define some general style for the page:
首先，我们将为页面定义一些常规样式：
*{
margin:0;
padding:0;
}
body{
background-color:#000;
font-family:Verdana;
text-transform:uppercase;
color:#fff;
font-size:10px;
overflow:hidden;
}
The body needs to get the property overflow hidden, because we will set the scroll bar for the thumbs view only. If we would add scrolling to the page, the scroll bar would appear when the full image panel slides up. We avoid that by saying that the overflow will be hidden for the body.
主体需要隐藏属性溢出，因为我们将只为拇指视图设置滚动条。 如果我们要在页面上添加滚动条，则在整个图像面板向上滑动时会出现滚动条。 我们通过说溢出将对身体隐藏来避免这种情况。
The info bar will have a fixed position. We always want it to be visible and at the same place in the page:
信息栏将具有固定位置。 我们始终希望它在页面中的同一位置可见：
.infobar{
background-color:#000;
height:28px;
line-height:28px;
right:20px;
position:fixed;
bottom:0px;
left:20px;
z-index:999999999;
text-align:center;
color:#ddd;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
text-shadow:0px 0px 1px #ccc;
}
We add some border radius for rounded borders. We set the z-index crazily high since we want the element to be always on top. of course you could just use a value like 15 or 50. Just be careful with the other elements that will get a new z-index dynamically in the JS. The highest one of them is 10.
我们为圆形边界添加了一些边界半径。 由于我们希望元素始终位于最上方，因此我们将z-index设置为疯狂。 当然，您可以只使用15或50之类的值。请小心其他将在JS中动态获得新z-index的元素。 其中最高的是10。
The description and the loading item will have the following style:
描述和加载项将具有以下样式：
span#description{
text-shadow:1px 1px 1px #000;
display:none;
}
span#loading{
display:none;
padding-right: 30px;
background:transparent url(../loading.gif) no-repeat center right;
}
The loading item will have a loading image as background.
加载项目将以加载图像为背景。
The thumbs wrapper will have a panel like style. We set it fixed, occupying the whole screen. Important for the effect is the bottom:0px since we will want the wrapper to come up from the bottom by animating its height. Again, we set the overflow to hidden, since we just want the content container to have a scroll bar.
拇指包装纸将具有类似面板的样式。 我们将其设置为固定，占据整个屏幕。 对于效果很重要，因为底部是0px，因为我们希望包装器通过动画设置其高度从底部上升。 同样，我们将溢出设置为隐藏，因为我们只希望内容容器具有滚动条。
#thumbsWrapper{
overflow:hidden;
position:fixed;
height:100%;
width:100%;
left:0px;
right:0px;
bottom:0px;
}
The content wrapper will also occupy all the page. The vertical scroll bar we set explicitly by saying overflow-y:scroll (auto would be the default value). Initially, we want this container to be invisible because we don’t want to show the scroll bar while there is nothing on the page during the initial loading time.
内容包装器还将占据所有页面。 我们通过说overflow-y：scroll(自动是默认值)来明确设置垂直滚动条。 最初，我们希望该容器是不可见的，因为在初始加载期间页面上没有任何内容时，我们不想显示滚动条。
#content{
position:absolute;
top:0px;
height:100%;
width:100%;
left:0px;
background-color:#111;
overflow-y:scroll;
display:none;
}
The images in the content container will float left and have an opacity of 0.4. The hover function will then increase opacity, giving the whole thing a spotlight effect.
内容容器中的图像将向左浮动，并且不透明度为0.4。 然后，悬停功能将增加不透明度，使整个事物具有聚光灯效果。
#content img{
float:left;
margin:2px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
The placeholder will make sure that our thumbs don’t get covered by the info bar when we are at the bottom of the page:
当我们位于页面底部时，占位符将确保信息栏不会遮住我们的拇指：
.placeholder{
float:left;
clear:both;
width:100%;
height:30px;
}
The panel will have the following style similar to the style of the thumbs wrapper:
面板将具有以下样式，类似于拇指包装纸的样式：
#panel{
background-color:#222;
width:100%;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:0px;
text-align:center;
}
Initially, the
最初，
#panel img{
cursor:pointer;
position:relative;
border:1px solid #000;
-moz-box-shadow:0px 0px 10px #111;
-webkit-box-shadow:0px 0px 10px #111;
box-shadow:0px 0px 10px #111;
display:none;
}
We set it to display:none since we will make it appear by fading it in. This will create a nice effect.
我们将其设置为display：none，因为我们将其淡入淡出以使其显示。这将产生不错的效果。
The image wrapper be centered horizontally. This we achieve by setting the left and right margins to auto.
图像包装器应水平居中。 我们通过将左右边距设置为自动来实现。
#wrapper{
position:relative;
margin:40px auto 0px auto;
}
The navigation items will have the following style:
导航项将具有以下样式：
a#next,
a#prev{
width:40px;
height:40px;
position:fixed;
cursor:pointer;
outline:none;
display:none;
background:#aaa url(../nav.png) no-repeat top left;
}
a#next:hover, a#prev:hover{
background-color:#fff;
}
a#next{
right:0px;
top:50%;
margin-top:-20px;
background-position: 0px 0px;
}
a#prev{
left:0px;
top:50%;
margin-top:-20px;
background-position: 0px -40px;
}
We give the navigation items a fixed position. To center an absolute or fixed element horizontally (or vertically) you can give it a top (or left) value of 50% and then a negative top (or left) margin of half of its height (or width). Since the navigation item is 40px high, our top margin is is -20px.
我们给导航项一个固定的位置。 要将一个绝对或固定元素水平(或垂直)居中，可以为其顶部(或左侧)值设置为50％，然后为顶部(或左侧)负值设置其高度(或宽度)的一半。 由于导航项的高度为40像素，因此我们的最高边距为-20像素。
And that was all the style. Now, let’s take a look at the JavaScript magic:
这就是所有样式。 现在，让我们看一下JavaScript的魔力：
JavaScript (The JavaScript)
OK, don’t scare, it’s a bit lengthy… but don’t worry, most of it is comments and code indention 🙂 Our main functions fire when we click on a thumb or click on a full image.
好的，不要害怕，这有点冗长……但是不用担心，其中大多数是注释和代码缩进。when单击拇指或单击完整图像时，我们的主要功能会触发。
When clicking on a thumbnail (line 34) we first show our loading item in the info bar. Then we say to load the respective image (line 40) with the source being the alt attribute of the thumb we clicked (line 92). Everything that is inside of the load function will just be executed after the image is loaded (line 41 to 93). So, we hide the loading item from the info bar, resize the image to fit into the viewport and append the image element to the wrapper. Then we fade it in (line 54) and slide up the panel where we will see the full image and the fading in effect still executing (57 – 91). We also show the description and the navigation items, and finally we make the thumbs wrapper disappear by setting the height to 0 (line 90). We do that because we want it sliding back from the bottom when we click on the full image.
单击缩略图(第34行)时，我们首先在信息栏中显示加载项。 然后我们说要加载相应的图像(第40行)，其源是我们单击的拇指的alt属性(第92行)。 加载函数内部的所有内容都将在加载图像后执行(第41至93行)。 因此，我们从信息栏中隐藏了加载项，调整图像的大小以适合视口，并将image元素附加到包装器。 然后我们将其淡入(第54行)并向上滑动面板，在该处我们将看到完整的图像和仍然有效的淡入(57 – 91)。 我们还显示了说明和导航项，最后，通过将高度设置为0(第90行)，使大拇指包装消失了。 我们这样做是因为当我们单击完整图像时，我们希望它从底部滑回。
For the click event on the full image (line 101 to 119) we need to use “live” since the img element is not there in the beginning but it is created dynamically. We animate the thumbs wrapper and set the panel to zero height.
对于完整图像上的click事件(第101到119行)，我们需要使用“实时”，因为img元素一开始并不存在，而是动态创建的。 我们为拇指包裹器设置动画，并将面板设置为零高度。
The functions for browsing through the full images check which thumb image is the previous or next one and according to that we set the next or previous full image (line 128 to 137). For that we use the navigate function (line 143 to 191).
浏览完整图像的功能会检查哪个拇指图像是上一个或下一个完整图像，并据此设置下一个或上一个完整图像(第128到137行)。 为此，我们使用导航功能(第143至191行)。
From line 18 to 26 we say that we want the full size picture to be resized whenever we resize the window. The resize function is defined from line 197 until 237. We also resize the wrapper around the image.
从第18行到第26行，我们说我们希望在每次调整窗口大小时都调整全尺寸图片的大小。 从197行到237行定义了大小调整功能。我们还调整了图像周围的包装大小。
$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $('#content img').size();
/* speed to animate the panel and the thumbs wrapper */
var speed = 500;
/* show the content */
$('#content').show();
/*
when the user resizes the browser window,
the size of the picture being viewed is recalculated;
*/
$(window).bind('resize', function() {
var $picture = $('#wrapper').find('img');
resize($picture);
});
/*
when hovering a thumb, animate it's opacity
for a cool effect;
when clicking on it, we load the corresponding large image;
the source of the large image is stored as
the "alt" attribute of the thumb image
*/
$('#content > img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
var $this = $(this);
/* shows the loading icon */
$('#loading').show();
$('
![]()
').load(function(){
$('#loading').hide();
if($('#wrapper').find('img').length) return;
current = $this.index();
var $theImage = $(this);
/*
After it's loaded we hide the loading icon
and resize the image, given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$('#wrapper').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$('#panel').animate({'height':'100%'},speed,function(){
/*
if the picture has a description,
it's stored in the title attribute of the thumb;
show it if it's not empty
*/
var title = $this.attr('title');
if(title != '')
$('#description').html(title).show();
else
$('#description').empty().hide();
/*
if our picture is the first one,
don't show the "previous button"
for the slideshow navigation;
if our picture is the last one,
don't show the "next button"
for the slideshow navigation
*/
if(current==0)
$('#prev').hide();
else
$('#prev').fadeIn();
if(current==parseInt(totalpictures-1))
$('#next').hide();
else
$('#next').fadeIn();
/*
we set the z-index and height of the thumbs wrapper
to 0, because we want to slide it up afterwards,
when the user clicks the large image
*/
$('#thumbsWrapper').css({'z-index':'0','height':'0px'});
});
}).attr('src', $this.attr('alt'));
});
/*
when hovering a large image,
we want to slide up the thumbs wrapper again,
and reset the panel (like it was initially);
this includes removing the large image element
*/
$('#wrapper > img').live('click',function(){
$this = $(this);
$('#description').empty().hide();
$('#thumbsWrapper').css('z-index','10')
.stop()
.animate({'height':'100%'},speed,function(){
var $theWrapper = $(this);
$('#panel').css('height','0px');
$theWrapper.css('z-index','0');
/*
remove the large image element
and the navigation buttons
*/
$this.remove();
$('#prev').hide();
$('#next').hide();
});
});
/*
when we are viewing a large image,
if we navigate to the right/left we need to know
which image is the corresponding neighbour.
we know the index of the current picture (current),
so we can easily get to the neighbour:
*/
$('#next').bind('click',function(){
var $this = $(this);
var $nextimage = $('#content img:nth-child('+parseInt(current+2)+')');
navigate($nextimage,'right');
});
$('#prev').bind('click',function(){
var $this = $(this);
var $previmage = $('#content img:nth-child('+parseInt(current)+')');
navigate($previmage,'left');
});
/*
given the next or previous image to show,
and the direction, it loads a new image in the panel.
*/
function navigate($nextimage,dir){
/*
if we are at the end/beginning
then there's no next/previous
*/
if(dir=='left' && current==0)
return;
if(dir=='right' && current==parseInt(totalpictures-1))
return;
$('#loading').show();
$('
![]()
').load(function(){
var $theImage = $(this);
$('#loading').hide();
$('#description').empty().fadeOut();
$('#wrapper img').stop().fadeOut(500,function(){
var $this = $(this);
$this.remove();
resize($theImage);
$('#wrapper').append($theImage.show());
$theImage.stop().fadeIn(800);
var title = $nextimage.attr('title');
if(title != ''){
$('#description').html(title).show();
}
else
$('#description').empty().hide();
if(current==0)
$('#prev').hide();
else
$('#prev').show();
if(current==parseInt(totalpictures-1))
$('#next').hide();
else
$('#next').show();
});
/*
increase or decrease the current variable
*/
if(dir=='right')
++current;
else if(dir=='left')
--current;
}).attr('src', $nextimage.attr('alt'));
}
/*
resizes an image given the window size,
considering the margin values
*/
function resize($image){
var windowH = $(window).height()-100;
var windowW = $(window).width()-80;
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'});
}
});
For further details, check the comments in the code, they describe what is done in the moment.
有关更多详细信息，请检查代码中的注释，这些注释描述了当前要做的事情。
And that’s it! I hope you enjoyed the tutorial and the result!
就是这样！ 希望您喜欢本教程及其结果！
翻译自: https://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/
jquery 照片墙抽奖
3377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
