lightbox

lightbox

1. 下载 Github .

2. 导入css jQuery light.box

<link rel="stylesheet" href="http://biger.applinzi.com/api/css/lightbox.css">
<script src="http://biger.applinzi.com/api/js/jquery-1.11.0.min.js"></script>
<script src="http://biger.applinzi.com/api/js/lightbox.min.js"></script>

3. 初始化html
   单张图片。将data-lightbox属性添加到任何图像链接以启用灯箱。对于属性的值，请为每个图像使用唯一的名称。例如：

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

可选参数

• data-title如果要显示标题，请添加属性。
• data-alt如果要设置链接图像的alt属性，请添加一个属性。

图像集。如果您有一组要合并为一组的相关图像，请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>

案例

<p>
    <a href="img/demopage/image-1.jpg" data-lightbox="g">
        <img src="img/demopage/thumb-1.jpg" alt="">
    </a>
</p>

<p><a href="img/demopage/image-3.jpg" data-lightbox="groud" title="图片3"><img src="img/demopage/thumb-3.jpg" alt=""></a></p>
<p><a href="img/demopage/image-4.jpg" data-lightbox="groud" title="图片3"><img src="img/demopage/thumb-4.jpg" alt=""></a></p>
<p><a href="img/demopage/image-5.jpg" data-lightbox="groud" title="图片3"><img src="img/demopage/thumb-5.jpg" alt=""></a></p>

参数

如果要更改任何默认选项，请调用option方法。

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