[PHPBB3] Miniatures dans page html

Bonjour à tous les milouziens,

toujours dans mes miniatures, je profite de l'acalmie.

Philippe m'a écrit cette page html qui affiche l'ensemble des sous forums:

Code:


<style>
#content-container div#left {
 margin-top: 170px !important;
}
.widget-arrow.isleft {
 margin-top: 205px;
}

  img.M14_GetPosts {
 display: none;
  }

  .forumbg{
       height:362px;
       overflow-y:auto;
  }
      /*Le conteneur des liens*/  
   h1#M14_nomargin {
 text-align: center;
 border: 2px solid #fdf8f8;
 padding-bottom: 8px;
        margin-top: 15px;
  }
      /*Les liens dans le conteneur*/
    h1#M14_nomargin a
  {
 margin-left: 4px;
 margin-right: 4px;
 padding: 2px 20px;
 font-size: 15px;
  }
    /*Les ancres positionnes avant les titres*/
    a[id^="M14_GetAncreFofo"]
    {
    position: absolute;
    margin-top: -100px;  
    }
    </style>  
<!--                                                                                                                                                              Bouton poster une photo                                                                                                                                                                         -->    
<div id="bouton_poster" style="float:left;width: 300px;">
                                                                                                                                                                                                                                                                     <a target="_blank" href="https://photoclic.forum-pro.fr/post?f=4&mode=newtopic"><br /><img border="0" src="https://i.imgur.com/DmZrfKT.png" alt="lNew phototest" title="Poster une nouvelle photo dans Phototest" /></a>
</div>
                                                                                                                                                                                                                                              
<!--                                                          info poster une photo                                                          -->
<div style="position: absolute;float:left;width: 25px;margin-left: 10.4%;margin-top: 23px;" id="info_posterimg">
                                                    <a href="https://photoclic.forum-pro.fr/t34-poster-une-photo#264" target="_blank"><br /><img title="voir comment poster une photo" alt="infoposterimg" src="https://i.servimg.com/u/f25/18/97/96/21/info_t10.png" /></a>                                                                                                                                                                                      
</div>
                                                                                                                                                      
<!--                                                                                                                                                              Bouton poster une série                                                                                                                                                                         -->    
<div id="bouton_poster" style="margin-left: 30%;">
                                                                                                                                                                                                                                                                     <a target="_blank" href="https://photoclic.forum-pro.fr/post?f=5&mode=newtopic"><br /><img border="0" src="https://i.imgur.com/iZqElcb.png" alt="lNew phototest" title="Poster une nouvelle série dans Reportage/série au long cours" /></a>                                                                                                                                                                                      
</div>
                                                  
<!--                                                          info poster une série                                                          -->
<div id="info_posterserie" style="position: absolute;float:left;width: 25px;margin-top: -50px;margin-left: 39%;">
                                                   <a target="_blank" href="https://photoclic.forum-pro.fr/t34-poster-une-photo#232226"><br /><img src="https://i.servimg.com/u/f25/18/97/96/21/info_t10.png" alt="infoposterserie" title="voir comment poster une série" /></a>                                                                                                                                                                                      
</div>
                                                
<h1 id="M14_nomargin" class="nomargin path">
                                 <a class="nav" href="#M14_GetAncreFofo_1"></a>    <a class="nav" href="#M14_GetAncreFofo_2"></a>    <a class="nav" href="#M14_GetAncreFofo_3"></a>    <a class="nav" href="#M14_GetAncreFofo_4"></a>    <a class="nav" href="#M14_GetAncreFofo_5"></a>    <a class="nav" href="#M14_GetAncreFofo_6"></a>    
</h1>
                                
<div class="M14_GetListeFofo_1">
                             <a id="M14_GetAncreFofo_1"> </a>                            
 <h1 class="page-title" id="M14_GetListeFofo_1">
                                                        
 </h1>
                                                        
 <div class="forumbg">
                                                        
 </div>
</div>
    <a href="#top" style="float:right;">Haut de page</a>    
<div class="M14_GetListeFofo_2">
                             <a id="M14_GetAncreFofo_2"> </a>                            
 <h1 class="page-title" id="M14_GetListeFofo_2">
                                                        
 </h1>
                                                        
 <div class="forumbg">
                                                        
 </div>
</div>
    <a href="#top" style="float:right;">Haut de page</a>    
<div class="M14_GetListeFofo_3">
                             <a id="M14_GetAncreFofo_3"> </a>                            
 <h1 class="page-title" id="M14_GetListeFofo_3">
                                                        
 </h1>
                                                        
 <div class="forumbg">
                                                        
 </div>
</div>
    <a href="#top" style="float:right;">Haut de page</a>    
<div class="M14_GetListeFofo_4">
                             <a id="M14_GetAncreFofo_4"> </a>                            
 <h1 class="page-title" id="M14_GetListeFofo_4">
                                                        
 </h1>
                                                        
 <div class="forumbg">
                                                        
 </div>
</div>
    <a href="#top" style="float:right;">Haut de page</a>    
<div class="M14_GetListeFofo_5">
                             <a id="M14_GetAncreFofo_5"> </a>                            
 <h1 class="page-title" id="M14_GetListeFofo_5">
                                                        
 </h1>
                                                        
 <div class="forumbg">
                                                        
 </div>
</div>
    <a href="#top" style="float:right;">Haut de page</a>    
<div class="M14_GetListeFofo_6">
                             <a id="M14_GetAncreFofo_6"> </a>                            
 <h1 class="page-title" id="M14_GetListeFofo_6">
                                                        
 </h1>
                                                        
 <div class="forumbg">
                                                        
 </div>
