Tuesday, 7 August 2012

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.

<style type="text/css">
.ms-WPBody TD {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: auto !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.ms-WPBody TD DIV {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100% !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.ms-WPBody TD IMG {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 260px !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 190px !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px; align: center
}
.s4-wpcell-plain {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100% !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.ms-PartSpacingVertical {
    MARGIN-TOP: 0px
}
.style1 {
    COLOR: #808080
}</style>


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

Posted by at

10 comments:

  1. Anonymous13 February 2013 at 12:45

    It works! Very helpful piece of code. Thanks

    ReplyDelete
  2. Bhaskar Dhone8 March 2013 at 22:55

    I tried this code.. it works , but the issue is , it is affection hight and widht of other webpart on that page. How to overcome that ?

    ReplyDelete
    Replies
    1. Mahesh's SharePoint Fundas10 March 2013 at 22:06

      Try the jquery from the following link which will restrict the height & width of only the Slide Show Web part
      http://spcodes.blogspot.in/2012/12/jquery-to-restrict-image-size-to-fit.html

      Delete
  3. Clumsy Vegan26 June 2013 at 09:12

    This doesn't seem to work for me. After pasting the code into the page, it appears to function correctly ... until I click save. Then it's jacked again. Any ideas?

    ReplyDelete
  4. Unknown15 August 2013 at 00:18

    Tried the code and the image size worked but now I have the tool bar below which gives the options to pause forward are back are now very big. How do I resize them?

    ReplyDelete
    Replies
    1. Anonymous15 July 2014 at 02:41

      I have same problem, did you achieve your goal?

      Delete
    2. Anonymous28 August 2014 at 20:56

      i have the same problem. were you able to fix this error?

      Delete
  5. Anonymous11 March 2014 at 10:46

    Beautiful. Thank you.

    ReplyDelete
  6. Anonymous16 January 2015 at 17:10

    sorry but i am abit confused
    i have a subsite and on it i have added the picture library slideshow
    u said we need to add a CEWP above the picture library slideshow. how is that done?
    and how do i add the code?
    are u saying i should add the CEWP first and inside of it add the picture library slideshow? or i should add them seperatly? how do i add the code above on CEWP

    thanks

    ReplyDelete
  7. Anonymous18 April 2018 at 04:29

    It doesn't work for me. Is there a video of this somewhere?

    ReplyDelete

Subscribe to: Post Comments (Atom)