Extraire l'avatar des 3 derniers sujets d'un forum

[alv]

Bonjour,
On m'avait fait ceci pour extraire une image du dernier sujet d'un forum précis :

- Id sur l'image à extraire (mis dans tous les sujets du forum concerné) :

Spoiler:

- Code d'extraction de l'image (mis dans une page js) :

Spoiler:

- Code d'affichage de l'image extraite (mis à l'endroit où l'image extraite doit s'afficher) :

Spoiler:

Mais je ne sais pas comment adapter le code.
Je souhaiterais extraire, pour les 3 derniers sujets d'un forum précis, l'avatar du créateur du sujet. Pour les afficher dans le lien "communauté" et à la place des trois images qu'il y a dans "entrer dans la communauté". Le code sera mis dans le template overall_header.
Comment faire ?
Merci d'avance.

[Neptunia]

Bonjour ^^


Pourrions nous avoir le lien du forum concerné parce que le script fourni ne correspond visiblement pas au topics_list_box du forum de votre profil. pas de class section, ni de class last-post-hidden

[alv]

Bonjour,
Le code qui m'a été donné était pour ce forum. J'aimerais l'adapter pour celui-là.

[Neptunia]

Le script ne correspond pas davantage au topics_list_box actuel de Servactif

Comme je n'ai aucun script dont je puisse constater le fonctionnement, je vais y aller en aveugle.

Essayez de remplacer le script par ceci

Code:

    $(function(){
   
            var forumLien = $('[href="/f3-communaute-presentations-et-anniversaires"]'); /* forum où on doit regarder */
            var img = $('.replace-img'); /* image à remplacer */
   
            /* on trouve l'url du dernier sujet */
            var urlSujet = forumLien.closest('.three-col').find('.titre_sujet a').eq('1').attr('href');
   
            /* on va dans le dernier sujet */
            $.get(urlSujet, function(data){
                /* On récupère l'avatar puis on le remplace au bon endroit */
                img.attr('src', $('message_avatar img:eq(0)', data).attr('src') || "url_image_par_défaut");
            });
   
    });

[alv]

Merci pour le code, mais ça ne marche pas. L'image est remplacé par celle par défaut, mais pas par l'avatar.

Le code que j'ai mis dans overall_header :

Spoiler:

Je n'ai pas mis le template en ligne, vu que ça ne fonctionne pas.

[Neptunia]

Pourriez-vous me fournir les templates topics_list_box, overall_header ainsi que le code complet utilisé pour la récupération des avatars (je suppose que vous passez par le cadre du message d'accueil ?)

Comme ça je pourrais tenter de faire fonctionner le schmilblick sur un fofo test.

[alv]

De quel forum ?

[Neptunia]

De quel forum ?

Tant qu'à faire, ceux du forum sur lequel vous voulez utiliser le script

[alv]

topics_list_box :

Spoiler:

overall_header :

Spoiler:

[alv]

Suite overall_header :

Spoiler:

Le code complet utilisé pour la récupération des avatars :
- index_box :

Spoiler:

- overall_header :

Spoiler:

Sur mon autre forum, l'image est affiché sur le message d'accueil.

[alv]

Up

[Neptunia]

De mon côté je ne suis même pas parvenue à le faire fonctionner sur la liste de sujets. Je ne parviens pas à composer l'url à charger ! Du coup l'image de base est remplacée systématiquement par celle par défaut.

Je passe donc la main à plus doué(e) que moi.

[alv]

Bonjour,
Merci d'avoir essayé Neptunia.

[alv]

Up

[alv]

Up svp

[Invité]

Bonjour,

Je vois que vous essayez de remplacer une image dont la classe est .replace-img.
Dans votre code source, je n'en trouve qu'une :

Code:

<img src="http://servactif.net46.net/Bandeau_communaute_presentationsanniversaires.png" class="replace-img" style="DISPLAY: NONE; float: left"/>

Que le javascript fonctionne ou non, l'image sera toujours en display: none; donc jamais affichée. Vous ne remplacez donc pas la bonne image apparemment. Je peux partir sur l'hypothèse que vous souhaitez remplacer les images suivantes :
https://i.servimg.com/u/f84/19/37/16/39/bandea28.png
https://i.servimg.com/u/f84/19/37/16/39/bandea29.png
https://i.servimg.com/u/f84/19/37/16/39/bandea30.png

Elles sont créées dans le 22633.js (l'un de vos fichiers javascript). Dans ce cas, deux choses à faire :
- leur ajouter un id,
- modifier à nouveau votre code pour prendre en compte ces 3 images à modifier, et "l'appeler 3 fois" avec les 3 paramètres différents (les 3 derniers liens donc ?)

Voilà le code que je peux vous proposer, à placer dans le 22633.js à l'intérieur de ce que vous avez appelé jQuery('#bandeau_quelquessujets_lienscommunaute'), ce qui nous donnerait donc :

Code:

    jQuery('#bandeau_quelquessujets_lienscommunaute').load('http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires span.titre_sujet:lt(4)', function() {
        jQuery.each(jQuery('#bandeau_quelquessujets_lienscommunaute span a'), function(key, ahtml) {
            var bandeau_quelquessujets_lienscommunaute1 = jQuery(ahtml).text();
            var bandeau_quelquessujets_lienscommunaute2 = bandeau_quelquessujets_lienscommunaute1 + ' ' + '<br/><span class="bandeau_quelquessujets_section"><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea41.png" alt="PrÃsentations et anniversaires"/></span>';
            jQuery(ahtml).html(bandeau_quelquessujets_lienscommunaute2);
            $('#bandeau_quelquessujets_imagescommunaute').html('<img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea28.png" id="communaute1" /><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea29.png" id="communaute2" /><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea30.png" id="communaute3" />');
            $('#bandeau_quelquessujets_lienscommunaute').removeClass('bandeau_quelquessujets_chargement');
         
         
         var urlSujet1 = "http://peuplevert.forumloire.com" + $('[href="/f3-communaute-presentations-et-anniversaires"]').closest('.three-col').find('.titre_sujet a').eq('1').attr('href');
         var urlSujet2 = "http://peuplevert.forumloire.com" + $('[href="/f3-communaute-presentations-et-anniversaires"]').closest('.three-col').find('.titre_sujet a').eq('2').attr('href');
         var urlSujet3 = "http://peuplevert.forumloire.com" + $('[href="/f3-communaute-presentations-et-anniversaires"]').closest('.three-col').find('.titre_sujet a').eq('3').attr('href');

         $.get(urlSujet1, function(data) { /* on va dans le dernier sujet */
            $('#communaute1').attr('src', $('.message_avatar img:eq(0)', data).attr('src'));
         });
         $.get(urlSujet2, function(data) { /* on va dans l'avant dernier sujet */
            $('#communaute2').attr('src', $('.message_avatar img:eq(0)', data).attr('src'));
         });
         $.get(urlSujet3, function(data) { /* on va dans l'avant avant dernier sujet */
            $('#communaute3').attr('src', $('.message_avatar img:eq(0)', data).attr('src'));
         });
        })
    });

Voilà, dites-moi si c'est ça, ou si j'ai compris quelque chose de travers

[alv]

Bonjour,
Merci pour votre aide.

J'avais mis "DISPLAY: NONE" pour que l'image ne s'affiche pas, comme le code précédent ne fonctionnait pas. C'était provisoire.

Je peux partir sur l'hypothèse que vous souhaitez remplacer les images suivantes :
https://i.servimg.com/u/f84/19/37/16/39/bandea28.png
https://i.servimg.com/u/f84/19/37/16/39/bandea29.png
https://i.servimg.com/u/f84/19/37/16/39/bandea30.png

C'est bien ça.

Vous avez bien compris ma demande, mais le code ne fonctionne pas. Les images ne sont pas remplacées par les avatars.
La feuille est maintenant "22393.js"

[Invité]

En fait... le test avait été effectué sur la page http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires et comme vous pouvez le voir, ça semble bien fonctionner sur cette page. Je vais essayer de généraliser le fonctionnement sur toutes les pages, mais ce sera un peu plus difficile.

Alors, il va falloir un peu modifier le code. Pour le moment, dans le menu, nous avons :

Code:

<span id="bandeau_quelquessujets_imagescommunaute" class="bandeau_quelquessujets_images"></span>

Il faudrait le remplacer par :

Code:

<span id="bandeau_quelquessujets_imagescommunaute" class="bandeau_quelquessujets_images"><span id="communaute1"></span><span id="communaute2"></span><span id="communaute3"></span></span>

Et le javascript correspondant (encore modifié) :

Code:

    jQuery('#bandeau_quelquessujets_lienscommunaute').load('http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires span.titre_sujet:lt(4)', function() {
        jQuery.each(jQuery('#bandeau_quelquessujets_lienscommunaute span a'), function(key, ahtml) {

         var bandeau_quelquessujets_lienscommunaute1 = jQuery(ahtml).text();
            var bandeau_quelquessujets_lienscommunaute2 = bandeau_quelquessujets_lienscommunaute1 + ' ' + '<br/><span class="bandeau_quelquessujets_section"><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea41.png" alt="Présentations et anniversaires"/></span>';
            jQuery(ahtml).html(bandeau_quelquessujets_lienscommunaute2);

         jQuery('#communaute1').load("http://peuplevert.forumloire.com" + $('[href="/f3-communaute-presentations-et-anniversaires"]').closest('.three-col').find('.titre_sujet a').eq('1').attr('href') + ' .message_avatar img:eq(0)');
         jQuery('#communaute2').load("http://peuplevert.forumloire.com" + $('[href="/f3-communaute-presentations-et-anniversaires"]').closest('.three-col').find('.titre_sujet a').eq('2').attr('href') + ' .message_avatar img:eq(0)');
         jQuery('#communaute3').load("http://peuplevert.forumloire.com" + $('[href="/f3-communaute-presentations-et-anniversaires"]').closest('.three-col').find('.titre_sujet a').eq('3').attr('href') + ' .message_avatar img:eq(0)');
         
         $('#bandeau_quelquessujets_lienscommunaute').removeClass('bandeau_quelquessujets_chargement');
        })
    });

Ca doit toujours marcher sur la page http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires, mais je ne sais pas encore si ça marchera partout !

[alv]

Merci, ça fonctionne, mais uniquement dans la page "présentations et anniversaires". Sur les autres pages, il y a un vide.
Le soucis, c'est qu'en se rendant dans la page "présentations et anniversaires", elle se charge puis le navigateur se fige complètement quelques secondes pour après afficher les avatars.

[Invité]

Hop, nouveau test pour le code :

Code:

    jQuery('#bandeau_quelquessujets_lienscommunaute').load('http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires span.titre_sujet:lt(4)', function() {
       
        var communaute = 0;
       
        jQuery.each(jQuery('#bandeau_quelquessujets_lienscommunaute span a'), function(key, ahtml) {
            var bandeau_quelquessujets_lienscommunaute1 = jQuery(ahtml).text();
            var bandeau_quelquessujets_lienscommunaute2 = bandeau_quelquessujets_lienscommunaute1 + ' ' + '<br/><span class="bandeau_quelquessujets_section"><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea41.png" alt="Présentations et anniversaires"/></span>';
            jQuery(ahtml).html(bandeau_quelquessujets_lienscommunaute2);
            $('#bandeau_quelquessujets_lienscommunaute').removeClass('bandeau_quelquessujets_chargement');

            jQuery('#communaute' + communaute++).load("http://peuplevert.forumloire.com" + jQuery(this).attr('href') + ' .message_avatar img:eq(0)');
        })
    });

Les 3 membres ont le même avatar, c'est un peu dommage pour tester, mais normalement, ça doit fonctionner quelle que soit la page du forum. J'ai fait mes tests en simulant le script sur la page d'accueil, ça fonctionne de mon côté.

[alv]

Bonjour,
Merci, ça fonctionne sur toutes les pages.
Le soucis est que Firefox et IE continue à se figer quelques secondes au chargement des avatars, pour Chrome on dirait que ça ne se fige pas.
Le chargement est aussi assez long.

Un membre a mis un avatar, et j'ai changé provisoirement pour les 2 autres membres. Ca fonctionne bien, l'avatar est placé au membre correspondant.

Je vais vous faire modifier un peu le code je pense. Comme vous avez du le voir dans les autres liens du bandeau vert, les images ont toutes un voile vert dessus. Il faudrait donc que les avatars l'aient aussi. L'idée serait que les avatars soient placés en background de chacun des span id="communaute1,2,3" et avec un second background qui passe devant qui serait cette image qui met un voile vert : https://nsa38.casimages.com/img/2016/06/14/160614021324510551.png . A moins qu'il y ait une solution plus simple.

[Invité]

On doit pouvoir s'en tirer avec le background et en changeant l'opacité de l'image :

Code:

   #communaute1, #communaute2, #communaute3 {
      display: block;
      background: url(http://nsa38.casimages.com/img/2016/06/14/160614021324510551.png);
   }
   #communaute1 img, #communaute2 img, #communaute3 img {
      opacity: 0.5;
      filter: alpha(opacity=50);
   }

Vous pourrez modifier l'opacité pour adapter au mieux, comme bon vous semble

[alv]

Merci, c'est nickel comme ça. J'ai aussi remplacé les span en div align="center" pour centrer les avatars.

Il y a toujours Firefox et IE qui continuent à se figer quelques secondes au chargement des avatars, et le chargement est assez long.

[Invité]

Que ce soit long, c'est normal : pour chaque page, on visite en plus la page http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires pour récupérer les 3 derniers sujets, et pour chacun de ces 3 derniers sujets, on va visiter une page pour récupérer une image.

Dans le fonctionnement interne, on charge donc 5 pages :
- on charge complètement une première page (la page sur laquelle on se trouve)
- on charge complètement la page http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires
- on charge complètement la page du dernier sujet trouvé
- on charge complètement la page de l'avant dernier sujet trouvé
- on charge complètement la page de l'avant avant dernier sujet trouvé

La rapidité de chargement de tout ce petit monde va dépendre de la performance du navigateur, de la taille (poids en octets) de la page à charger, ainsi que de la rapidité de la connexion internet. Cependant, vous pouvez toujours effectuer des optimisations dans votre code, pour que le navigateur aie moins de choses à charger à chaque page. Une optimisation dans une page équivaudra à la même optimisation 5 fois, puisque nous chargeons 5 pages à chaque fois.

En parcourant votre code, par exemple, je constate que vous chargez 2 fois le module jquery, ce qui est inutile et contre-performant :

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">

Code:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Puisque nous appelons 5 pages à chaque fois, ça signifie que le jquery sera chargé 10 fois en tout. Retirez une de ces déclarations, et il ne sera plus chargé que 5 fois. Chacune de ces petites optimisations boosteront le chargement de vos pages, alors, ne les négligez pas !

[alv]

Ah oui, je comprends pourquoi c'est lent.
J'ai enlevé le jquery 1.7.1 mais les cadenas et les 3 liens et images qu'il y a dans chaque lien du bandeau vert fonctionne avec ça. Si je l'enlève, ça ne marche plus. Sinon est-ce-que je peux enlever la version 1.7.2 ? Il est où, je ne l'ai pas trouvé dans overall_header.

Pour optimiser le chargement, il faudrait que le code ne s'exécute que quand on survole le lien "communauté" du bandeau vert. Désolé de vous faire encore modifier le code.

[Invité]

Alors, quand vous retirez le jquery <script src="http://code.jquery.com/jquery-1.7.1.min.js">, ça ne fonctionne plus parce qu'il y a une erreur javascript entre la déclaration du premier jquery, et celle du second. Vous pourrez le retirer après avoir modifié cette ligne dans votre code (présent dans le fichier 99039.js) :

Code:

$(document).ready(function() {
   jQuery('.cartonvert').html(jQuery('.cartonvert').html().replace(/Carton Vert/g, "Peuple Vert")).removeAttr('id');
});

À remplacer par ceci : (l'explication, c'est qu'on vérifie d'abord la présence du .cartonvert avant de modifier son texte) :

Code:

$(document).ready(function() {
   if ($('.cartonvert').length) {
      jQuery('.cartonvert').html(jQuery('.cartonvert').html().replace(/Carton Vert/g, "Peuple Vert")).removeAttr('id');
   }
});

Et voilà le nouveau code pour ne charger qu'après survol de ce menu (remplacer tout ce qui était dans jQuery('#bandeau_quelquessujets_lienscommunaute').load() ...) :

Code:

   var communaute_charge = false;
   $('.bandeau_communaute').hover(function(){
      if (communaute_charge == false){
         communaute_charge = true;
         jQuery('#bandeau_quelquessujets_lienscommunaute').load('http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires span.titre_sujet:lt(4)', function() {
            var communaute = 0;
            jQuery.each(jQuery('#bandeau_quelquessujets_lienscommunaute span a'), function(key, ahtml) {
               var bandeau_quelquessujets_lienscommunaute1 = jQuery(ahtml).text();
               var bandeau_quelquessujets_lienscommunaute2 = bandeau_quelquessujets_lienscommunaute1 + ' ' + '<br/><span class="bandeau_quelquessujets_section"><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea41.png" alt="PrÃsentations et anniversaires"/></span>';
               jQuery(ahtml).html(bandeau_quelquessujets_lienscommunaute2);
               $('#bandeau_quelquessujets_lienscommunaute').removeClass('bandeau_quelquessujets_chargement');
               jQuery('#communaute' + communaute++).load("http://peuplevert.forumloire.com" + jQuery(this).attr('href') + ' .message_avatar img:eq(0)');
            });
         });
      }
   });

En espérant que ça vous convienne maintenant

[alv]

Bonjour,
J'ai enlevé le jQuery 1.7.1, corrigé l'autre code et ça marche.

Pour le chargement des avatars au survol de "communauté", ça marche nickel. Mais je vais demander un changement (désolé ) :
- Je préfèrerais que les 3 liens s'installent dès que la page est chargée entièrement, comme ça l'était avant, et que les avatars soient extraits et installés que quand "communauté" est survolé.
- Je souhaiterais que quand le 1er avatar commence à être extrait, qu'il y ait cette image de chargement ( https://i.servimg.com/u/f68/17/66/41/57/charge10.gif ) au niveau de la zone où doit s'installer le 1er avatar et une fois l'extraction et l'installation finies, que le chargement s'enlève. Ensuite, quand le 2ème avatar commence à être extrait, qu'il y ait cette image de chargement au niveau de la zone où doit s'installer le 2ème avatar et une fois l'extraction et l'installation finies, que le chargement s'enlève. Enfin, quand le 3ème avatar commence à être extrait, qu'il y ait cette image de chargement au niveau de la zone où doit s'installer le 3ème avatar et une fois l'extraction et l'installation finies, que le chargement s'enlève.

Merci d'avance.

[Invité]

Il ne sera pas possible de faire comme indiqué au deuxième point : les 3 images chargent en même temps, en parallèle, pas l'une après l'autre. Il est donc possible que parfois, l'image 3 soit chargée avant l'image 1. Par contre, à la place, je peux proposer de mettre l'image de chargement tant que l'image n'est pas chargée, pour les 3 avatars en même temps. Ça donnerait ce HTML :

Code:

<span id="bandeau_quelquessujets_imagescommunaute" class="bandeau_quelquessujets_images"><div align="center" id="communaute1"><img src="http://i68.servimg.com/u/f68/17/66/41/57/charge10.gif" /></div><div align="center" id="communaute2"><img src="http://i68.servimg.com/u/f68/17/66/41/57/charge10.gif" /></div><div align="center" id="communaute3"><img src="http://i68.servimg.com/u/f68/17/66/41/57/charge10.gif" /></div></span>

Et ce javascript (avec correction du point 1 en même temps) :

Code:

jQuery('#bandeau_quelquessujets_lienscommunaute').load('http://peuplevert.forumloire.com/f3-communaute-presentations-et-anniversaires span.titre_sujet:lt(4)', function() {
    jQuery.each(jQuery('#bandeau_quelquessujets_lienscommunaute span a'), function(key, ahtml) {
        var bandeau_quelquessujets_lienscommunaute1 = jQuery(ahtml).text();
        var bandeau_quelquessujets_lienscommunaute2 = bandeau_quelquessujets_lienscommunaute1 + ' ' + '<br/><span class="bandeau_quelquessujets_section"><img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea41.png" alt="PrÃsentations et anniversaires"/></span>';
        jQuery(ahtml).html(bandeau_quelquessujets_lienscommunaute2);
        $('#bandeau_quelquessujets_lienscommunaute').removeClass('bandeau_quelquessujets_chargement');
    })
});
var communaute_charge = false;
$('.bandeau_communaute').hover(function() {
    if (communaute_charge == false) {
 
        var communaute = 0;
        jQuery.each(jQuery('#bandeau_quelquessujets_lienscommunaute span a'), function(key, ahtml) {
            jQuery('#communaute' + communaute++).load("http://peuplevert.forumloire.com" + jQuery(this).attr('href') + ' .message_avatar img:eq(0)');
            communaute_charge = true;
        })
    }
});

Est-ce que ça convient mieux ?

[alv]

Parfait ! Un énorme merci Toryudo pour votre aide très précieuse
J'ai souvent demandé des modifications, désolé.