I am using the Picture Library SlideShow Web Part and I want to show the actual image not the preview image.

I found a solution to use JQUERY to expand the width of the preview image to the width I want on the page, but this of course ruins the quality of the image.

The actual image the was uploaded will be in a path: /Home%20Page%20Banners/Banner2.jpg

SharePoint creates a preview images and placed is in another path and renames the file, for example: /Home%20Page%20Banners/_w/Banner2_jpg.jpg

My question is how can I get the preview image to show the acutal full image that was uploaded and not the scaled down image?

• sharepoint

Picture Library SlideShow web part class is marked a sealed, so there is no way to extend it.

But it could be customized on the client side, to be more precise functions from Slideshow library (imglib.js) could be overridden.

---

How to display full-sized(original) images in Picture Library Slideshow web part

The solution described below allows to display original images in Slideshow web part. In order accomplish it the function for initializing picture in slideshow should be overridden (see the code below).

Step 1. Save below JavaScript code to the file, for example in SlideshowObjectInitializer.txt and upload it to 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>

Step 2. Add Content Editor web part (CEWP) on page where Slideshow web part is located and in the Content Editor tool pane, under Content Link, type /SiteAssets/SlideshowObjectInitializer.txt.

---

For more details about customizing Slideshow web part please follow this blogpost