头像

least.js响应式画廊插件演示

来源:https://www.sucaihuo.com/js/239.html 18***38 2015-08-20 15:26浏览(749) 收藏

least.js 是一个jQuery画廊插件,当刷新页面的时候,缩略图会随机排列。同时它还是响应式设计,能够自动适应窗口大小。
least.js响应式画廊插件演示
分类:图片代码 > 大图切换 难易:中级

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 132 下载资源 下载积分: 20 积分

HTML

首先在#gallery放置多个缩略图,并加上#fullPreview显示大图区域

<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" width="240"
        height="150" 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" width="240"
        height="150" 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>

jQuery

调用least插件非常简单:

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

gallery画廊插件相关API

参数 描述 默认值
random 随机排列缩略图 true
lazyload 延迟加载图片 true
scrollToGallery 点击缩略图时滚动到查看大图顶部(当页面高度小于窗口高度时,滚动似乎有 bug) true
最新交易
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

1 2