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

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

添加时间:2021-02-23 16:32:36
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:大图切换
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

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

分类:图片代码 > 大图切换 难易:中级

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
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:least.js响应式画廊插件演示

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.195695s