Come centrare una libreria di immagini Slideshow Web Part's Precedente, Avanti e Pulsanti PAUSE

Question

Abbiamo una serie di flusshow Library Picture Part aggiunta al nostro sito ma i pulsanti per controllare il precedente, il prossimo e la pausa / riproduzione direttamente sotto è fuori centro a sinistra per qualche motivo. Dobbiamo controllarli per essere al centro, o anche a sinistra oa destra va bene.

Guardando la sorgente della pagina, i tag dell'immagine per questi pulsanti non hanno un ID o una classe, quindi sembra che siano inaccessibili a uno script. C'è un modo per modificare solo i tag di questi pulsanti in modo che possiamo spostarli intorno alla pagina? Ecco gli estratti della fonte della pagina che contengono i tag per la presentazione dell'immagine e i pulsanti precedenti / successivi / 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">

.

Abbiamo già provato a modificare le classi .ms-wpbody in base a questo suggerimento ma controlla sia l'immagine che i pulsanti allo stesso tempo che non è corretto. Non sono sicuro se c'è un modo per controllare separatamente solo i pulsanti con CSS.

Si noti che il motivo per cui i pulsanti mostrano come off-center sono perché abbiamo dovuto scrivere un comportamento di zoom (il codice per quello può essere trovato sullo stesso sito collegato sopra) che si adatta all'immagine alla zona, ma il lato- L'effetto era che i pulsanti non si muovevano con esso.

Answer 1

Elementi del pulsante renderizzati per la parte Web della libreria di immagini Slideshow Web

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

.

potrebbe essere selezionato utilizzando il seguente codice:

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

.

Esempio: personalizzare la visualizzazione di elementi pulsanti

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

I miei pulsanti sono stati centrati ma se si desidera accedervi utilizzando CSS, sono all'interno di una classe.Ho usato il codice qui sotto per farli andare via.

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

.

Inoltre, ho avuto difficoltà a centrare la web part sulla pagina (sempre lasciata giustificata) e infine ce l'ho finita per lavorare usando questo codice.

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

.