图片利用LightBox浏览

打印 上一主题 下一主题

主题 904|帖子 904|积分 2712

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

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

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

Lightbox    https://lokeshdhakar.com/projects/lightbox2/
现在已经是LightBox 2了。

现今天,Insus.NET以LightBox2再次把实现此类功能,分享出来。
 参考上面网站,固然是英文网站,实现起来,超简单的。

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

 
html代码,

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



#69~#70行代码在截屏时,去移除了,可以参考下面完整代码,
  1. return '<a  target="_blank" href="https://www.cnblogs.com/Original/' + item.OriginalFileName +
  2.      '" data-lightbox="herb-set" data-title=""><img  src="https://www.cnblogs.com/Thumbnail/' + item.ThumbnailFileName + '" alt=""/></a>';
复制代码
现在来看看效果,

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





免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

正序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

麻花痒

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表