jquery 照片墻抽獎(jiǎng)

View demo 查看演示Download Source 下載源

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.

今天，我們將創(chuàng)建一個(gè)令人驚嘆的整頁(yè)照片墻畫(huà)廊。 我們的想法是讓整個(gè)頁(yè)面充滿(mǎn)拇指，當(dāng)我們將鼠標(biāo)懸停時(shí)，會(huì)獲得很好的燈光效果。 單擊圖像后，面板會(huì)從底部向上滑動(dòng)以顯示完整圖片。 單擊完整圖像時(shí)，拇指面板會(huì)從底部向后滑動(dòng)。 這種效果給人的印象是，每次更改模式時(shí)，我們都將面板堆疊在一起。 在全圖視圖中，當(dāng)瀏覽照片時(shí)，我們會(huì)添加一些不錯(cuò)的過(guò)渡效果。

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!

另外，我們將使用一個(gè)功能來(lái)調(diào)整整個(gè)圖像的大小，使其適應(yīng)屏幕尺寸。 因此，當(dāng)調(diào)整屏幕尺寸時(shí)，我們的圖像將自動(dòng)適應(yīng)！

The beautiful images in the demo are from Vincent Boiteau’s photostream on Flickr.

演示中的精美圖片來(lái)自Vincent Boiteau在Flickr上的照片流。

This tutorial will be a little bit more complex than usual, so I will give my best to explain things clearly.

本教程將比平時(shí)復(fù)雜一些，因此，我將盡我所能清楚地進(jìn)行解釋。

Let’s get started with the markup.

讓我們開(kāi)始標(biāo)記。

標(biāo)記 (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結(jié)構(gòu)由三個(gè)主要容器組成：一個(gè)用于頁(yè)面底部的信息欄，一個(gè)用于縮略圖，一個(gè)用于完整圖像的面板容器：

<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.

信息欄容器具有一個(gè)用于圖像描述的跨度和一個(gè)用于加載顯示的跨度。 縮略圖包裝器包含所有小圖像的內(nèi)容容器。 縮略圖之后的最后一個(gè)元素是占位符。 我們需要在末尾添加一些空間，因?yàn)槲覀儾幌Ｍs略圖被信息欄覆蓋。 由于我們不想在容器中使用任何填充或邊距，因此我們只需添加另一個(gè)填充元素。

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.

面板的結(jié)構(gòu)包含完整圖像的包裝和兩個(gè)導(dǎo)航項(xiàng)。 在我們JavaScript函數(shù)中，我們將全尺寸圖片添加到該包裝器中。

Now, let’s take a look at the style.

現(xiàn)在，讓我們看一下樣式。

CSS (The CSS)

First, we will define some general style for the page:

首先，我們將為頁(yè)面定義一些常規(guī)樣式：

*{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.

主體需要隱藏屬性溢出，因?yàn)槲覀儗⒅粸槟粗敢晥D設(shè)置滾動(dòng)條。 如果我們要在頁(yè)面上添加滾動(dòng)條，則在整個(gè)圖像面板向上滑動(dòng)時(shí)會(huì)出現(xiàn)滾動(dòng)條。 我們通過(guò)說(shuō)溢出將對(duì)身體隱藏來(lái)避免這種情況。

The info bar will have a fixed position. We always want it to be visible and at the same place in the page:

信息欄將具有固定位置。 我們始終希望它在頁(yè)面中的同一位置可見(jiàn)：

.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.

我們?yōu)閳A形邊界添加了一些邊界半徑。 由于我們希望元素始終位于最上方，因此我們將z-index設(shè)置為瘋狂。 當(dāng)然，您可以只使用15或50之類(lèi)的值。請(qǐng)小心其他將在JS中動(dòng)態(tài)獲得新z-index的元素。 其中最高的是10。

The description and the loading item will have the following style:

描述和加載項(xiàng)將具有以下樣式：

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.

加載項(xiàng)目將以加載圖像為背景。

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.

拇指包裝紙將具有類(lèi)似面板的樣式。 我們將其設(shè)置為固定，占據(jù)整個(gè)屏幕。 對(duì)于效果很重要，因?yàn)榈撞渴?px，因?yàn)槲覀兿Ｍb器通過(guò)動(dòng)畫(huà)設(shè)置其高度從底部上升。 同樣，我們將溢出設(shè)置為隱藏，因?yàn)槲覀冎幌Ｍ麅?nèi)容容器具有滾動(dòng)條。

#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.

內(nèi)容包裝器還將占據(jù)所有頁(yè)面。 我們通過(guò)說(shuō)overflow-y：scroll(自動(dòng)是默認(rèn)值)來(lái)明確設(shè)置垂直滾動(dòng)條。 最初，我們希望該容器是不可見(jiàn)的，因?yàn)樵诔跏技虞d期間頁(yè)面上沒(méi)有任何內(nèi)容時(shí)，我們不想顯示滾動(dòng)條。

