轻量级弹出框 lightbox

1. 引入  lightbox.css 和 lightbox.js

2.检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

3. 激活

  1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
  <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
  可选择项
: 使用 title 属性加上说明.

  2、如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名.

  <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

原文地址:https://www.cnblogs.com/yi-miao/p/8058964.html