Picture Slideshow Web Part image size too small

Question

I have a picture library of four images. Each of these is quite large. When the Picture Slideshow Web Part is configured it shows the pictures at about 50% of their actual size. Is there a way to make them full sized? I'd like them to take up most of the width of the screen. Any help is appreciated. Thanks.

Answer 1

For displaying pictures in Slideshow web part, web images (stored under /_w folder in Picture Library) are used and not the original images. Unfortunately it is not supported to configure in web part what image type (original, web or thumbnail) should be displayed in Slideshow.

---

The solution described below allows to display original images (without re-sizing) in Slideshow web part. In order to display original image the technique with overriding ShowPic function is used (see the code below).

For embedding JavaScript on page, Content Editor web part (CEWP) is used here, for more details please follow this article

How to display original images in SlideShow web part

Step 1. Save below JavaScript code to 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 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 blog post

Answer 2

The only way I know is write a javascript customization to change the shrinks option. You could use something like this:

    $(document).ready(function() {
       var divList = $("div[id^='MSOPictureLibrarySlideshowWebPart']");
       var currImage= $("img[id$='curr']");
       divList.height('100%');
       divList.width('100%'); 
       currImage.height('150%');
       currImage.width('150%');
    });