Remove empty space in Picture Library Slideshow web part

I'm using Picture Library Slideshow web part in one of my pages. The web part itself is working fine, but I'm a bit annoyed by the white space the web part is consuming.
The web part puts lots of empty space between the web part header and the picture and also to the bottom of the web part.
The Slideshow web part generates the CSS on the fly, so I cannot really get a control of it cause it doesn't have any static CSS classes(that I know of, at least).
How could I get rid of these white spaces?

Hi Pekch,
Thanks for your post.
You can achieve this using JQuery.
1.      
Download
JQuery to your SharePoint Server, and then add a Content Editor Web Part to the page;
2.      
View the source code using IE developer(Press F12), the code likes below:
<td style="width: 195px; height: 213px;">
                <div style="..." id="MSOPictureLibrarySlideshowWebPart_ctl00_m_g_ffa17524_ffa7_44e7_974c_1756a39257b9_cell">
                </div>
</td>
3.      
So now, you can find the control whose id is started with “MSOPictureLibrarySlideshowWebPart” using the JQuery Code below:
jQuery('div[@id^=”MSOPictureLibrarySlideshowWebPart”]')
4.      
Remove the style of the “div” and his parent “td”. Because there is a “Width” attribute in both levels.
More information:
http://weblogs.asp.net/jan/archive/2010/10/05/getting-started-with-jquery-templates-and-sharepoint-2010.aspx
http://www.bennadel.com/blog/1003-Cool-jQuery-Predicate-Selectors.htm

