帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2021-06-20 网页特效 评论

插件介绍

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" />
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言