Question

我正在使用Picture Library SlideShow Web Part，我想显示实际图像而不是预览图像。

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

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

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

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

Answer 1

Picture Library SlideShow网络部件类标记为sealed，因此无法扩展它。

但它可以在客户端进行自定义，可以覆盖幻灯片库（imglib.js）中更精确的功能。

如何在图片库幻灯片网页部件

中显示全尺寸（原始）图像

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

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

<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.在幻灯片网页部件所在页面上添加Content Editor网页部件（CEWP），在内容编辑器工具窗格中的内容链接下，键入/SiteAssets/SlideshowObjectInitializer.txt。

有关自定义幻灯片网页部件的详细信息，请按照this blogpost

进行操作

SharePoint 2010 - 图片库幻灯片Web部件

1 个答案:

如何在图片库幻灯片网页部件