How can I fix the image size in a "Picture Library Slideshow Web Part"

2014-09-11

Question

_{Thursday, September 11, 2014 2:46 PM}

When I upload images to be used in the Slideshow Web Part they become skewed because they are different sizes. Is there a way to fix this besides uploading images that are all the same size?

Thanks,

Kathleen

All replies (2)

_{Thursday, September 11, 2014 3:14 PM ✅Answered | 1 vote}

http://webcache.googleusercontent.com/search?q=cache:bfUcFkD_bxgJ:spcodes.blogspot.com/2012/08/display-slide-show-images-within-fixed.html+&cd=4&hl=en&ct=clnk&gl=in

Display Slide Show Images within fixed size

The Picture Library Slide Show Web Part show the images stored in a picture library with slide show effect.
This slide show web part displays the images with it's original size. Due to this the web part changes its size according to the image size. If we want the slide show to run within the specific size on the page then we need to control the size of the images to the fixed length during runtime.

To achieve this we need to add the CEWP above the picture Library Slide Show web part & insert the following script in that web part.

We can fix the height & width of the image in the .ms-WPBody TD IMG css.

http://sharepoint.stackexchange.com/questions/66028/picture-slideshow-web-part-image-size-too-small

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.

If this helped you resolve your issue, please mark it Answered

_{Tuesday, April 17, 2018 11:53 AM}

Hi, Great solution! Worked right away. Thanks a lot for your help!!

Share via