</div>
    <a href="#top" style="float:right;">Haut de page</a>      <script>
    if(document.title=="Voir les forums du clic"){
    $(function(){
    $('#left,#search-box,.M14_GetPosts,a.preview_topic,a.M14_LoaD_ToPiCsConT,a.M14_LoaD_ToPiCs,#fa_ticker,#fa_ticker_container').hide();

    });
    }
    $(function(){
    $.get('/f4-phototest' , function(data){
    var M14_GetTitleFofo=$(data).find('h1.page-title').text();
    var M14_GetFofo= $(data).find('.forumbg:not(.announcement)').html();
    $('.M14_GetListeFofo_1 h1.page-title,a[href="#M14_GetAncreFofo_1"]').text(M14_GetTitleFofo);
    $('.M14_GetListeFofo_1 div').html(M14_GetFofo);
    });
    });
    $(function(){
    $.get('/f5-reportage-series-au-long-cours' , function(data){
    var M14_GetTitleFofo=$(data).find('h1.page-title').text();
    $('.M14_GetListeFofo_2 h1.page-title,a[href="#M14_GetAncreFofo_2"]').text(M14_GetTitleFofo);
    var M14_GetFofo= $(data).find('.forumbg:not(.announcement)').html();
    $('.M14_GetListeFofo_2 div').html(M14_GetFofo);
    });
    });
      
    $(function(){
    $.get('/f1-les-bests' , function(data){
    var M14_GetTitleFofo=$(data).find('h1.page-title').text();
    var M14_GetFofo= $(data).find('.forumbg:not(.announcement)').html();
    $('.M14_GetListeFofo_3 h1.page-title,a[href="#M14_GetAncreFofo_3"]').text(M14_GetTitleFofo);
    $('.M14_GetListeFofo_3 div').html(M14_GetFofo);
    });
    });

    $(function(){
   $.get('/f19-les-best-reportage-et-serie' , function(data){
    var M14_GetTitleFofo=$(data).find('h1.page-title').text();
    var M14_GetFofo= $(data).find('.forumbg:not(.announcement)').html();
    $('.M14_GetListeFofo_4 h1.page-title,a[href="#M14_GetAncreFofo_4"]').text(M14_GetTitleFofo);
    $('.M14_GetListeFofo_4 div').html(M14_GetFofo);
    });
    });
      
    $(function(){
    $.get('/f13-les-galeries-des-membres' , function(data){
    var M14_GetTitleFofo=$(data).find('h1.page-title').text();
    var M14_GetFofo= $(data).find('.forumbg:not(.announcement)').html();
    $('.M14_GetListeFofo_5 h1.page-title,a[href="#M14_GetAncreFofo_5"]').text(M14_GetTitleFofo);
    $('.M14_GetListeFofo_5 div').html(M14_GetFofo);
    });
    });
      
    $(function(){
    $.get('/f6-le-club-du-clic' , function(data){
    var M14_GetTitleFofo=$(data).find('h1.page-title').text();
    var M14_GetFofo= $(data).find('.forumbg:not(.announcement)').html();
    $('.M14_GetListeFofo_6 h1.page-title,a[href="#M14_GetAncreFofo_6"]').text(M14_GetTitleFofo);
    $('.M14_GetListeFofo_6 div').html(M14_GetFofo);
    });
    });
      
    </script>

Serait-il possible d'ajouter dans cette page ce script présentant les miniatures dans la liste des sujets des forums concernés par le script:

Code:



    //Aperçu des miniatures sur forums C2 Les photos du clic et photos gagnantes  
    $(function(){          
            if($('a.nav[href^="/c2-"],a.nav[href^="/f16-"]').length) {
              $('dl.icon[style*="https://i.servimg.com/u/f31/19/32/37/01/icon_t30.png"]').closest('div.forumbg').addClass('M14_Annonc');
            $('div.forumbg:not(.M14_Annonc) .M14_LoaD_ToPiCsConT').after('<a href="#" style="margin-left: 5px;" class="M14_LoaD_ToPiCs">Patientez....
            <img src="https://i.servimg.com/u/f11/11/26/21/37/loadin13.gif"style="width:16px !important;height:16px !important;margin-top:10px;"/></a>');
            $('.M14_LoaD_ToPiCs').each(function () {
            var url = this.previousSibling.href;
            var M14_LoaD_ToPiCsLinK=$(this).prev().attr('href');
            $(this).load(url + ' .content:first div:not(.M14_reception_photos):first img:not([longdesc]):first');
             });};});


Le css:

Code:

   /*Le conteneur dans widget derniers sujets*/
        .M14_LoaD_ToPiCsW
        {
        height:58px;
        float: right;
        display:none;
        transition-delay: 20ms;
        -webkit-transition-delay: 20ms;
        -moz-transition-delay: 20ms;
        -o-transition-delay: 20ms;
        }
     /*Les conteneur dans la liste sujets SF et dans derniers messages*/
    .M14_LoaD_ToPiCs, .M14_LoaD_ToPiCsA {
     float: left;
     margin-right: 15px;
     padding-left: 10px;
       width: 13%;
        }
        /*Les images dans les 2 conteneurs*/
        .M14_LoaD_ToPiCs img,.M14_LoaD_ToPiCsA img
        {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        height:80px;
        width: 100%;
        object-fit: cover;
        z-index: 10;
        }
      
        .M14_LoaD_ToPiCsW img{height:58px;}

    /*Animation au survol de l image dans derniers messges*/
        .M14_LoaD_ToPiCs img:hover,.M14_LoaD_ToPiCsA img:hover
        {
        transform: scale(2);
        -moz-transform : scale(2);
        -webkit-transform : scale(2);
        -ms-transform: scale(2);
        background:white;
        padding:1px;
        margin-top:-45px;
        }


Merci pour votre aide.