lightGallery实现手机端简单相册浏览功能
lightGallery实现手机端简单相册浏览功能
luckxz999 发表于1年前
lightGallery实现手机端简单相册浏览功能
  • 发表于 1年前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: lightGallery是一个很轻量级的jQuery相册浏览插件,功能简单,展示效果也不错。

第一步:引入相关文件

jQuery主文件:
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
lightGallery主文件
<script src="/lightGallery/js/lightGallery.min.js"></script>
<link rel="stylesheet" href="/lightGallery/css/lightGallery.css"/>

其中字体主要用于页面上小图标的展示,即

第二步:html组织及js初始化

<ul class="gallery">
    <li data-src="${largeImagePath1}">
        <a href="javascript:void(0)">
            <img class="box" src="${thumbImagePath1}"/>
        </a>
    </li>
    <li data-src="${largeImagePath2}">
        <a href="javascript:void(0)">
            <img class="box" src="${thumbImagePath2}"/>
        </a>
    </li>
    <li data-src="${largeImagePath3}">
        <a href="javascript:void(0)">
            <img class="box" src="${thumbImagePath3}"/>
        </a>
    </li>
</ul>
$(document).ready(function () {
    $(".gallery").lightGallery({
        loop:true,
        auto:true,
        speed:0,
        pause:5000,
        closable: false
    });
});

共有 人打赏支持
粉丝 0
博文 5
码字总数 8084
×
luckxz999
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: