使用lightbox显示相册

点击图片查看效果:

安装与设置

下载链接:

http://download2us.softpedia.com/dl/42dfdcfa945d253049a3886c658765eb/52266060/600044190/webscripts/javascripts/jquery-lightbox-0.5.zip

解压后的目录:

jayen@mymbp[jquery-lightbox-0.5]$tree -L 2
.
├── css
│   └── jquery.lightbox-0.5.css
├── images
│   ├── lightbox-blank.gif
│   ├── lightbox-btn-close.gif
│   ├── lightbox-btn-next.gif
│   ├── lightbox-btn-prev.gif
│   └── lightbox-ico-loading.gif
├── index.htm
├── js
│   ├── jquery.js
│   ├── jquery.lightbox-0.5.js
│   ├── jquery.lightbox-0.5.min.js
│   └── jquery.lightbox-0.5.pack.js
└── photos
    ├── image1.jpg
    ├── image2.jpg

将 css,images,js目录下的文件,放在自己的jekyll站点目录路径参考别的css和js，放在一起.

主题模板文件标签插入刚才的js和css文件

vim _layouts/default.html

添加以下内容:

<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" />    
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
    $('a[rel*=lightbox]').lightBox();
});
</script>

再参考解压目录中的index.html中定义的相册的css样式，把相册的css写到jquery.lightbox-0.5.css中,方便以后修改

lightbox使用的图标默认路径在网页相同路径下的images文件夹，修改jquery.lightbox-0.5.js文件中的定义

imageLoading:           '/images/lightbox-ico-loading.gif',     // (string) Path and the name of the loading icon
imageBtnPrev:           '/images/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
imageBtnNext:           '/images/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
imageBtnClose:          '/images/lightbox-btn-close.gif',       // (string) Path and the name of the close btn
imageBlank:             '/images/lightbox-blank.gif',           // (string) Path and the name of a blank image (one pixel)

以上修改好后应该就可以看到效果了，除了点击按钮，还可以通过左右键盘，进行下一张图片的预览。只是相册还要用到html去写,有时间写个插件简化一下相册。