您现在的位置是:网站首页>>前端技术>>html+css+js

使用lightbox插件实现图片预览功能

发布时间:2020-07-02 15:55:28作者:wangjian浏览量:63点赞量:0

    lightbox插件可以实现图片的预览功能

    lightbox插件的github地址:https://github.com/lokesh/lightbox2

    lightbox插件的简单使用

    一:引入lightbox的js

    <script src="/js/jquery.min.js"></script>
    <script src="/lightbox/lightbox.js"></script>

    二:引入lightbox的css

    <link href="/lightbox/lightbox.css" rel="stylesheet" />

    三:html实现图片预览

    1:单张图片的图片预览实现

    <a href="/images/a1.jpg" data-lightbox="image-1" data-title="图片1">
        <img src="/images/a1.jpg" alt="">
    </a>

    2:多张图片的图片预览实现(data-lightbox使用相同的属性值实现多图预览)

    <a href="/images/a1.jpg" data-lightbox="image-1" data-title="图片1">
        <img src="/images/a1.jpg" alt="">
    </a>
    <a href="/images/a2.jpg" data-lightbox="image-1" data-title="图片2">
        <img src="/images/a2.jpg" alt="">
    </a>

    如上我们就可以使用lightbox插件实现简单的图片预览功能

0 +1