带有缩略图导航的全屏灯箱画廊插件 - jQuery lightboxed

 website 下载

插件介绍

lightboxed是一个jQuery 插件，用于在全屏灯箱中显示任何内容（图像、视频、文本、画廊）。

轻巧方便。
完全响应。
导航箭头。
缩略图导航。
自定义字幕。

使用方法

1. 将灯箱插件的文件导入到文档中。

<link href="js/lightboxed/lightboxed.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/lightboxed/lightboxed.js"></script>

2. 只需将 CSS 类添加lightboxed到媒体链接，插件将完成剩下的工作。

<a href="image.jpg" class="lightboxed">Text Link</a>

3. 您还可以将内嵌内容加载到灯箱中，如下所示：

<a href="#inline" class="lightboxed">Inline content</a>
<div id="inline" style="display: none;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff;">
    Some inline content
  </div>
</div>

4. 要创建灯箱画廊，请使用以下rel属性对您的媒体进行分组：

<img class="lightboxed" 
     rel="group1" 
     src="small-1.jpg" 
     data-link="large-1.jpg" 
     alt="Image Alt 1" 
     data-caption="Caption 1" />
<img class="lightboxed" 
     rel="group1" 
     src="small-2.jpg" 
     data-link="large-2.jpg" 
     alt="Image Alt 2" 
     data-caption="Caption 2" />
<img class="lightboxed" 
     rel="group3" 
     src="small-3.jpg" 
     data-link="http://www.youtube.com/embed/Rix_3b9ThLI?list=PL8zglt-LDl-iwBHEl3Pw1IhWGp9cfgMrc"
     data-width="560"
     data-height="315" />