Comment centrer les boutons précédents, suivants et pause du diaporama de la bibliothèque d'images.

Question

Nous avons une bibliothèque d'images Slideshow Web Part ajouté sur notre site, mais les boutons pour contrôler précédemment, suivent et pause / jouer directement sous elle sont désactivés à gauche pour une raison quelconque. Nous devons les contrôler pour être au centre, voire à gauche ou à droite.

En regardant la source de la page, les balises d'image pour ces boutons n'ont pas d'id ou d'une classe, il semble donc qu'ils soient inaccessibles à un script. Y a-t-il un moyen de modifier uniquement les balises de ces boutons afin que nous puissions les déplacer autour de la page? Voici les extraits de la source de la page qui contient les balises pour le diaporama d'image et les boutons Précédent / Suivant / Pause:

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

Nous avons déjà essayé de modifier les classes de la plastique .MS-WP selon cette suggestion, mais il contrôle à la fois l'image et les boutons en même temps, ce qui est incorrect. Pas sûr s'il y a un moyen de contrôler séparément les boutons avec CSS.

Notez que la raison pour laquelle les boutons figurent comme hors centre sont parce que nous avons dû scripter un comportement de zoom (le code de celui-ci peut être trouvé sur le même site relié ci-dessus) qui correspond à l'image dans la zone, mais le côté L'effet était que les boutons ne se sont pas déplacés avec elle.

Answer 1

éléments de bouton rendu pour la bibliothèque d'images 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>

pourrait être sélectionné à l'aide du code suivant:

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

Exemple: personnaliser l'affichage des éléments de boutons

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

Mes boutons ont été centrés mais si vous souhaitez y accéder avec CSS, ils sont dans une classe.J'ai utilisé le code ci-dessous pour les faire partir.

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

En outre, j'ai eu du mal à centrer la partie Web sur la page (toujours laissée justifiée) et a finalement eu la tâche de travailler à l'aide de ce code.

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