分享菜鸟级的PHP采集教程与视频解析,HTML代码模板免费资源分享平台

弹出层图片Lightbox画廊插件!全屏预览缩放等

13 10月
作者:七哥| 分类:生活随笔| 发布时间:2020年10月13日 |标签:图片 插件 Spotlight.Js 弹出层 画廊 Lightbox

本来我是没打算加这么一个功能在网站的,但是有一个人需要用,然后我就给弄了进来。今天也是来和大家分享一下,毕竟这么一个功能还是比较实用的。

spotlight.js是一款js弹出层Lightbox图片画廊插件。该插件在点击图片的缩略图时,以lightbox的方式弹出图片画廊,支持对图片进行放大、缩小、全屏、前后切换等操作。

代码部分

首先引入spotlight.js文件

<script src="../js/spotlight.bundle.js"></script>

然后添加spotlight.js的组件
 <div id="spotlight" style="transition: none 0s ease 0s;">
    <div class="drag"></div>
    <div class="preloader"></div>
    <div class="scene">
        <div class="pane"></div>
    </div>
    <div class="header">
        <div class="page"></div>
        <div class="icon fullscreen"></div>
        <div class="icon autofit"></div>
        <div class="icon zoom-out"></div>
        <div class="icon zoom-in"></div>
        <div class="icon theme"></div>
        <div class="icon player"></div>
        <div class="icon close"></div>
    </div>
    <div class="progress"></div>
    <div class="arrow arrow-left"></div>
    <div class="arrow arrow-right"></div>
    <div class="footer">
        <div class="title"></div>
        <div class="description"></div>
    </div>
</div>
给需要记载div框架部分内的img标签内自动赋予class值
 <script>    
// 动态加载图片灯箱    
var par = document.getElementById("newsimg");   // newsimg 可以自定义
var lis = par.getElementsByTagName("img");    
for(var i= 0; i < lis.length; i++){    
lis[i].className = "spotlight";    
}    
</script>
最后在需要加载的div框架内添加id
<div class="XXXXX" id="自定义的id">...</div>

其实很简单的,毕竟都是别人做好的插件,自己只需要引入js,然后按照别人提供的方法加入到我们的网页中就可以了!其实有很多类似的灯箱插件,但是spotlight.js比较精简,而且功能也比较齐全,所以我个人比较倾向spotlight.js。如果你也有什么好用的灯箱插件,也可以在评论区一起分享哟!

下载地址:

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

浏览74 评论0
返回
目录
返回
首页
酷我音乐解析 PHP禁止外部访问调用API代码

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。