jQuery随机及响应式画廊插件least.js

拉丁传说 6月前 874

least.js 是一个基于 jQuery 的画廊插件,当刷新页面的时候,缩略图会随机排列。同时它还是响应式设计,能够自动适应窗口大小。

兼容性

least.js 使用了 HTML5 和 CSS3,所以不兼容 IE6、IE7,其他浏览器正常。

使用方法

引入文件

<link rel="stylesheet" href="css/least.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/least.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

HTML

<section>
    <ul id="gallery">
        <li id="fullPreview"></li>
        <li>
            <a href="img/full/1.jpg"></a>
            <img data-original="img/thumb/1.jpg" src="img/thumb/1.jpg" alt="Fish">
            <div class="overLayer"></div>
            <div class="infoLayer">
                <ul>
                    <li><h2>Fish</h2></li>
                    <li><p>View Picture</p></li>
                </ul>
            </div>
            <p class="projectInfo"> <strong>Monday, 14th April 2093:</strong> sit amet, 
                consetetur sadipscing elitr, sed diam nonumy eirmod 
                tempor invidunt ut labore et dolore magna aliquyam erat,
                sed diam voluptua. At vero eos et accusam et justo duo 
                dolores et ea rebum. </p>
        </li>
        <li>
            <a href="img/full/2.jpg"></a>
            <img data-original="img/thumb/2.jpg" src="img/thumb/2.jpg" alt="Golden Gate">
            <div class="overLayer"></div>
            <div class="infoLayer">
                <ul>
                    <li><h2>New York</h2></li>
                    <li><p>View Picture</p></li>
                </ul>
            </div>
            <p class="projectInfo"> <strong>Monday, 14th April 2093:</strong> sit amet, 
                consetetur sadipscing elitr, sed diam nonumy eirmod 
                tempor invidunt ut labore et dolore magna aliquyam 
                erat, sed diam voluptua. At vero eos et accusam et 
                justo duo dolores et ea rebum. </p>
        </li>
    </ul>
</section>

JavaScript

$(function() {
    $('#gallery').least();
});

参数

参数 类型 说明 默认值
random 布尔值 随机排列缩略图 true
lazyload 布尔值 延迟加载图片 true
scrollToGallery 布尔值 点击缩略图时滚动到查看大图顶部(当页面高度小于窗口高度时,滚动似乎有 bug) true

演 示 下 载

最新回复 (0)
返回
发新帖