65.9K
CodeProject 正在变化。 阅读更多。
Home

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

Stephen Huen
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.44/5 (8投票s)

2010年4月30日

CPOL

3分钟阅读

viewsIcon

117838

downloadIcon

2766

以类似小部件的缩略图布局显示 SharePoint 图片库中的图像

Figure 1

图 1

Figure 2

图 2

引言

[该 Web 部件的 SharePoint 2013 版本请访问 这里。]

此图片缩略图 Web 部件用于 Microsoft SharePoint 2010，它以类似小部件的缩略图布局显示来自 SharePoint 图片库的图像（参见图 1）。当用户点击缩略图时，原始图像将以 Lightbox 样式打开（参见图 2）。

背景

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

接下来，我添加了 lightbox 功能，当用户点击缩略图时可以查看原始图像。有很多 Lightbox 的实现或变体，我选择了 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 2010 解决方案包括构建和部署此 Web 部件所需的所有支持文件，不包括强命名密钥文件。它充分利用了内置的 SharePoint 集成。无需再使用第三方工具或自定义的构建前和构建后脚本来构建 SharePoint 解决方案文件。

安装

如果您正在从以前的版本升级，请参阅版本历史记录以获取任何特殊的升级说明。

打开 SharePoint 2010 管理 Shell，使用 Add-SPSolution 添加解决方案文件 QuestechSystems.SharePoint.PTWebPart.wsp，如下所示

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

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

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

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

历史

  • V2.0 - 2014.07.05
    • 从 V1.0 升级说明
      1. 删除旧 Web 部件的所有实例。
      2. 使用 PowerShell 或通过 SharePoint 2010 中央管理撤销旧解决方案。
      3. 按照安装部分所述的安装说明进行操作。
    • 切换到 Lokesh Dhakar 的 Lightbox2 以实现 lightbox 功能。
    • 支持查看大于您显示器大小的图像。
    • 内置 CSS 样式，不再依赖外部 CSS。
  • V1.0 - 2010.04.30 - 初始版本
© . All rights reserved.