首先先给大家介绍一个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/