使用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来实现，但是没想到还有更好的方法。接下来就是想做一定的创新，但是现在还没想到更好方式。