首页 > 特效插件 > 滚动轮播 >  自适应布局的jquery+css3图片相册专辑正文

自适应布局的jquery+css3图片相册专辑

特效介绍
自适应布局的jquery+css3图片相册专辑
jquery+css3图片相册专辑,自动适应屏幕大小。由于使用了css3特效,所以不兼容IE8以下浏览器。
使用方法
第一步、在head区域引入<!--引入开始-->和<!--引入结束-->之间的代码
第二步、在html里面引入下面的代码。
<div id = "main-page">
    <div id = "example-div">
        <div class = "steps-c">
        </div>
        <div class = "steps-c">
        </div>
        <div id = "albums-holder">
            <div class = "bold">Space</div>
            <div class = "albumize" title = "Space">
                <a href = "samples/d.jpg" title = "Earth from Space"><img src = "samples/4.jpg"></img></a>
                <a href = "samples/e.jpg" title = "Surreal Space"><img src = "samples/5.jpg"></img></a>
                <a href = "samples/f.jpg" title = "Our Galaxy"><img src = "samples/6.jpg" class = "albumize-cover"></img></a>
                <a href = "samples/g.jpg" title = "Heavenly Space"><img src = "samples/7.jpg"></img></a>
            </div>
            <div class = "bold">Night</div>
            <div class = "albumize" title = "Night">
                <a href = "samples/a.jpg" title = "Island Night"><img src = "samples/1.jpg"></img></a>
                <a href = "samples/b.jpg" title = "Ocean Night"><img src = "samples/2.jpg"></img></a>
                <a href = "samples/c.jpg" title = "Full Moon Night"><img src = "samples/3.jpg"></img></a>
                <a href = "samples/h.jpg" title = "Heavenly Night"><img src = "samples/8.jpg" class = "albumize-cover"></img></a>
            </div>
        </div>
    </div>
</div>
相册专辑图片地址和缩略图地址说明:
<a href = "samples/d.jpg" title = "Earth from Space">   这里的href所指向的路径为大图地址
<img src = "samples/4.jpg">  这里的src所指向的图片路径为缩略图路径