使用Lightbox制作照片條

前言：這是國外的一個教程，我也很喜歡這個網頁里面的教程，主要技術是CSS3和JQuery以及一些JQuery的插件的應用，當然從這些教程我也學到了他們制作時的一些思路，就好像做數學題那樣，只要思路把握了，就可以做出千變萬化的題目。

教程地址：http://tympanus.net/codrops/2012/08/01/photo-booth-strips-with-lightbox/

demo地址：http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/

作品的截圖：

作品的亮點：1. 當鼠標hover圖片的時候，圖片變得明亮和清晰。

???????????????? 2. 當鼠標在圖片上，滾動滑輪的時候，圖片列表也跟著滾動。

???????????????? 3. 當鼠標點擊圖片的時候，彈出該圖片的大圖，而且左右箭頭實現該組的圖片輪流展示。

?

實現的思路：1. hover的時候把透明度設置為1。

???????????????? 2. 之所以可以滾動是因為該層允許了出現滾動條，但是父層設置了overflow：hidden，所以把滾動條的位置擠到父層的寬度外，這樣滾動條就可以不見了。

???????????????? 3. 主要使用了Lightbox的插件。進入Lightbox的官網可以看到他的用法，因為它是開源的，github上面有它的源代碼，有空可以仔細看一下了解它的實現思路。

?

主要代碼：

1. 首先是HTML部分，每一組照片使用一個DIV而且class為"pb-wrapper"來括住，由于使用到Lightbox，它需要在a標簽里面增加rel="lightbox[組名]"的屬性，鏈接地址為大圖的位置。

<div class="pb-wrapper pb-wrapper-1">   <!--一組圖片 該層也用于隱藏滾輪的--><div class="pb-scroll">             <!--該層主要用來設置滾輪 --><ul class="pb-strip">           <!--照片的列表 --><li><a href="images/large/1.jpg" rel="lightbox[album1]" title="Spring">    <!-- 組名為album1 --><img src="images/small/1.jpg" /></a></li><li><a href="images/large/2.jpg" rel="lightbox[album1]" title="Sunshine"><img src="images/small/2.jpg" /></a></li><li> <!--...--> </li><!--...--></ul></div><h3 class="pb-title">Pure Serenity</h3></div>

?"pb-wrapper"作為每一組照片公有的屬性，而細微差別需要區分的再加上"pb-wrapper-n"，n表示第幾個。這里的差別主要是位置，高度還有旋轉角度。

2.接下來是CSS部分

照片列是固定位置的，這樣可以幫助我們定義相對于瀏覽器大小的高度，加上一些陰影還有一些背景，顯得更好看一點。padding-bottom的大值為了預留位置給圖片列的內容介紹。就是上面h3的那部分。

.pb-wrapper {position: fixed;background: #fff url(../images/paper.jpg) repeat center bottom;width: 170px;margin-top: 10px;padding: 20px 10px 100px;overflow: hidden;box-shadow:inset 1px 0 0 3px rgba(255,255,255,0.6),0 1px 4px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.05),inset 0 -25px 40px rgba(0,0,0,0.08);
}

使用偽類：after來放置一個圓圈來提示用戶可以在上面使用滑輪滾動來使得圖片滾動，再使用:before偽類在左邊加多一些陰影。

.pb-wrapper:before {content: '';position: absolute;width: 2px;left: 0;top: 3px;bottom: 3px;box-shadow: 0 0 10px rgba(0,0,0,0.2);
}.pb-wrapper:after{position: absolute;content: '';background: rgba(192,227,232, 0.8) url(../images/scroll.png) no-repeat center center;width: 80px;height: 80px;top: 50%;left: 50%;margin: -75px 0 0 -35px;border-radius: 50%;z-index: 1000;
}

接著是標題h3的屬性，這段文字設置不能被用戶選擇復制。

