Como centralizar os botões Anterior, Próximo e Pausa de uma Web Part de apresentação de slides da Biblioteca de Imagens

Question

Temos uma web part de apresentação de slides da biblioteca de imagens adicionada ao nosso site, mas os botões para controlar Anterior, Próximo e Pausar/Reproduzir diretamente abaixo dela estão descentralizados à esquerda por algum motivo.Precisamos controlá-los para ficarem no centro, ou mesmo à esquerda ou à direita está bem.

Olhando para o código-fonte da página, as tags de imagem desses botões não possuem ID ou classe, então parece que são inacessíveis a um script.Existe alguma maneira de modificar apenas as tags desses botões para que possamos movê-los pela página?Aqui estão os trechos da fonte da página que contém as tags da apresentação de slides de imagens e os botões anterior/próximo/pausa:

<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">

Já tentamos modificar as classes .ms-wpbody de acordo com esse sugestão, mas controla a imagem e os botões ao mesmo tempo, o que é incorreto.Não tenho certeza se existe alguma maneira de controlar separadamente apenas os botões com CSS.

Observe que o motivo pelo qual os botões aparecem descentralizados é porque tivemos que criar um script de comportamento de zoom (o código para isso pode ser encontrado no mesmo site com link acima) que ajusta a imagem à zona, mas o efeito colateral foi que os botões não se moviam com ele.

Answer 1

Elementos de botão renderizados para web part de apresentação de slides da biblioteca de imagens

<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>

pode ser selecionado usando o seguinte código:

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

Exemplo:Personalize a exibição dos elementos do botão

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

Meus botões estavam centralizados mas se você quiser acessá-los usando CSS, eles estão dentro de uma classe.Usei o código abaixo para fazê-los desaparecer.

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

Além disso, tive problemas para centralizar a web part na página (sempre justificada à esquerda) e finalmente consegui fazê-la funcionar usando este código.

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