图片缩略图 Web 部件 (SharePoint 2013)

• 下载 PTWebPart.zip - 130.3 KB

图 1

图 2

引言

此图片缩略图 Web 部件用于 Microsoft SharePoint 2013，以小组件式缩略图布局显示 SharePoint 图片库中的图像（参见图 1）。 当用户单击缩略图时，原始图像以 灯箱样式打开（参见图 2）。 这是从我的 SharePoint 2010 版本改编而来，并提供了以下改进

• 支持查看大于您显示器尺寸的图像。
• 内置 CSS 样式，因此不再依赖外部 CSS。

背景

对于存储在 SharePoint 图片库中的图像，缩略图通过引用 URL /<图片库 URL>/_t/<图像名称>_<图像扩展名>.jpg 生成。 此 URL 存储在字段 EncodedAbsThumbnailUrl 中。 但是，缩略图对我来说太大了。 我没有使用一些自定义 HTTP 处理程序来生成较小尺寸的缩略图，而是决定按原样使用缩略图，但将它们用作 CSS 背景图像。 这样，我可以通过调整与背景图像关联的块元素的大小来控制缩略图的“外观”大小，从而避免直接调整缩略图图像的任何纵横比问题。

接下来，我添加了灯箱功能，以便在用户单击缩略图时查看原始图像。 灯箱有很多实现或变体，我决定使用 Lokesh Dhakar 的 Lightbox2，因为它尺寸紧凑且支持文件数量相对较少。

描述

PictureThumbnailsWebPart 具有以下 public 属性

• SiteUrl - (站点 URL) 站点的服务器相对 URL。如果留空，则使用当前站点。
• ListTitle - (图片库名称) 图片库的名称。
• SortField - (排序字段) 可用选项为 Name、Title、Created 和 Modified。
• SortOrder - (排序顺序) 可用选项为 Ascending、Descending 和 Random。 选择 Random 时，将忽略 SortField。
• RowLimit - (最大图片数量) 默认为 0，表示无限制。
• ShowAsImageSet - (将图像分组为单个集合) 默认为 false。 如果设置为 true，所有图像将被视为 Lightbox2 中图像集的一部分，允许向前和向后导航。
• IncludeJQuery - (包含 jQuery?) Web 部件是否应包含自己的 jQuery 文件？ 默认为 true。 将其设置为 false 以使用您的自定义母版页的 jQuery JavaScript 文件。

Web 部件使用资源文件来存储所有消息和属性属性 UI 字符串。 它演示了如何开发继承 WebDescriptionAttribute、WebDisplayNameAttribute 或 CategoryAttribute 的自定义类，并从您自己的资源管理器返回本地化的 string。

提供的 Visual Studio 2013 解决方案包含构建和部署此 Web 部件所需的所有支持文件，减去强名称密钥文件。 它充分利用了内置的 SharePoint 集成。 构建 SharePoint 解决方案文件不再需要第三方工具或自定义预构建和后构建脚本。

安装

打开SharePoint 2013 管理外壳，使用 Add-SPSolution 添加解决方案文件 QuestechSystems.SharePoint.PTWebPart.wsp，例如

Add-SPSolution "C:\_deployment\QuestechSystems.SharePoint.PTWebPart.wsp"

转到SharePoint 2013 管理中心/系统设置/管理场解决方案。 将安装的解决方案部署到选定的 Web 应用程序。 在部署解决方案的网站集中，激活网站集功能Questech Systems Picture Thumbnail Web Part。 之后，图片缩略图 Web 部件（在 Questech Systems 下列出）应该可供您添加到页面。

要控制每行缩略图的数量，请在 Web 部件属性的“外观”下指定 Web 部件的固定宽度。

请注意，虽然此 Web 部件已根据 The Code Project Open License 获得许可，但 Lightbox2 已根据 Creative Commons Attribution 2.5 License 单独获得许可。

历史

• V1.0 - 2014.06.03 - 初始版本