1

我正在使用图片库幻灯片 Web 部件，我想显示实际图像而不是预览图像。

我找到了一个解决方案，使用 JQUERY 将预览图像的宽度扩大到页面上我想要的宽度，但这当然会破坏图像的质量。

上传的实际图片将位于以下路径：/Home%20Page%20Banners/Banner2.jpg

SharePoint 创建预览图像并放置在另一个路径中并重命名文件，例如：/Home%20Page%20Banners/_w/Banner2_jpg.jpg

我的问题是如何让预览图像显示已上传的实际完整图像而不是按比例缩小的图像？

4

1 回答 1

1

图片库 SlideShow web 部件类被标记为seal，因此无法对其进行扩展。

但它可以在客户端进行定制，更准确地说，幻灯片库 (imglib.js) 中的函数可以被覆盖。

如何在图片库幻灯片 Web 部件中显示全尺寸（原始）图像

下面描述的解决方案允许在幻灯片 Web 部件中显示原始图像。为了完成它，在幻灯片中初始化图片的功能应该被覆盖（见下面的代码）。

步骤 1. 将以下 JavaScript 代码保存到文件中，例如 SlideshowObjectInitializer.txt 并将其上传到 SiteAssets 库

<script type="text/javascript">


function SlideshowObjectInitializer() {

  ShowPic = (function(ShowPicOrig) {
      return function() {

           var ssObj = arguments[0];  //SlideShow object
           var curPicIdx=ssObj.index; //current picture index

           ShowPicOrig.apply(this, arguments); //call original ShowPic

           //apply some changes to display original picture in SlideShow control
           ssObj.image.src = ssObj.linkArray[curPicIdx]; //display original image instead of web image
           //change picture & container size to auto instead of fixed (by default web image size is used)
             ssObj.image.setAttribute('height','100%'); 
             ssObj.image.setAttribute('width','100%'); 
             var cell = ssObj.cell; 
             cell.style.width = 'auto';
             cell.style.height = 'auto';
             cell.style.display = '';
             var pcell = ssObj.cell.parentNode; 
           pcell.style.width = 'auto';
             pcell.style.height = 'auto';
      };
  })(ShowPic);

}  


ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');
</script>

步骤 2. 在幻灯片 Web 部件所在的页面上添加内容编辑器Web 部件 (CEWP)，并在内容编辑器工具窗格中的内容链接下，键入 /SiteAssets/SlideshowObjectInitializer.txt。

有关自定义幻灯片 Web 部件的更多详细信息，请关注此博文

于 2013-04-28T15:12:31.450 回答