使用LEADTOOLS 创建HTML5缩略图图片库:25天25个项目

发布时间:2016/12/26 00:12 发布者:Richard.Ma

返回博客中心

作为LEAD Technologies 25周年纪念的一部分,我们正在搞一个“25天收集25个项目来展示LEAD功能强度和易用性”的活动。今天要展示的项目来自于贾斯汀的分享。

它是做什么的

使用LEADTOOLS第19版,ASP.NET中该 C#编写的应用程序可以显示缩略图图片库。

 

所使用的功能

· HTML5 Viewer

 

开发进程日志

大家好,我是贾斯汀。我打算开始编写一个简单的ASP.NET图片库应用程序。在此之前,我从来没有尝试过从头开始创建一个ASP.NET应用程序。

我要用后置代码C#来创建一些图像目录的缩略图。然后,我会将其全部在HTML5查看器中显示出来。

我将从后端开始该项目。我要用RasterImage.CreateThumbnail来生成图像缩略图。且我只需要将文件夹中的图像全部循环播放。

Documentation: RasterImage.CreateThumbnail

好,现在缩略图已经生成完毕。我打算使其成为一个静态的WebMethod 方法,并在应用程序启动时调用它。这个过程大约花了15分钟时间。在前端……

我是以自己的标记中一个基本的查看器<div> 来启动该项目的,随后,又对UI进行了清理。对于该图片库的视图方面,我会考虑使用ImageViewerVerticalViewLayout

Documentation: ImageViewerVerticalViewLayout

我已经将所有图片的缩略图作为单独的ImageViewerItems进行了加载。 在ImageViewerVerticalViewLayout.Columns = 0的情况下,图片库网格是基于窗口宽度的自动动态网格。这 实在是棒极了!

当我点击一个缩略图时,是想打开与所点击项目相对应的图像的全分辨率图像。为了实现这一目标,我还需要将一个ImageViewerSelectionModeto添加到该查看器的InteractiveModes 集合。

我为所选择的项目添加了一个处理程序。而且,我将相对应的全分辨率图像的URL作为ImageViewerItem的标签添加到了每个缩略图的ImageViewerItem上,所以,要想切换到全分辨率的图像是非常简单的。

需要查看全分辨率图像时,我可以直接切换到一个ImageViewerSingleViewLayout页面。这实在是太容易了!

现在,我需要对UI进行清理:包括添加页眉和页脚,并添加一个后退按钮以便从全分辨率图像返回。因为新添加了页脚,所以我需要一些窗口的计算样板。 Grr.

至此,该程序总算全部完成了。总之,总共只花了我5个小时的时间,这个漂亮的图片库就可以投入运转了。这样,无论遇到怎样挑剔的CSS,从头开始制作这样一个动态的UI都不会耗费更长的时间了。

 

下载该项目

该示例项目的源代码您可以点击这里进行下载。

17 HTML5 Image Gallery.zip (336.92 kb)

 

支持

关于其他产品的更多信息,请访问我们的官方网站

欢迎下载免费的全功能评估版SDK,全功能试用版中有这个例子的全部源代码。

同时欢迎您使用评估版期间的免费技术支持


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网