lightcase.js - 智能灵活的jquery多功能弹出层插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

什么是lightcase.js

lightcase.js是一个jquery多功能弹出层插件,Lightcase 支持照片，视频，iframe，swf 和 ajax 调用。支持全屏，导航，缩放，下载等功能，还支持多种动画过渡效果。

如何展示图片

引入lightcase.js、lightcase.css和image，但让前提是引入了jquery

<link rel="stylesheet" type="text/css" href="css/lightcase.css" />
<script src="js/jquery.1.11.3.js" type="text/javascript"></script>
<script type="text/javascript" src="js/lightcase.js"></script>

image引用

<a href="images/1b.jpg" id="example1" class="showcase" data-rel="lightcase">
    <img src="images/1b.jpg" width="300" height="200" alt="" />
    <div class="caption">
        <p>
            None</p>
    </div>
</a>

js初始化

<script>

    $(function () {

        $('a[data-rel^=lightcase]').lightcase();

    });
     
</script>

常见的选项

  • transition 属性选项用于定义 lightbox 打开和关闭时的过渡效果。

  • transitionIn 属性选项是用来定义弹出窗口内容（通常是图片）如何进入屏幕。

  • transitionOut 用于定义当图像或内容切换（关闭）时所使用的过渡效果。

  • cssTransitions 属性选项用于启用或禁用 CSS 过渡效果。

  • speedIn 属性选项用于设置内容或媒体的过渡动画入场速度。

  • speedOut 的值通常是一个表示时间的数字，单位可以是毫秒（ms）。

  • maxWidth 属性用于设置图像或媒体内容的最大宽度。

  • maxHeight 属性用于设置弹出窗口中图像的最大高度。

  • timeout。这个选项主要用于设置当lightcase.js试图加载一个资源时，如果这个资源在特定的时间内没有成功加载，那么应该采取什么样的操作。

  • showSequenceInfo 属性选项用于在显示图片序列时，在图片序列的指示器上显示当前图片的序号和总数。

  • 回调函数 onInit // 在lightcase初始化之后会立即调用

  • 回调函数 onStart // 在生成内容之前需要调用

  • 回调函数 onFinish // 在显示内容之前会被调用

  • 回调函数 onClose // 在中止lightcase的时候会被调用

  • 回调函数 onCleanup // 当lightcase进行清理时，会调用它