Astuce du mardi : Avatar du membre ayant posté en dernier sur l'index du forum

[Pinguino]

Avatar du membre ayant posté en dernier sur l'index du forum

1.Définition: Bonjour à tous Voici un tutoriel pour afficher, sur l'index de votre forum, l'avatar du membre ayant posté en dernier !    ATTENTION   Ne fonctionnera pas pour les membres avec un navigateur trop ancien 2.Le code Javascript PA > modules > HTML & javascripts > Gestion des codes javascripts > créer un nouveau code    : Mettre le titre que vous souhaitez Emplacement : Sur l'index Coller le code suivant et enregistrer : Code: $(function(){      if(!window.localStorage) return;      // Avatar par défaut     var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';      // Temps de cache, ici 24 h * 60 m * 60 s * 1000 ms donc un jour     var caching_time= 24*60*60*1000;      // Temps de cache d'une erreur, ici 60 s * 1000 ms donc une minute     var caching_error= 60*1000;      var set_avatar= function(id) {         $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');     };      var get_avatar= function(id) {         if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))         {             localStorage.setItem('d_ava'+id, default_avatar);             $.get('/u'+id, function (d){                 localStorage.setItem('t_ava'+id,+new Date);                 localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);                 set_avatar(id);             });         }         return localStorage.getItem('d_ava'+id);     };      var to_replace= {};      $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){         to_replace[$(this).attr('href').substr(2)]= 1;         $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');     });      for(i in to_replace)     {         set_avatar(i);     };   }); 3.Le code CSS : PA > affichage > images & couleurs > feuille de style CSS : Code: .mini_ava {   float: left; } .mini_ava img {   width: 40px;   height: 40px;   margin: 0 5px;   border-radius: 10px;   transition: all 2s;   -moz-transition: all 2s;   -webkit-transition: all 2s;   -o-transition: all 2s; } .mini_ava img:hover {   width: 80px;  height: 80px; } Exemple : Vous pouvez personnaliser ce code (couleurs, bordures...)      BRAVO c'est fini !!

Ce tutoriel a été réalisé sur la base d'un tutoriel du staff du Forum des forums espagnols (Celina), Il a été traduit pour le Forum des Forums français par Pinguino, et optimisé par Ea. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

[dede54foiredenancy]

Bonjour, j'ai une question, j'aimerais bien appliquer les avatar au sous forums, mais il y a un petit problème, c'est que le texte dépasse du cadre.
Comment faire si c'est possible ?

Merci (Ps : vos tutoriel sont très explicatifs, donc facile a appliquer)

[Djlc.Discomobile]

Wahooooo super Merci pour le partage et surtout de donner les code,génial,vivement <Mardi prochain alors

[Invité]

Bonjour,

Oui super, par contre chez moi ça fonctionne très bien sous Firefox,
mais sous IE non :no

Je suis le seul dans ce cas là ?

Cordialement Jérôme

[Jean Nicolas]

Bonjour

Chez moi ça marche sur IE9.
Merci Pinguino, c'est balaise.

[elbandito]

Oups, je n'ai rien dit, ca marche nickel !
Merci

[Ea]

Bonjour,


Pour des problèmes vous pouvez créer un sujet dans la section Problème avec un script, un code )

[Djlc.Discomobile]

Sur IE 9 j'ai pas tout les avatars certains sont remplacer par un cadre et une croix rouge

[AenigmA]

Hello,
Joli travail de Célina que j'avais déjà installé. Je vois qu'il a été retravaillé et est plus simple à installer. Bravo
Merci Pinguino de l'avoir mis ici.

[julworld]

Ah, enfin des preuves de présence et de nouveautés. Nous avions pensé que vous aviez disparu. En tout cas, astuce assez sympa, vivemment les prochaines ( car, celle-ci, ne m'est pas vraiment nécéssaire ).

[Bruno®]

merci , ça fait classe sur les forum

super

[subalex57]

super

[Invité]

Super ! Merci ^^ sa rends super bien en plus !!! Bravo

[âme]

Bonsoir Pinguino,

Merci pour cette astuce !
Je vais l'appliquer sur mon fo' de tests et le mettrais ensuite en place sur Color'.
Bonne soirée

[Nono38]

Salut Pinguino,

Cela ne marche pas sur mon fofo

Je suis en phpBB2, j'ai Google chrome.

Merci d'avance,

Norbert

http://graph-actif.lebonforum.com/

---

Edit modération : le support n'est pas assuré dans les annonces, merci de poster dans l'Entraide pour tout problème avec cette astuce.

[FANCH 56]

Merci Pinguino

Je vais faire le casse pied : Dit monsieur Pinguino................on peut l'avoir aussi sur les derniers sujets (Widget). :thanks:

[Invité]

Merci

c'est sympa comme astuces

[Ange-Carmen]

Hello, merci pour l'astuce c'est sympa, un peu répétitif quand c'est les même qui postent, mais en mettant l'arrondi à 20 j'ai des jolis petits ronds de 30x30 .. ça fais joli (mais pas sur l'index, juste dans les listesz de sujets)

A mardi prochain alors ? lol

[Jean Nicolas]

Emplacement : Sur l'index

Bonjour
J'ai coché également les sous forums et cela "rend" très bien.
Merci encore.

[Invité]

Merci du partage. (:

[âme]

Bonjour,
Ça ne fonctionne pas sur mon fo', est-ce à cause du codage des catégories ?

Spoiler:

[âme]

Bonjour,


Pour des problèmes vous pouvez créer un sujet dans la section Problème avec un script, un code )

Pardon.
Je m'y rend de suite.
Merci

[sophb]

Merci beaucoup, fonctionne bien sous chrome.

[Pepper Potts]

Merci beaucoup pour cette astuce, l'effet est vraiment sympa.
Fonctionne impec' sous Chrome.

[h.deuzot]

Bonjour,

Cela fonctionne parfaitement sous IE 8.
Ce n'est sans doute pas d'une grande utilité mais il se pourrait que cela puisse motiver davantage les membres pour utiliser un avatar.
Grand merci.

Amicalement,
H. Deuzot.

[demeter1]

L'astuce est très sympa mais ne fonctionne malheureusement pas en cas d'index box modifié.

[291]

nickel !!! est il possible de le faire sur tout les pages du forum ? si oui comment


merci en tout cas c'est super !

[MIKE 45]

Vous pouvez personnaliser ce code (couleurs, bordures...)

border-radius: 10px; je pense que c'est cela la largeur de la bordure,
mais je vois pas la couleur ?

[spip]

border-radius: 10px; je pense que c'est cela la largeur de la bordure,
mais je vois pas la couleur ?

Bonjour,

border-radius concerne les coins arrondis.
pour la couleur (ainsi que le style et la largeur des contours), rajouter soit :

Code:

 border-width:1px;
 border-style:solid;
 border-color:black;

soit

Code:

border:1px solid black;

Et personnalisez le tout.


Pour ma part, j'aime beaucoup cette astuce, mais beaucoup moins le zoom quand on survole l'avatar.
Mon niveau en javascript étant proche du néant comment faire le pour l'enlever ?

Merci.

[didguitare]

Bonjour à tous, très bonne idée l'affichage des Avatars MAIS, petit problème, j'avais mis au début de mon forum la taille des avatars de 100 x 100.

Du coup, cela fait vraiment trop gros en affichant les avatars sur l'index.....

Je suis bien sur allé dans mon PA, changé la taille de 60 x 60 mais les avatars déja crée, + de 11700 membres! ne sont pas redimmensionné automatiquement.

Y aurait t-il une solution?

En vous remerciant,
Didier.