How to center a Picture Library Slideshow Web Part's Previous, Next, and Pause buttons

Question

We have a Picture Library Slideshow web part added to our site but the buttons to control Previous, Next, and Pause/Play directly underneath it are off-center to the left for some reason. We need to control them to be in the center, or even hard left or right is fine.

Looking at the page's source, the image tags for these buttons don't have an ID or a class, so it seems like they are inaccessible to a script. Is there any way to only modify the tags of these buttons so that we can move them around the page? Here are the excerpts of the page's source that holds the tags for the picture slideshow and the previous/next/pause buttons:

<td style="width:421px;height:284px">
    <div id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_cell" style="display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 110%;">
    <span style="vertical-align:middle;height:100%;display:inline-block"></span>
    <a id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_link" href="https://www.google.com" target="_blank">
    <img id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_curr" style="opacity: 1; border: 0px; vertical-align: middle; height: 115%; width: 115%;" src="http://intranet/HomePicture/_w/image2.jpg" height="268" width="383" alt="">
    </a></div>
</td>

    <td style="text-align:center">
        <a onclick="NextPrevious(MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_slideshowObject, false);">
        <img border="0" style="position:relative;cursor:hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plprev1.gif" alt="Previous Image">
        </a> <a onclick="PlayPause(MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_slideshowObject);">
        <img border="0" style="position:relative;cursor:hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plplay1.gif" id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_playpause" alt="Play"></a> 
        <a onclick="NextPrevious(MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_slideshowObject, true);">
        <img border="0" style="position:relative;cursor:hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plnext1.gif" alt="Next Image"> </a>
</td>

<img id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_next" width="0" height="0" style="visibility:hidden" src="http://intranet/HomePicture/_w/image1.jpg">
<img id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_prev" width="0" height="0" style="visibility:hidden" src="http://intranet/HomePicture/_w/image1.jpg">
<img id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_pp" width="0" height="0" style="visibility:hidden" src="/_layouts/images/plpause1.bmp">

We already tried modifying the .ms-wpbody classes according to this suggestion but it controls both the image and the buttons at the same time which is incorrect. Not sure if there is any way to separately control just the buttons with CSS.

Note that the reason the buttons show as off-center is because we had to script a zooming behavior (the code for that can be found on the same site linked above) which fits the image to the zone, but the side-effect was that the buttons didn't move with it.

Answer 1

Button elements rendered for Picture Library Slideshow web part

<td style="text-align:center">
        <a onclick="NextPrevious(MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_slideshowObject, false);">
        <img border="0" style="position:relative;cursor:hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plprev1.gif" alt="Previous Image">
        </a> <a onclick="PlayPause(MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_slideshowObject);">
        <img border="0" style="position:relative;cursor:hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plplay1.gif" id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_playpause" alt="Play"></a> 
        <a onclick="NextPrevious(MSOPictureLibrarySlideshowWebPart_ctl00_ctl20_g_48d4a035_a375_49a9_8502_3aa9a10b0417_slideshowObject, true);">
        <img border="0" style="position:relative;cursor:hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plnext1.gif" alt="Next Image"> </a>
</td>

could be selected using the following code:

jQuery('img[alt="{Previous Image|Pause"|Next Image}"').parent()

Example: Customize the display of button elements

function customizeSlideshowControl()
{
   var prevButton = jQuery('img[alt="Previous Image"]').parent(); //select prev link element
   var pauseButton = jQuery('img[alt="Pause"]').parent();
   var nextButton = jQuery('img[alt="Next Image"]').parent();

   //1. position all the buttons on the right
   var buttonContainer = prevButton.parent();
   buttonContainer.attr('style','text-align:right');

   //2. resize next button icon 
   var nextButtonIcon = jQuery('img[alt="Next Image"]')
   nextButtonIcon.css({ width: 40, height: 40});

}  



_spBodyOnLoadFunctionNames.push("customizeSlideshowControl");

Answer 2

My buttons were centered but if you want to access them using CSS, they are within a class. I used the code below to make them go away.

.ms-WPBody a[onclick ^= "Next"]{
        display:none;
}
.ms-WPBody a[onclick ^= "Play"]{
        display:none;
}

Also, I had trouble centering the web part on the page (always left justified) and finally got it to work using this code.

.s4-wpTopTable {
    display:inline-block;
    text-align:center;
}