Code

图片盒子

这是一款基于jquery的图片展示插件,点击小图片会以模态窗口的形式显示相应的大图片,并且可以查看下一张,上一张。

大图片命名格式:demo.jpg

小图片命名格式:thumb_demo.jpg

(小图片的名称是在大图片的名称前面加"thumb_")

点击图片查看效果。
代码
1.在body里加入如下HTML代码:

<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="标题1">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="标题2">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="标题3">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image4.jpg" title="标题4">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image5.jpg" title="标题5">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
    <div style="clear:both;"></div>
</div>


<!--说明-->
1.  id="gallery" 这个div是我们自己定义的容器。也为了方便后面用jquery选择器进行查找。
2.  a标签里的href放的是大图片的地址。
3.  a标签里的title放图片的标题。大图显示的时候底部会显示相应的标题。
4.  img标签的src放小图片的地址。

2.在head标签内加入css:

<style type="text/css">
    /* 重置CSS用 */
    *{margin:0; padding:0;}
    
    /* jQuery lightBox plugin */
    #jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
    }
    #jquery-lightbox {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    z-index: 100;
	    text-align: center;
	    line-height: 0;
    }
    #jquery-lightbox a img { border: none; }
    #lightbox-container-image-box {
	    position: relative;
	    background-color: #fff;
	    width: 250px;
	    height: 250px;
	    margin: 0 auto;
    }
    #lightbox-container-image { padding: 10px; }
    #lightbox-loading {
	    position: absolute;
	    top: 40%;
	    left: 0%;
	    height: 25%;
	    width: 100%;
	    text-align: center;
	    line-height: 0;
    }
    #lightbox-nav {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 100%;
	    width: 100%;
	    z-index: 10;
    }
    #lightbox-container-image-box > #lightbox-nav { left: 0; }
    #lightbox-nav a { outline: none;}
    #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	    width: 49%;
	    height: 100%;
	    zoom: 1;
	    display: block;
    }
    #lightbox-nav-btnPrev { 
	    left: 0; 
	    float: left;
    }
    #lightbox-nav-btnNext { 
	    right: 0; 
	    float: right;
    }
    #lightbox-container-image-data-box {
	    font: 10px Verdana, Helvetica, sans-serif;
	    background-color: #fff;
	    margin: 0 auto;
	    line-height: 1.4em;
	    overflow: auto;
	    width: 100%;
	    padding: 0 10px 0;
    }
    #lightbox-container-image-data {
	    padding: 0 10px; 
	    color: #666; 
    }
    #lightbox-container-image-data #lightbox-image-details { 
	    width: 70%; 
	    float: left; 
	    text-align: left; 
    }	
    #lightbox-image-details-caption { font-weight: bold; }
    #lightbox-image-details-currentNumber {
	    display: block; 
	    clear: left; 
	    padding-bottom: 1.0em;	
    }			
    #lightbox-secNav-btnClose {
	    width: 66px; 
	    float: right;
	    padding-bottom: 0.7em;	
    }
    /* jQuery lightBox plugin - Gallery style (可以根据自己的需求修改)*/
    #gallery 
    {
        background-color: #444;
        padding:10px;
        height:100px;
        width: 412px;
    }
    #gallery ul li { float:left; display: inline; list-style: none; height:82px; width:82px;}
    #gallery ul img {
        border: 5px solid #3e3e3e;
    }
    #gallery a{text-decoration: none;}
    #gallery ul a:hover img {
        border: 5px solid #fff;
    }
</style>

3.在body底部引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.lightbox.js" type="text/javascript"></script>

4.继续在body底部加入js代码:

<script type="text/javascript">
    $(document).ready(function() {
        $('#gallery a').lightBox();//用jquery选择器查找到我们自己定义的容器里的a标签
    });
</script>