Similar Messages

  • Eliminate White Space in Picture Library Slideshow Web Part

    On my site, I am using picture library slideshow web parts on two different pages, and one of them is giving me trouble with unwanted white space between the photos and the back, pause, forward control buttons (see photo below).
    In an attempt to resolve this issue, I have tried numerous things. I have resized the width and height of the web part itself to many different sizes, but to not avail. I have cropped and resized all of the photos to be the exact same size of 300x200
    pixels. I have used CSS to display the photos to their actual size rather than the standard preview size. With all of this in mind, my second photo library web part on another page works perfectly. This was white space problem was only an issue until
    I resized/cropped the photos in that case. For this page, however, that solution is not working.
    Does anyone have any clue as to how I can remove this unwanted white space?
    Thank you!

    Hi Stacey,
    From your description, you would like to remove white space in picture library slideshow web parts. You used CSS to solve it however a web part still show white spaces.
    Please press F12 and see if there is div tag in white space, if there is, try remove it.
    http://365.webbrewers.com/Pages/webbrewerstest.aspx
    In addition, try edit web part properties > Display with > choose No Title or Description.
    Here is a similar thread for your reference:
    http://social.technet.microsoft.com/Forums/en-US/1e63661f-0183-44e7-843a-cca58a20cddc/remove-empty-space-in-picture-library-slideshow-web-part?forum=sharepointgeneralprevious 
    Regards,
    Rebecca Tu
    TechNet Community Support

  • SharePoint 2013 shows the same picture library after add more than two picture library slideshow web part in one page.

    The environment is SP2013 with SP1, I had check the KB, but don't have any hotfix about this.
    I had try it on the different fram, also the same result.
    I try it on sharepoint online is work. So I think that must have hotfix about this.
    I find there is someone have the sam problem.
    http://sharepoint.stackexchange.com/questions/70944/picture-library-slideshow-issue-with-multiple-libraries
    Some snapshot about this :
    Vinci Wang

    Hi Vinci,
    Thanks for posting your issue, This is a known issue in 2013.  You could have multiple slideshow
    webparts on a page in 2010, but it won't work in 2013.  As of now there is no hot fixes for this issue. you can try code mentioned in below URL
    https://social.technet.microsoft.com/Forums/sharepoint/en-US/5ca65f7f-770b-4b0f-8e40-d08578a6442b/sharepoint-2013-picture-library-slideshow-web-part-image-not-displaying-correct-size
    Also, check out below mentioned URLs to know more about this issue and fixes
    http://sharepoint.software.tech.answers.ninja/post/70944
    https://social.msdn.microsoft.com/Forums/office/en-US/63b2ce8c-5f31-4a39-934e-6d759e9afa0c/picture-library-slideshow-web-part?forum=sharepointgeneralprevious
    http://blog.vgrem.com/2013/04/27/beyond-the-slideshow-web-part-capabilities-in-sharepoint-2010/
    I hope this is helpful to you, mark it as Helpful.
    If this works, Please mark it as Answered.
    Regards,
    Dharmendra Singh (MCPD-EA | MCTS)
    Blog : http://sharepoint-community.net/profile/DharmendraSingh

  • Picture Library Slideshow Web Part

    I am able to create a slide show via Picture Library Slideshow Web Part but the title and description will not show up. I have tried all the options but
    only the picture shows and not the picture title. I was hoping to have the picture title appear below the image. Can this be fixed or is it something I have to do without?
    Thank you.

    Hi Sarah,
    According to your description, my understanding is that you want to show Title of the image under the image in Picture Library Slideshow Web Part.
    I recommend to edit the Picture Library Slideshow Web Part and select Title only below image under Display with and make sure that the picture in the picture library has value in Title field.
    Best regards.
    Thanks
    Victoria Xia
    TechNet Community Support

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

    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

    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.
    <style type="text/css">
    .ms-WPBody TD {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- 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- 0px
    .ms-WPBody TD DIV {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- 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- 0px
    .ms-WPBody TD IMG {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- 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- 0px; align: center
    .s4-wpcell-plain {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- 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- 0px
    .ms-PartSpacingVertical {
        MARGIN-"color:#783f04;font-family:'Courier New',Courier,monospace;" />}
    .style1 {
        COLOR: #808080
    }</style>
    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

  • Picture Library Slideshow Web Part - Is it possible to switch between two image librarys in one slideshow

    In our office we have a screen at the front desk that runs a PP slideshow showing welcome messages to guests arriving.
    SharePoint may not be the solution, but the overall objective is to find a way to have a library of X number of photos (say the library size is 30 images) and a separate library of X number of welcome messages (usually ~5 images).
    We want the slideshow to randomly pull 5 images from the 1st pool and then play the images in the 2nd Pool.
    Let me know if you have heard of a solution similar to this. Thanks!

    Hi Twirlz03,
    According to your description, my understanding is that you want to display teo picutre libraries in a picture slideshow web part in SharePoint 2010.
    By default, one Picture Slideshow web part only display images fron one specifical picutre library, it is unable to apply for multiple picture libraries.
    You can try to utilize Content Query web part to aggregate picture items from the site collection or site. However, you mean that you want the slideshow to randomly pull 5 images from first library and then play the images in the second library, I’m afriad
    that it is hard to achieve it.
    More information about aggregating picture items , please refer to section 4 of the link below:
    http://blog.vgrem.com/2013/04/27/beyond-the-slideshow-web-part-capabilities-in-sharepoint-2010/
    Best Regards,
    Wendy
    Wendy Li
    TechNet Community Support

  • SP 2010 - Picture Library Slideshow Web Part Missing

    I go to insert a web part and navigate to the Media and Content folder however there is no Picture Slideshow which is supposed to be there.  We are operating on the Enterprise 2010 version.  I have researched however cannot find out why it is missing
    or how to get it added in so we can use it.  Please help.
    Thanks
    Corey Sotir

    Hello,
    You can try to populate from  Webpart Galleries .
    1 ) Go to Site collection Settings > Under Galleries > Web parts 
    2)  Web Part Library > Library Tools > Documents > Click on New document
    3) A pop up will open > in that search for 
    Web Part Type Name :Microsoft.SharePoint.WebPartPages.PictureLibrarySlideshowWebPart
    File Name :PictureLibrarySlideshowWebPart
    4) if you found that Click on Populate to Gallery > Then Check in the Web Part Gallery..
    Best Regards Kuldeep Verma
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful"
    if it was useful.  

  • How to Set Item limit for Picture library Slideshow webpart in SharePoint 2013

    Picture library Slideshow webpart is using the default view "All Pictures" and if I set a filter condition in the view, the images are displaying based on it but if I set an Item limit as "5" or any number in the "All Pictures"
    view it is not reflecting in the slideshow webpart.
    Any suggestion would be a great help as the users want to see only the latest 5 images in the slideshow webpart.
    Thanks & regards,
    Asha

    I don't think so there is any way to set a item count limit on Picture Library Slideshow web wart.
    Web Part setting only allows to provide library and View, In List view also you can only set Item Limit to be shown on the 'List View'. Slideshow web part take all the items in the list and show, view is only used to provide which field needs to be shown.
    There could be 2 options:
    - Write a JavaScript to limit the count, and in the view add Sorting by 'Created' date. You can get some example on how to modify "Library Slideshow web part" javascript here: http://blog.vgrem.com/2013/04/27/beyond-the-slideshow-web-part-capabilities-in-sharepoint-2010/
     This link does not have solution of what you want, but it gives a very well idea on what you can look and modify. It will not be that straight forward for sure.
     - Create a custom webpart, it could be a easier approach. As there are many slideshow Javascript library present, and through code you will just need do a query and pull data from library with required number of items to be shown.
    get2pallav
    Please click "Propose As Answer" if this post solves your problem or "Vote As Helpful" if this post has been useful to you.

  • How to remove empty space in CSS table and move spry menu bar?

    Hello! I created www.stonecreekha.com about a year ago basically by watching youtube tutorials and haven't done much with it since so I've forgotten everything! In IE7, everything appears as it should; but in Firefox and IE8, the spry menu bar is positioned slightly higher than it should be (it slightly cuts off the foot of the golfer) and there is an empty space between the navigation bar and the photo. The source code can be viewed from the website. Here are some pics:
    IE7 - how it is supposed to look:
    IE8:
    Firefox:
    Dreamweaver:
    So basically, I need to know how to remove that empty space between the navigation bar and the picture, and how to move the spry menu bar down a few pixels, in a way that it looks correct in IE8 and Firefox, and preferably IE7 as well.
    P.S. I'm a noob so if you could be as specific as possible on what to do in Dreamweaver I'd really appreciate it. Thanks

    I belive it's because of the -minus margin being used on the navbar, that you will need to use a negative margin to bring up both the left and right bodyArea divs.
    Try :       margin-top: -18px;  on both divs.  You may need to play around with that to get it more precise.
    Again, not sure what effect that has on IE as I can't test it.
    If it affects IE, then you may need to feed IE a conditional comment for the placement of those divs.

  • How to remove empty space from a file

    Hi all,
    Can any one help on how to remove the blank spaces from a file.
    I used trim function but unable to remove the spaces.
    I have a file in which there is a name like 'JAIRAM' and am storing this file in a variable FILE_CONTENTS.
    Now am unable to compare FILE_CONTENTS with another value as it is storing empty spaces also from the file.
    Please help on this
    Thanks,
    Srini

    Trim only trim at the beginning or at the end. Can you try using the replace sql function.. see below..
    SQL> select replace('abc def',' ','') from dual ;
    REPLAC
    abcdef
    cheers

  • How can we remove empty space created in the flat file unintentionally

    Hi Forums,
    In our data flow, transactional data is flowing from one ODS(Acquisition Layer) to two different ODS's(Integration Layer) parallely. Error occured in first ODS(Acquisition Layer) i.e ODS was not getting activated for long time coz of empty space[#] in one of the infoobjects of a particular record. After manually deleting the request in two ODS's of Integration Layer & edited that particular record in PSA and reconstructed that deleted request form PSA the problem was solved.
    This wrong entry is getting visible only at the time of ODS activation. Can any one suggest me a permanent solution for not occuring of empty space at the source system level or at SAP XI interface level or in the SAP BW system level?
    Thanks in advance

    Hi,
    If your ino object is of numeric type then check the condition if it is # (empty) then
    replace with 0 (zero), if it is char. then make it SPACE..you can use this following statement in your transfer / update rule for the IO.
    replace all occurances of '#'  with ' '.  (for Char.)
    (for Numeric)
    if COMM_STRUCTURE-XXXX is initial.  
    RESULT = 0.
    endif.
    Hope it helps..
    assign points if useful.
    Cheers,
    Pattan.

  • How do I remove empty space combo box

    My promblem is that I have empty space between selected option and the other option Below are code i used to build this combo box .This combo box display list of possible user of the system and selected option show to the currrent user of the system. Code are
    <%      sql_query = "SELECT em_num, em_name, dfu_usr_id "+
                                            "  FROM dfusrf, emmast "+
                                            " WHERE dfu_emp_id = em_num "+
                                            " ORDER BY em_name ";
                               try{
                                      rset = db.execSQL(sql_query);
          while ( rset.next()){
               String em_num2 = rset.getString("em_num");
              String em_nme2 = rset.getString("em_name");
                                  %>
         <option value="<%= em_num2 %>">
         <% if ( em_num2.equals(em_num) ){%>
         <option value="<%= em_num2 %>"selected>
                          <%=  em_nme2 %></option>
         <%} // end if
         %><%= em_nme2 %></option>
        <%} // end while
      } // end try
      catch ( Exception e )
        System.err.println("Error in query -  emmast2 - transaction_main.jsp " +e.getMessage() + " sql " + sql_query);
      finally
        if ( rset != null ) rset.close();
    %>
    </select>

    while ( rset.next())
         String SELECTED = "";
         String em_num2 = rset.getString("em_num");
         String em_nme2 = rset.getString("em_name");
         if ( em_num2.equals(em_nme2) )
              SELECTED = " SELECTED ";
    %>
         <option <%=SELECTED%> value="<%= em_num2 %>"><%=  em_nme2 %></option>
    <%
    } // end while

  • Slideshow Web Part item limit

    I've got a picture library with over 700 images (and growing) but the web part, set to display sequentially, is only showing 300 images before looping. When it's set to random it shows more!?! I need it to display sequentially as people are going to be
    going through the images and filling in an excel spreadsheet when they recognise someone in the image. If it's set to random it's going to give them a stinking headache! Is there any way of disabling the limit on sequential order?? If not, what are my options?
    So far, the slideshow is the only way I've found to display the images quickly (without having to click on each pic in the library, which will be a very slow process), and not being able to change this very restrictive limit is incredibly frustrating (and
    shortsighted on Microsoft's part)!
    The only other option I could think of was multiple picture libraries linking to multiple web parts. Is this really all I can do??

    People have asked similar questions on LinkedIn and SharePoint Stack Exchange, and it seems there is a 300 limit when displaying sequentially, 1500 when displaying randomly. You could look at using some custom web parts. Amrein Engineering have a few: Image
    Rotator, Banner Rotator and Slideshow. None of them are expensive and you could ask them first if there are any limits.
    Tom
    SharePoint Systems Officer, Capital Regional District, BC, Canada

  • Slideshow web part issue

    A user has ntcied that the Slideshow webpart is taking her png images and converting them to jpg images.  The problem is that the jpeg text does not render will and the user is asking if there is a way that the slide show image converted can be skipped
    or manipulated in souch that the it does change or create a new jpg image when it encounters a png image.

    Hi Michel,
    Please share OS, IE and Office version. Also check this behavior with different browsers and share your results, thanks
    Regards,
    Pratik Vyas | SharePoint Consultant |
    http://sharepointpratik.blogspot.com
    Posting is provided AS IS with no warranties, and confers no rights
    Please remember to click Mark As Answer if a post solves your problem or
    Vote As Helpful if it was useful.

  • How can i stretch pictures in picture library webpart and remove the home tab that comes with the site

    Hello people
    how can i stretch images to fit into my picture library webpart?
    also how can i remove the Home tab that comes with change the look.

    Hi,
    Let’s verify the following:
    Whether you use the picture  library web part or Image Viewer web part or Picture Library Slideshow Web Part.
    I think you should custom the web part to stretch images to fit into your web part. There is no OOTB method to achieve it.
    Whether the home tab is your library name.
    To remove the Home tab, edit the web part->Appearance->”Chrome” choose none.
    Best Regards,
    Lisa Chen
    Lisa Chen
    TechNet Community Support

Maybe you are looking for