lightcase.js-智能灵活的jQuery Lightbox插件

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

使用方法

使用该lightbox插件需要在页面中引入lightcase.css和jQuery，以及lightcase.js文件。

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

HTML结构

创建一个带data-rel="lightcase"特性的超链接用于打开lightbox。

<a href="path/to/media.jpg" data-rel="lightcase">Your link description or thumb</a>       
                

初始化插件

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

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

显示标题

如果你需要添加一个标题，可以简单的添加一个title属性。

<a href="path/to/media.jpg" data-rel="lightcase" title="Your title">Your link description or thumb</a>                  
                

调用不同存储的图片

lightcase.js会根据浏览器视口的大小来调用不同尺寸的图片。你可以在data-lc-href属性中设置不同尺寸的高清大图。

<a href="" data-lc-href="path/to/media1_small.jpg, 
               path/to/media1_large.jpg 2x" 
      data-rel="lightcase">Your link description or thumb</a>
<a href="" data-lc-href="path/to/media2_default.jpg, 
                               path/to/media2_small.jpg 320w, 
                               path/to/media2_small_2x.jpg 320w 2x"
           data-rel="lightcase">Link</a>               
                

图片分组

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

<a href="path/to/media1.jpg" data-rel="lightcase:myCollection">Your link description or thumb</a>
<a href="path/to/media2.jpg" data-rel="lightcase:myCollection">Your second collection item</a>
<a href="path/to/media3.jpg" data-rel="lightcase:myCollection">Your third item, and so on...</a>                  
                

在每个分组里面还可以设置不同的类别。

<a href="path/to/media1.jpg" 
      data-rel="lightcase:myCollection" 
      data-lc-categories="myCategory1 myCategory2">...</a>
<a href="path/to/media2.jpg" 
      data-rel="lightcase:myCollection" 
      data-lc-categories="myCategory1">...</a>
<a href="path/to/media3.jpg" 
        data-rel="lightcase:myCollection" 
        data-lc-categories="myCategory2 myCategory3 myCategory4">...</a>                 
                

幻灯片

如果分组中带有:slideshow属性，将会使该分组进入幻灯片模式。

<a href="path/to/media.jpg" 
      data-rel="lightcase:myCollection:slideshow" 
      title="Your title">Your link description or thumb</a>                  
                

高级

回调函数

$('a[data-rel=lightcase]').lightcase({
  // Would be called immediately after lightcase is initialized
  onInit : {
    foo: function() {
      alert('Lightcase process is initialized');
    }
  },
  // Would be called before generating content
  onStart : {
    bar: function() {
      alert('Lightcase process is started');
    }
  },
  // Would be called right before showing the content
  onFinish : {
    baz: function() {
      alert('Lightcase process is finished');
    }
  },
  // Would be called when aborting lightcase
  onClose : {
    qux: function() {
      alert('Lightcase closes now');
    }
  },
  // Would be called when lightcase does the cleanup
  onCleanup : {
    quux: function() {
      alert('Lightcase process is cleaned up');
    }
  }
});                  
                

如何从上面的回调函数中接收所有的DOM元素？

// All public available objects and methods
console.log(lightcase);
 
// Get the origin link object as a jQuery ready object
console.debug($(this));
 
// Get a specific Lightcase DOM object (since v2.3.0)
console.debug(lightcase.get('case'));                  
                

如何在一个空的弹出框中打开Lightcase?

// With javascript only and without any trigger link
lightcase.start({
  href: '#',
  // more options like width, height, etc.
});
 
// From a simple link within markup
<a href="#" data-rel="lightcase">Open blank popup</a>                  
                

如何以编程的方式关闭Lightcase？

// Call public function to close lightcase
lightcase.close();
 
// Example for automatically closing lightcase after five seconds using a hook function
$('#foo').lightcase({
  onFinish: {
    autoClose: function () {
      setTimeout(function () {
        lightcase.close();
      }, 5000);
    }
  }
});                  
                

如果你需要手动调整lightcase的尺寸，可以调用resize()方法。

lightcase.resize();                  
                

移动手机

如果你需要支持移动手机的swipe事件，需要引入jquery.events.swipe.js文件。

<script type="text/javascript" src="path/to/jquery.events.touch.js"></script>
$('a[data-rel^=lightcase]').lightcase({
  swipe: true
});                  
                

移动手机的全屏模式

首先要确保fullscreenModeForMobile参数可用，然后在你的页面<head>中注明下面的<meta>标记。

<meta name="viewport" content="width=device-width, initial-scale=1">
                

配置参数

lightcase.js插件的github地址为:https://github.com/cbopp-art/lightcase/