#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.

內(nèi)容容器中的圖像將向左浮動(dòng)，并且不透明度為0.4。 然后，懸停功能將增加不透明度，使整個(gè)事物具有聚光燈效果。

#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:

當(dāng)我們位于頁(yè)面底部時(shí)，占位符將確保信息欄不會(huì)遮住我們的拇指：

.placeholder{float:left;clear:both;width:100%;height:30px; }

The panel will have the following style similar to the style of the thumbs wrapper:

面板將具有以下樣式，類(lèi)似于拇指包裝紙的樣式：

#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.

我們將其設(shè)置為display：none，因?yàn)槲覀儗⑵涞氲鲆允蛊滹@示。這將產(chǎn)生不錯(cuò)的效果。

The image wrapper be centered horizontally. This we achieve by setting the left and right margins to auto.

圖像包裝器應(yīng)水平居中。 我們通過(guò)將左右邊距設(shè)置為自動(dòng)來(lái)實(shí)現(xiàn)。

#wrapper{position:relative;margin:40px auto 0px auto; }

The navigation items will have the following style:

導(dǎo)航項(xiàng)將具有以下樣式：

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.

我們給導(dǎo)航項(xiàng)一個(gè)固定的位置。 要將一個(gè)絕對(duì)或固定元素水平(或垂直)居中，可以為其頂部(或左側(cè))值設(shè)置為50％，然后為頂部(或左側(cè))負(fù)值設(shè)置其高度(或?qū)挾?的一半。 由于導(dǎo)航項(xiàng)的高度為40像素，因此我們的最高邊距為-20像素。

And that was all the style. Now, let’s take a look at the JavaScript magic:

這就是所有樣式。 現(xiàn)在，讓我們看一下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.

好的，不要害怕，這有點(diǎn)冗長(zhǎng)……但是不用擔(dān)心，其中大多數(shù)是注釋和代碼縮進(jìn)。when單擊拇指或單擊完整圖像時(shí)，我們的主要功能會(huì)觸發(fā)。

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行)時(shí)，我們首先在信息欄中顯示加載項(xiàng)。 然后我們說(shuō)要加載相應(yīng)的圖像(第40行)，其源是我們單擊的拇指的alt屬性(第92行)。 加載函數(shù)內(nèi)部的所有內(nèi)容都將在加載圖像后執(zhí)行(第41至93行)。 因此，我們從信息欄中隱藏了加載項(xiàng)，調(diào)整圖像的大小以適合視口，并將image元素附加到包裝器。 然后我們將其淡入(第54行)并向上滑動(dòng)面板，在該處我們將看到完整的圖像和仍然有效的淡入(57 – 91)。 我們還顯示了說(shuō)明和導(dǎo)航項(xiàng)，最后，通過(guò)將高度設(shè)置為0(第90行)，使大拇指包裝消失了。 我們這樣做是因?yàn)楫?dāng)我們單擊完整圖像時(shí)，我們希望它從底部滑回。

For the click event on the full image (line 101 to 119) we need to use “l(fā)ive” 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.

對(duì)于完整圖像上的click事件(第101到119行)，我們需要使用“實(shí)時(shí)”，因?yàn)閕mg元素一開(kāi)始并不存在，而是動(dòng)態(tài)創(chuàng)建的。 我們?yōu)槟粗赴髟O(shè)置動(dòng)畫(huà)，并將面板設(shè)置為零高度。

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).

瀏覽完整圖像的功能會(huì)檢查哪個(gè)拇指圖像是上一個(gè)或下一個(gè)完整圖像，并據(jù)此設(shè)置下一個(gè)或上一個(gè)完整圖像(第128到137行)。 為此，我們使用導(dǎo)航功能(第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行，我們說(shuō)我們希望在每次調(diào)整窗口大小時(shí)都調(diào)整全尺寸圖片的大小。 從197行到237行定義了大小調(diào)整功能。我們還調(diào)整了圖像周?chē)陌b大小。

$(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 opacityfor a cool effect;when clicking on it, we load the corresponding large image;the source of the large image is stored asthe "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 iconand 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 wrapperto 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 elementand 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 knowwhich 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/beginningthen 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.

有關(guān)更多詳細(xì)信息，請(qǐng)檢查代碼中的注釋，這些注釋描述了當(dāng)前要做的事情。

And that’s it! I hope you enjoyed the tutorial and the result!

就是這樣！ 希望您喜歡本教程及其結(jié)果！

testking ccna course and become expert using testking ccna課程學(xué)習(xí)有用的Web設(shè)計(jì)應(yīng)用程序，并使用testking ccnp design tutorials and testking ccnp設(shè)計(jì)教程和testking ccie design recourses.testking ccie設(shè)計(jì)資源來(lái)成為專(zhuān)家。

翻譯自: https://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/

jquery 照片墻抽獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的jquery 照片墙抽奖_使用jQuery滑动面板照片墙画廊的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。