网站首页 全球最实用的IT互联网站!

人工智能P2P分享Wind搜索发布信息网站地图标签大全

当前位置:诺佳网 > 软件工程 > 后端开发 > .Net >

图片使用LightBox浏览

时间:2024-12-29 01:15

人气:

作者:admin

标签:

导读:在N多年前,在公司内部实现相似功能的图片浏览的网站,如公司团建,年会,聚餐,活动,外出旅游......以前,是以二进制数据流实现的,而且数据库没有存储图片任何信息,直接访问...

在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



温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
本类排行
相关标签
本类推荐

CPU | 内存 | 硬盘 | 显卡 | 显示器 | 主板 | 电源 | 键鼠 | 网站地图

Copyright © 2025-2035 诺佳网 版权所有 备案号:赣ICP备2025066733号
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。

关注微信