Lightbox.js

阅读量:3017

发布时间:2015-10-25 20:03:40


一、简介

Lightbox(图片灯笼插件)是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景。是为了当你的的图片过大必须缩小到页面的宽度时,可以让读者在当前页面浏览完整大小的图片,而不用离开。

 

二、使用方法

1.引入文件

    <!-- 样式文件 -->
    <link rel="stylesheet" type="text/css" href="/css/lightbox.css">
    
    <!-- js文件  必须在lightbox.js之前引入 jQuery.js 1.7+文件(lightbox.js是基于jQuery开发的图片浏览插件) -->
    <script src="/js/jquery-2.1.4.min.js"></script>
    <script src="/js/lightbox.min.js"></script>
    <!-- 或者是引入 jQuery 和 lightbox 集合版 -->
    <script src="/js/lightbox-plus-jquery.min.js"></script>

 

2.HTML代码

在你需要显示的图片灯笼前面添加a标签,添加class="example-image-link" href是你的展示的大图图片地址,data-lightbox为分组(组名相同为同一个相册),ata-title是所需要显示的简介。

        <div>
            <a class="example-image-link" href="/images/lightbox_11.jpg" data-lightbox="example-1" data-title="一眼就是一世界">
                <img class="example-image" src="/images/lightbox_11.jpg" alt="image-1" />
            </a>
            <a class="example-image-link" href="/images/lightbox_12.jpg" data-lightbox="example-2" data-title="我存于这俗世烟火的浮世,我爱这时光倒影的浮城">
                <img class="example-image" src="/images/lightbox_12.jpg" alt="image-1"/>
            </a>
        </div>

 

3.说明

Lightbox.js可以不用初始化,就可以直接调用。

img标签和a的结束标签之间有空格会在空格处显示下划线。

在img标签中显示缩略图,在a标签中显示的完整图片链接,减少网站响应时间。

 

演示demo

 

三、配置

修改配置参数就需要添加js代码:

        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true
        })

 

配置参数说明:

布尔值 数字 布尔 字符串 类型 数字 数字 布尔值 布尔值

选项 类型 默认值 说明
alwaysShowNavOnTouchDevices 布尔值 false 观看图片集合时候:true永远显示左右箭头。
fadeDuration 数字 500 淡入淡出所花的时间,单位毫秒。
fitImagesInViewport 布尔 true 调整图像位置,true正好显示在可见区域,不会显示滚动条
maxWidth 字符串   最大宽度,单位px
maxHeight 字符串   最大高度,单位px
positionFromTop 数字 50 灯箱容器距离顶端的距离
resizeDuration 数字 700 灯箱容器的图片显示动画加载时间,单位毫秒
showImageNumberLabel 布尔值 true 图片数量、文字是否显示。
wrapAround 布尔值 false 当用户点击最后一个图片的时候,是否可以返回第一张图片

 










当前没有评论