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>
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!