[PHPBB3] Récup images d'une page html

Bonjour Serge,
pour 10 images, il ne serait pas plus simple de faire un copier/coller des liens, de les insérer avec des balises img et de les numéroter ?

Simple question ou je n'ai pas compris la problématique.

Bonsoir Stéphane,

Tu as bien compris la problématique Stéphane.

Le html que j'ai mis comporte effectivement une dizaine d'image pour ne pas surcharger.

Mais le html que je vais utiliser qui est identique en comporte environ une cinquantaine.
(C'est à dire pour mon forum 1 photo gagnante par semaine sur 1 an, et c'est sur cette cinquantaine de photos que le sondage portera).

Si le script à remplacer dans le html est un truc compliqué, je ferais alors des copier/coller comme tu le suggères.  

Bonjour Serge ,
en rajoutant à chaque séquence html un numéro avec :

Code:

 <h1>le numéro </h1>

Par exemple :

Code:

 <div class="mySlides fade">
                                                                                                                                                                                                                                                        <a href="https://photoclic.forum-pro.fr/t21453-animaux-la-gourmande#" target="_blank"><img src="https://i.servimg.com/u/f13/18/70/41/54/la_gou11.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Guénolé</em><h1>1</h1></span>                                                                                                                                                                                                                                                                                                             
 </div>

et en appelant la page html en iframe dans un message ou en fournissant le lien ?

Bonsoir Stéphane,

Merci pour l’intérêt porté à cette demande

Alors pour le n° au dessus des photos,  je viens de me souvenir que cela se fait déjà automatiquement sur les sujets quand on poste une photo ou une image.

Par contre, dans le html en bas, il y a un script qui fait défiler l'ensemble des photos sous forme de diaporama.

Peut-être mettre l'iframe dans un sujet comme tu le préconises, en remplaçant le script actuel pour afficher le n° au dessus de la photo.
En retirant le .mySlides {display:none} du style, on a bien les photos les unes au dessus des autres mais elles ne sont pas numérotées.

Je suis peut-être complétement à coté de la plaque :-)

Hello Serge et Stéphane,
alors à l'heure actuelle on ne peut pas récupérer la page html car le haute de page n'est pas activé je présume, alors on va tricher un peu et cocher "Voulez-vous utiliser le haut et le bas de page de votre forum ?"

Ensuite on masque tout dans le style entre les balises:

Code:

<style>

et

Code:

</style>

Déposes ceci:

Code:


#page-header,#page-footer,#left,#right,.inner{display:none!important;}
#wrap{width:0px!important;height:0px !important;background-color:transparent!important;};




N'oublies pas de publier Serge.

Ensuite on va créer le sujet (à ta guise)
puis dans le corps du message dépose ce code html:

Code:

<div id="M14_recup_html"></div>

Repères ensuite le lien de ta page html (enfin a partir de la barre oblique):

Ma page html se termine ainsi:

Code:


/h1-serge


Et le script ou tu déposeras le lien de ta page ici:

Code:

$.get('/h1-serge' , function(data){

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets

Déposer ceci:

Code:


$(function(){

$.get('/h1-serge' , function(data){
var number=0;
$(data).find('.slideshow-container').find('.mySlides').each(function(){
number+=$(this).find('img').length;
var img=$(this).find('img').attr('src');
var link=$(this).find('a[href]').attr('href');
$('#M14_recup_html').append('<div class="M14_cont-html"><span class="M14_number_html"><span>'+number+'</span></span><br /><a href="'+link+'"title="Voir le message"><img src="'+img+'"/></a></div>');
});});});


Penser a cliquer sur le bouton

Puis pour finir la c.s.s:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*L ID DANS LE MESSAGE*/
#M14_recup_html
{
border:3px solid #4cd8eb;
padding:5px;
width:400px;
background-color:white;
}

/*LE CONTENEUR DES IMAGES*/
.M14_cont-html
{
width:400px;
height:auto;
padding:5px;
border-bottom:3px dotted black;
text-align: center;
}
/*Les chiffres*/
.M14_number_html
{
border-radius: 16px;
height: 16px;
text-align: center;
width: 16px;
display: inline-block;
background:black;
margin-bottom: 3px;

}
.M14_number_html span{font-size: 11px;color:white;top: -2px;position: relative;}
/*Les images*/
.M14_cont-html img
{
max-width:300px;
max-height:300px;
margin-left:50px;
  
}


Penser a cliquer sur le bouton


Edit:
ce script affichera pour les invités un tag leurs suggérant de se connecter etc:

Code:

$(function(){

$.get('/h1-serge' , function(data){
var number=0;
$(data).find('.slideshow-container').find('.mySlides').each(function(){
number+=$(this).find('img').length;
var img=$(this).find('img').attr('src');
var link=$(this).find('a[href]').attr('href');
$('#M14_recup_html').append('<div class="M14_cont-html"><span class="M14_number_html"><span>'+number+'</span></span><br /><a href="'+link+'"title="Voir le message"><img src="'+img+'"/></a></div>');
if(!_userdata["session_logged_in"])
{
$('#M14_recup_html').html('<div id="M_noconnect"><div><h3>Message à l\'intention des invités</h3>Bonjour, <br><br><a href="/register" style="color:#993741"><img src="https://2img.net/i/fa/prosilver/icon_register.gif"> S\'inscrire</a> ou <a href="/login" style="color:#993741"> se connecter</a>  pour avoir accès à l\'ensemble du forum sans publicités,<br><br>ou pour poster vous-même une photo ou un commentaire. Merci.</div></div>');
}



});});});

Et voilou  

Bonsoir Philippe,

Un excellent travail que tu m'as fait là. Super!
Je n'imaginais pas cela ainsi avec un script externe.

Tout fonctionne parfaitement l'ami

Je passe en résolu.

N'est-ce pas, de plus tu as les liens pour chaque images,
j'avais oublié de le mentionner.