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。如果你也有什么好用的灯箱插件,也可以在评论区一起分享哟!



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命个人博客

本文链接https://www.shaosiming.net/jskz/javascript/24.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 1 条评论,你也快来参与吧!

administrator:我有空试试

2020-10-15

回复TA

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主