网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
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" />
转载请注明来源:带有缩略图导航的全屏灯箱画廊插件 - jQuery lightboxed
本文永久链接地址:https://www.moyouyouw.cn/code/24521.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论