图片利用LightBox浏览
在N多年前，在公司内部实现相似功能的图片浏览的网站，如公司团建，年会，会餐，运动，外出旅游......以前，是以二进制数据流实现的，而且数据库没有存储图片任何信息，直接访问文件夹图片，因此得写好几个ashx，附带上目录。
图集目录，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228234009499-157756633.png
进入某一图集，可以看到图片展示，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228234116031-1147652027.png
点击图片左下角的绿色箭头或者点击缩略图片，均可浏览到图片原图。
点击箭头右边的小方框，也可以浏览到图片原图。
Lightbox https://lokeshdhakar.com/projects/lightbox2/
现在已经是LightBox 2了。
现今天，Insus.NET以LightBox2再次把实现此类功能，分享出来。
参考上面网站，固然是英文网站，实现起来，超简单的。
在你的project的Content目录下，创建lightbox目录，把下载下来的css,images,js拷贝过来。
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228235020934-901286743.png
html代码，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228235756345-265557162.png
上截图，#27行的js文档，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241229000551564-1539180848.png
#69~#70行代码在截屏时，去移除了，可以参考下面完整代码，
return '<atarget="_blank" href="https://www.cnblogs.com/Original/' + item.OriginalFileName +
'" data-lightbox="herb-set" data-title=""><imgsrc="https://www.cnblogs.com/Thumbnail/' + item.ThumbnailFileName + '" alt=""/></a>';
现在来看看效果，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241229010416830-1840790165.gif
末了，Insus.NET想说的是，LightBox 授权，https://lokeshdhakar.com/projects/lightbox2/#license
https://img2024.cnblogs.com/blog/28036/202412/28036-20241229010740795-917121530.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]