图片使用LightBox浏览

news/2024/12/29 1:16:07/文章来源:https://www.cnblogs.com/insus/p/18638016

在N多年前,在公司内部实现相似功能的图片浏览的网站,如公司团建,年会,聚餐,活动,外出旅游......
以前,是以二进制数据流实现的,而且数据库没有存储图片任何信息,直接访问文件夹图片,因此得写好几个ashx,附带上目录。
图集目录,

 

进入某一图集,可以看到图片展示,

点击图片左下角的绿色箭头或者点击缩略图片,均可浏览到图片原图。
点击箭头右边的小方框,也可以浏览到图片原图。

Lightbox    https://lokeshdhakar.com/projects/lightbox2/

现在已经是LightBox 2了。

现今天,Insus.NET以LightBox2再次把实现此类功能,分享出来。

 参考上面网站,虽然是英文网站,实现起来,超简单的。

在你的project的Content目录下,创建lightbox目录,把下载下来的css,images,js拷贝过来。

 

html代码,

 

上截图,#27行的js文档,


#69~#70行代码在截屏时,去移除了,可以参考下面完整代码,

 return '<a class="" href="/Original/' + item.OriginalFileName +'" data-lightbox="herb-set" data-title=""><img class="" src="/Thumbnail/' + item.ThumbnailFileName + '" alt=""/></a>';


现在来看看效果,

 

 最后,Insus.NET想说的是,LightBox 授权,https://lokeshdhakar.com/projects/lightbox2/#license



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/860658.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go基础之环境搭建

目录1 Go1.1 简介1.1.1 定义1.1.2 特点用途1.2 环境配置1.2.1 下载安装1.2.2 环境配置1.2.2.1 添加环境变量1.2.2.2 各个环境变量理解1.2.3 验证环境变量1.3 包管理工具 Go Modules1.3.1 开启使用1.3.2 添加依赖包1.3.3 配置国内包源1.3.3.1 通过 go env 配置1.3.3.2 修改环境变…

PhpWebStudy(Web服务器和环境管理器) v4.5.1

PhpWebStudy 是一款功能强大的Web服务器和环境管理器,支持macOS、Windows和Linux三大操作系统。这一工具通过简洁的安装包和直观的界面,为开发者提供了一站式的本地Wb开发环境搭建方案,让你无需繁琐配置即可启动你的Web应用。PhpWebStudy采用了业界主流技术栈,包括但不限于…

量子 Clifford group

所谓的normalizer gates 为{CNOT,H,S} (见Nielsen书),这些门的组合可以生成Clifford group。包括泡利X,Y,Z门。 SS=Z

Chat2DB(数据库管理) v3.4.1 !人工智能的数据库SQL客户端和报表工具

Chat2DB 是一个集成了人工智能的数据库SQL客户端和报表工具,支持 windows、mac 本地安装,也支持服务器端部署,web 网页访问。支持MySQL、Oracle、PostgreSQL、DB2、SQLServer、DB2、SQLite、H2、ClickHouse等。 Chat2DB 集成了 AIGC 的能力,能够将自然语言转换为 SQL,也可…

楚颖i solar应急响应 wp

2024第一届Solar杯应急响应挑战赛一、 个人信息 楚颖i三、解题情况 日志流量-1 题目文件:tomcat-wireshark.zip/web 新手运维小王的Geoserver遭到了攻击: 黑客疑似删除了webshell后门,小王找到了可能是攻击痕迹的文件但不一定是正确的,请帮他排查一下。 flag格式 flag{xxxx…

从“梦幻”到“魔幻”

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2024这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2024/homework/13315这个作业的目标 回顾软件工程实践内容,做出课程总结学号 102201630一、学期回顾 1.1回顾你对于软件工程课程的想象 学期初认为的…

AIPPT -- 分享

最好用的 AIPPT 分享如何快速打造自己的专业领域 PPT ? 推荐给大家一个网站:7牛AI (功能齐全,重要的是:免费),这个网站功能跟其他的 AIPPT 网站来比功能丝毫不少,还有就是,我是从 6 月份开始使用的,给我最大的感受就是,版本更新快,模版更新快,最重要一点还有:免费…

基于Windows环境的Kafka搭建与.NET实战开发案例

前言:基于Windows环境下的Kafka搭建(scal+zookeeper+Kafka+可视化工具)、以及使用.NET6.0进行简单的生产者与消费者的演示 一、环境部署 Kafka是使用Java语言和Scala语言开发的,所以需要有对应的Java环境,以及Scala语言环境。 【JAVA环境配置】 安装java jdk环境,下载地址…

如何处理服务器上的同步数据异步存储问题?

问题: 在多台服务器之间进行数据同步时,遇到了异步存储的问题,导致日志文件无法正确保存到目标服务器。请问如何处理服务器上的同步数据异步存储问题? 答案: 在分布式系统或多台服务器环境中,数据同步和异步存储是关键环节之一。当遇到日志文件无法正确保存到目标服务器的…

如何解决网站后台无法正常操作的问题?

当用户尝试登录网站后台时,发现后台频繁闪退,无法正常进行操作。这种情况可能会影响日常管理和维护工作。请问如何解决网站后台无法正常操作的问题? 答案: 网站后台频繁闪退且无法正常操作是一个常见但令人头疼的问题,它可能由多种原因引起,包括但不限于服务器配置、程序…

面向对象程序设计第七、八次作业总结

前言 这篇博客是完成《面向对象程序设计》(java)课程的中三次PTA作业后的总结。主要内容有:家居强电电路模拟程序 - 3 家居强电电路模拟程序 - 4题目分析 家居强电电路模拟程序 - 3 分析 这是第三次的家居强电电路模拟程序,这次的强度变高了,题目有点难。 设备包括:控制设…

服务器重装系统后无法使用初始密码进行远程连接,应如何解决?

当您遇到服务器重装系统后无法使用初始密码进行远程连接的问题时,这通常意味着在重装过程中某些配置没有正确设置或存在其他潜在问题。以下是详细的排查和解决方案:确认密码正确性:首先确保您使用的确实是服务器提供的最新初始密码。有时服务商会在邮件或其他通知中提供新的…