在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