jQuery炫酷图片预览Lightbox插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > jQuery炫酷图片预览Lightbox插件
jQuery炫酷图片预览Lightbox插件
分享:

    插件介绍

    这是一款使用jQuery制作的画廊图片预览lightbox插件。该Lightbox插件小巧、简单、易用,效果也非常炫酷。它在图片放大和属性时有很酷的淡入淡出动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-16
    阅读:
简要教程

jquery-lighter是一款炫酷jQuery图片预览Lightbox插件。

安装插件

要使用这个lightbox插件,首先需要引入必要的文件:jQuery和jquery.lighter.js以及jquery.lighter.css文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.lighter.js" type="text/javascript"></script>
<link href="stylesheets/jquery.lighter.css" rel="stylesheet" type="text/css" />   
                

这个lightbox插件已经注册在 http://bower.io/,你可以通过bower来安装:

npm install -g bower
bower install lighter
                

该lightbox插件还注册在https://rails-assets.org/,你还可以通过 Ruby 或 Rails 来安装它:

Gemfile
+ source 'https://rails-assets.org'
...
+ gem 'rails-assets-lighter'
                
application.css
/*
 ...
 *= require lighter
 ...
*/
                
application.js
//= require jquery
...
//= require lighter
                

使用方法

该lightbox插件的使用方法非常简单,在引入必要的文件之后,只需要按以下结构变形html代码即可,该图片预览插件会在DOM加载完毕后自动运行。

<a href="samples/sample-01.png" data-lighter>
  <img src="samples/preview-01.png" />
</a>
<a href="samples/sample-02.png" data-lighter>
  <img src="samples/preview-02.png" />
</a>
<a href="samples/sample-03.png" data-lighter>
  <img src="samples/preview-03.png" />
</a>
<a href="samples/sample-04.png" data-lighter>
  <img src="samples/preview-04.png" />
</a>
<a href="samples/sample-05.png" data-lighter>
  <img src="samples/preview-05.png" />
</a>
<a href="samples/sample-06.png" data-lighter>
  <img src="samples/preview-06.png" />
</a>
                

更详细的教程请参考:http://ksylvest.github.io/jquery-lighter/