h3.pb-title {padding: 5px;font-family: 'Pacifico', Cambria, Georgia, serif;color: #374571;font-size: 14px;font-weight: 300;margin: 0;user-select: none;
}

帶有class為"pb-scroll"的那一層，增加一個額外的padding用來把滾動條擠出到父層不顯示的區域那里。

.pb-scroll {position: relative;height: 100%;width: 150px;padding-right: 30px;overflow-y: scroll;overflow-x: hidden;box-sizing: content-box;
}

但我們把鼠標移到圖片列表上有一個明顯的hover效果，主要是透明度的改變。

ul.pb-strip {padding: 0;list-style: none;position: relative;margin: 0 auto;width: inherit;opacity: 0.8;transition: all 0.3s ease-in-out;
}
.pb-wrapper:hover ul.pb-strip{opacity: 1;
}

接著是照片的微調

ul.pb-strip li {display: block;width: 150px;position: relative;margin-bottom: 7px;
}
ul.pb-strip li a {display: block;
}

每個a標簽都設置了title屬性，我們想把title的值顯示到照片上來表明該照片的題目，這里使用了偽類:after，在content里面獲取attr(title)的值

ul.pb-strip li a:after {position: absolute;z-index: 999;height: 20px;width: 120px;left: 10px;padding: 5px;bottom: 10px;background: rgba(255,255,255,0.6);content: attr(title);font-size: 13px;text-shadow: 0 1px 1px rgba(255,255,255,0.9);box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

在img上加上box-shadow為了讓我們在整個照片列旋轉的時候照片的鋸齒不要太明顯。

ul.pb-strip li img {display: block;box-shadow: 0 0 1px 1px #fff;
}

給每個照片組加上它們的位置，高度和旋轉值

.pb-wrapper-1 {height: 89%;left: 20%;transform: rotate(3deg);
}.pb-wrapper-2 {height: 85%;left: 40%;transform: rotate(-2deg);
}.pb-wrapper-3 {height: 95%;left: 60%;transform: rotate(1deg);
}.pb-wrapper-4 {height: 75%;left: 80%;
}

3. 最后是lightbox.css的調整，主要是左右的箭頭不要出現在圖片上，出現在圖片外面，確保圖片的位置正確，還有箭頭不要hover的時候才出現，還有一些文字的調整，還有這些的基礎是要知道lightbox.js加了一些什么層在html文檔時以及對于的ID和class。

#lightbox {font-family: inherit;padding: 0 85px;
}
.lb-outerContainer {overflow: visible !important;background: #fff url(../images/paper.jpg) fixed repeat top left;border-radius: 0px;max-width: 100%;height: auto !important;
}
.lb-container {padding: 0;
}#lightbox img.lb-image {padding: 10px;max-width: 100%;
}
.lb-nav {box-sizing: content-box;padding: 0 80px;left: -80px;
}
.lb-dataContainer {position: relative;max-width: 100%;
}.lb-data .lb-close {bottom: 10px;position: absolute;width: 73px;height: 73px;right: 5px;
}
.lb-prev, .lb-next {position: absolute;cursor: pointer;width: 60px;height: 60px;top: 50%;margin-top: -30px;
}
.lb-prev,
.lb-prev:hover{background: url(../images/prev.png) no-repeat 50% 50%;
}
.lb-next,
.lb-next:hover{background: url(../images/next.png) no-repeat 50% 50%;
}
.lb-data .lb-caption {font-family: 'Pacifico', Cambria, Georgia, serif;font-weight: 300;font-size: 30px;color: #fff;line-height: 32px;text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}.lb-data .lb-number {text-indent: 4px;color: #c0e3e8;
}

總結：其實這個作品給我覺得很好的地方就是鼠標滾動，圖片相應滾動，可能是我沒有仔細思考過吧，如果是我做的話，我第一時間想到是使用JS改變它的position來實現，但是沒想到還有更好的方法。接下來就是想做一定的創新，但是現在還沒想到更好方式。