如何使用Slimbox2显示图片灯箱
本文主要介绍如何使用Slimbox 2。 Slimbox 2是一个JavaScript库,它在窗口中而不是在单独的窗口(弹出窗口)中将图像和照片显示为模式窗口。
此库需要单独使用jQuery
1.下载并安装
从 这里 下载并解压缩。 解压缩后,将css和js目录放置在任何位置。
2.加载CSS和JS
将以下内容写在html文件的 <head> 中,请根据您自己网站的环境更改路径。
<link href="css/slimbox2.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/slimbox2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[rel*=lightbox]').slimbox();
});
</script>
3.使用方法
只需将 rel =“ lightbox” 属性添加到原始图片a元素链接中。
<a href="images/sample1.jpg" rel="lightbox">画像1</a>
对于要分组并使其可导航的相关图像集,需要向属性rel的名称lightbox后添加一个组名,例如:
<a href="images/image-1.jpg" rel="lightbox-cats">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-cats">image #3</a>
如果在同一页面上有多个将灯箱应用到的链接,则当鼠标悬停在上方时,将始终显示“ PREV”和“ NEXT”按钮。
4.显示图片标题
如果要在左下角显示图像的标题,请将title属性添加到a元素。
如果需要,您甚至可以在标题中使用HTML。您必须用HTML实体替换 < 和 > 字符,并使用单引号而不是双引号。
<a href="images/sample1.jpg" rel="lightbox" title="sample">画像1</a>
5.其他功能选项
选项以以下形式设置:
$(document).ready(function() {
$('a[rel*=lightbox]').slimbox({
resizeDuration : 200,
imageFadeDuration : 200
});
});
选项 | 初始值 | 说明 |
---|---|---|
loop | false | 第一次或最后一次到达时是否存在循环 |
overlayOpacity | 0.8 | 叠加透明度 |
overlayFadeDuration | 400 | 叠加速度 |
resizeDuration | 400 | 加载图像时调整大小的速度 |
resizeEasing | swing | 缓和 |
initialWidth | 250 | 初始盒宽 |
initialHeight | 250 | 初始盒子高度 |
imageFadeDuration | 400 | 图像淡入速度 |
captionAnimationDuration | 400 | 字幕的出现速度 |
counterText | Image {x} sur {y} | 左下角显示的图像的索引文本 |
closeKeys | [27,88,67] | “ CLOSE”键盘按键代码分配 |
previousKeys | [37,80] | “ PREV”键盘的键代码分配 |
nextKeys | [39,78] | “ NEXT”键盘的键代码分配 |
Read other posts