lightBox弹出层,lightBox图片播放

lightbox演示

        Lightbox - 原来的lightbox脚本，八年后依然强劲！lightbox是基于jQuery的一款图片大图展示插件，点击缩略图，显示大图的效果。适用于商城和图片站。支持单张图片的放大显示，也支持一组图片的展示。效果不错，兼容性也比较好:Internet Explorer： lightbox-plus-jquery.js队列包括jQuery v2.x和支持IE 9 +。如果你想支持IE 6，7，8，用你自己的copy of jQuery v1.x以及lightbox.js。Chrome、Safari、Firefox、iOS Safari、iOS Chrome、Android Chrome。
1、下载最新的版本作为一个压缩文件或使用包管理器…

2、打开压缩文件，包括在/实例文件夹。

3、引入lightbox相关的js和css文件

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

    注意：1、确保jQuery已经在引入lightbox之前引入进来了，jquery版本最好是1.7以上。
         2、确保lightbox相关的图片和css文件保持一致。lightbox相关图片在您下载的压缩包的images文件夹里面。

4、初始化HTML
    添加数据灯箱属性任何图像链接，使灯箱。为该属性的值，每个图像使用一个唯一的名称。例如：

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">缩略图地址</a>

    href里面是图片对应的大图地址。
    如果你想显示一个标题，添加一个data-title属性。

    如果你有一组相关的图片，你想结合成一组，使用相同的数据灯箱属性值对所有图像。例如：

<a href="images/image-2.jpg" data-lightbox="roadtrip">缩略图地址2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">缩略图地址3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">缩略图地址4</a>

5、调用lightbox：

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

参数说明：

参数	默认值	描述
alwaysShowNavOnTouchDevices	false	如果是true，在观看图像集时出现在鼠标悬停的左右的导航箭头，将在支持触摸的设备上看到。
albumLabel	"Image %1 of %2"	当查看图像集时，该文本显示如下。默认的文本显示当前图像数字和设置的图像总数。
disableScrolling	false	如果是true，阻止页面滚动灯箱是开放而。这作品的设置溢出隐藏在身体。
fadeDuration	500	它需要灯箱的容器和叠加的淡入和淡出的时间，以毫秒为单位。
fitImagesInViewport	true	如果是true，大小的图像，将使他们适合在视口里面。这样就可以将用户从滚动到滚动来查看整个图像。
maxWidth		如果设置，图像高度将被限制在这个数字，像素。方面的比例将无法维持。
maxHeight		如果设置，图像宽度将被限制在这个数字，像素。方面的比例将无法维持。
positionFromTop	50	从顶部的视口，灯箱容器会出现距离，以像素为单位。
resizeDuration	700	它需要灯箱的容器使其宽度和高度时，不同大小的图像之间的过渡时间，以毫秒为单位。
showImageNumberLabel	true	如果为false，文本表示当前图像的数量和总有一些图片集（如“图2”4）将被隐藏。
wrapAround	false	如果是true，当用户在一组中到达最后一个图像时，右键导航箭头将出现，并且它们将继续向前移动，将把它们带回到集合中的第一图像。