11

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.

1
  • 1
    If anyone still have problem with 1st picture being small after adding code prvided by Vadim, try to add Content Editor above Slideshow so it will load before it ;) Aug 8, 2017 at 10:00

2 Answers 2

16

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

5
  • 2
    Vadim Gremyachev, Your code worked great... except... it does not look correct when the page first renders. Once the slideshow viewer starts cycling through slides, your code kicks in and displays the images sized correctly but it seems when my page is initially pulled up, the thumbnail view is displayed until the next image in the cycle is put up. Any ideas?
    – user36964
    Dec 12, 2014 at 17:01
  • 1
    Annie, you could find a workaround for this issue in the same post (comments section) Apr 1, 2015 at 8:18
  • 1
    Hey Vadim, you are really a great man :) Thank you!!! That saved me much time again
    – lex
    Aug 26, 2015 at 16:07
  • 1
    Thank for your answer. It is really helpful
    – dant
    Jun 29, 2016 at 17:09
  • 1
    On the page I added this to, the images were resizing, to prevent this, I added cell.parentNode.parentNode.parentNode.parentNode.style.width = "100%"; below var cell = ssObj.cell;
    – moonpatrol
    Nov 30, 2016 at 5:48
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%');
    });
1

Not the answer you're looking for? Browse other questions tagged or ask your own question.