智能灵活的jQuery 相册插件

首先先给大家介绍一个js，lightcase.js是一款非常智能灵活的jQuery 插件。它支持桌面和移动手机设备，使用CSS3作为动画过渡效果，支持图片，视频，flash，谷歌地图，内联元素，ajax调用等，非常强大。

那么现在就来介绍一下这个插件的使用方法

一、引入文件

<link href="css/lightcase.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-2.2.3.min.js"></script>
<script src="./js/lightcase.js"></script>

二、创建HTML 结构  链接lightcase    

data-rel="lightcase" 来链接 lightcase

<div class="showcase" href="./images/g1.jpg" data-rel="lightcase">
    <img src="./images/g1.jpg" alt="" class="img-responsive">
</div>

三、初始化lightcase

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化lightcase

<script type="text/javascript">
    $(document).ready(function ($) {
        $('div[data-rel^=lightcase]').lightcase();
    });
</script>

四、title 属性的作用

在HTML结构里  添加 title 属性 ， title 是 lightcase 为 标题 提供的属性。

<div class="showcase" href="./images/g1.jpg" data-rel="lightcase" title="我是标题">

五、相册

HTML层  带相同data-rel属性的一组链接将会作为同一组图片被打开

<div href="./images/g1.jpg" data-rel="lightcase:myCollection" title="">

六、幻灯片效果

HTML层  带相同data-rel属性的一组链接将会作为同一组图片被打开，并分组中带有:slideshow属性，将会使该分组进入幻灯片模式

<div href="./images/g1.jpg" data-rel="lightcase:myCollection:slideshow" title="">

七、回调函数

$('div[data-rel=lightcase]').lightcase({
    // 在lightcase初始化之后会立即调用
    onInit : {
        foo: function() {
            alert('Lightcase process is initialized');
        }
    },
    // 在生成内容之前需要调用
    onStart : {
        bar: function() {
            alert('Lightcase process is started');
        }
    },
    // 在显示内容之前会被调用
    onFinish : {
        baz: function() {
            alert('Lightcase process is finished');
        }
    },
    // 在中止lightcase的时候会被调用
    onClose : {
        qux: function() {
            alert('Lightcase closes now');
        }
    },
    // 当lightcase进行清理时，会调用它
    onCleanup : {
        quux: function() {
            alert('Lightcase process is cleaned up');
        }
    }
});

就先写这么多，希望对大家有所帮助！

github lightcase.js 地址：https://github.com/cbopp-art/lightcase/