Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
Could you provide more of the surrounding structure? It might be possible to set the values using the parent's definitions. Also, is jQuery allowed? –  thantos Mar 1 '13 at 12:42
    
jQuery is fine. I have added the code before and after the tags for the button images. Thanks –  Alex Mar 1 '13 at 17:48
    
is there a live URL we can look at? –  Stephen Mar 1 '13 at 18:29
    
Sorry, this is internal to our business for security reasons. –  Alex Mar 1 '13 at 18:55
add comment

2 Answers

up vote 1 down vote accepted

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");
share|improve this answer
    
I didn't know jQuery could do something like that. Fantastic, thank you! –  Alex Mar 1 '13 at 21:06
add comment

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;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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