作为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，全功能试用版中有这个例子的全部源代码。

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