Lightbox - 一款可实现点击缩略图,呈现大图的jQuery插件

关于Lightbox

Lightbox 是一个基于 JavaScript 的图片预览库，其主要功能是允许用户在网页上进行图像缩略图的点击展开和关闭操作。 该库支持多种浏览器并且具有响应式的布局设计，适用于任何屏幕尺寸和设备类型。Lightbox 可以提高用户体验并增加用户与网站之间的互动性。

如何使用Lightbox

步骤1：引入插件文件

把CSS放在你的页面顶部标签:

在结束/body 标签之前,在页面的底部加上Javascript

<link href="path/to/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="path/to/lightbox.js"></script>

步骤2：使用HTML初始化

一张图像。 加一个data-lightbox 属性任何图像链接,以启用lightbox.对于属性的值,请为每个图像使用唯一的名称。例如:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

影像集。 如果您有一组相关的图像,您希望合并为一个集,使用相同的data-lightbox 所有图像的属性值。例如:

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

步骤3：初始化Lightbox

使用jQuery的文档加载完毕以后执行函数，初始化Lightbox插件。

<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true
    })
</script>

参数说明

• alwaysShowNavOnTouchDevices false //如果为true，则在支持触摸的设备上始终会在查看图像集时在鼠标悬停时显示在鼠标悬停时的左右导航箭头。

• albumLabel "Image %1 of %2" //查看图像集时在标题下方显示的文本。默认文本显示当前图像编号和该集中的图像总数。

• disableScrolling false //如果为true，请在打开Lightbox时阻止页面滚动。这通过隐藏在身体上的设置溢出起作用。

• fadeDuration 600 //灯箱容器和叠加层淡入和淡出所花费的时间（以毫秒为单位）。

• fitImagesInViewport true //如果为true，则调整将在视口之外延伸的图像的大小，以使其整齐地适合视口。这使用户不必滚动查看整个图像。

• imageFadeDuration 600 //加载后图像淡入所需的时间（以毫秒为单位）。

• maxWidth //如果设置，则图像宽度将限于此数字（以像素为单位）。长宽比将无法保持。

• maxHeight //如果设置，则图像高度将限于此数字（以像素为单位）。长宽比将无法保持。

• positionFromTop 50 //灯箱容器将出现的距视口顶部的距离，以像素为单位。

• resizeDuration 700 //在不同尺寸的图像之间进行过渡时，灯箱容器为其宽度和高度设置动画所需的时间（以毫秒为单位）。

• showImageNumberLabel true //如果为false，则将隐藏表示当前图像编号和已设置图像总数（例如"image 2 of 4"）的文本。

• wrapAround false //如果为true，则当用户到达集合中的最后一张图像时，将显示向右导航箭头，他们将继续向前移动，这会将他们带回到集合中的第一张图像。