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

Page 2 sur 3 Précédent  1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

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

Message par Pinguino le Mar 11 Sep 2012 - 10:13

Rappel du premier message :

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 !


 Exclamation  ATTENTION  Exclamation


  • 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  ajout  :

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://illiweb.com/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 !!  Yahoo



Pinguino
Adminactif
Adminactif

Masculin
Messages : 10213
Inscrit(e) le : 02/05/2004

http://www.forumactif.com
Pinguino a été remercié(e) par l'auteur de ce sujet.

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

Message par didguitare le Lun 17 Sep 2012 - 20:09

Oups désolé, en ajoutant le code CSS cela fonctionne bien, merci beaucoup je trouves cette astuce super cool, on en aimerait comme cela plus souvent!

didguitare
****

Masculin
Messages : 209
Inscrit(e) le : 28/04/2008

http://maoableton.forumactif.org/forum.htm
didguitare a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 19 Sep 2012 - 9:23

bonjour,
je vais surement posé une question stupide mais y a t’il possibilité de l’intégré avec invision
Cordialement

quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.

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

Message par FANCH 56 le Mer 19 Sep 2012 - 10:28

Affirmatif

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 19 Sep 2012 - 11:39

Affirmatif ? question stupide ou oui on peut l’intégré ????????
Cord


Dernière édition par quad daniel le Mer 19 Sep 2012 - 11:47, édité 1 fois

quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.

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

Message par FANCH 56 le Mer 19 Sep 2012 - 11:40

oui on peut l'intégrer je suis sous invision

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 19 Sep 2012 - 11:47

comment peut faire ?
cordialement

quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.

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

Message par FANCH 56 le Mer 19 Sep 2012 - 11:50

Comme le tutoriel ci-dessus

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 19 Sep 2012 - 12:18

re bonjour cela fait 3 ou 4 fois que j’essaie avec code css
marche pas j'ai donc fait avec
en créant le code html comme si dessus fonctionne toujours pas

j'ai créer le html et mis
Voulez-vous utiliser le haut et le bas de page de votre forum ?
coché a Non
et
Utiliser cette page en tant que page d'accueil ?
coché a non

j'ai essayer plusieurs manière rien !
un conseille !
Cordialement

quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par FANCH 56 le Mer 19 Sep 2012 - 15:09

Créé ton sujet dans la partie problème avec un code

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 19 Sep 2012 - 17:35

désolé comprend pas ce que vous dite de faire y connais rien en code ? ou le mètre
Cord/

quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.

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

Message par demeter1 le Mer 19 Sep 2012 - 21:21

Fanch vous soumet de poser votre question dans la partie entraide du forum.

demeter1
+ Hyperactif +

Masculin
Messages : 8101
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

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

Message par snunez le Mer 19 Sep 2012 - 22:42

Bonjour,

J'ai fais ce qui était écrit et pourtant on voit rien, je pense donc demandez de l'aide dans la partie "problème" pour qu'on m'aide individuellement.



Sinon je tenais à dire, merci forumactif pour cette innovation. J'aime vraiment beaucoup l'idée!

snunez
****

Masculin
Messages : 442
Inscrit(e) le : 19/04/2012

http://mariahcareyinfos.forumactif.com/
snunez a été remercié(e) par l'auteur de ce sujet.

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

Message par Cyberchris28 le Jeu 20 Sep 2012 - 18:09

Juste une petite question, y a t'il moyen que ces avatars ne soient pas vus par les invités ?

Merci

Cyberchris28
****

Masculin
Messages : 387
Inscrit(e) le : 17/01/2008

http://www.brezoland.com
Cyberchris28 a été remercié(e) par l'auteur de ce sujet.

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

Message par snunez le Ven 21 Sep 2012 - 1:37

Bon, pas de réponses. Je pense néanmoins qui faut que je change les dimensions dans mon CSS. 30/30 comme quelqu'un l'a dit sur ce topic mais, je ne sais pas trop le faire, malheuresement... Je suis perdue et j'ai peur de faire des bétises si je modifie.

Mon topic est ici, pour ceux qui voudront bien me guidée, m'aidée.

http://forum.forumactif.com/t338483-l-image-des-avatars-des-derniers-membres-qui-ont-postes-sur-mon-forum#2903326

snunez
****

Masculin
Messages : 442
Inscrit(e) le : 19/04/2012

http://mariahcareyinfos.forumactif.com/
snunez a été remercié(e) par l'auteur de ce sujet.

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

Message par Chezoit le Ven 21 Sep 2012 - 13:42

Bonjour,

Désolé je ne m'y connais pas en code.
Je voudrais juste changer la taille des avatars dans le code en Javascript.
(le code CSS ne fonctionne pas sur mon forum)

Merci aux personnes qui pourront m'aider.

Chezoit
***

Masculin
Messages : 106
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

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

Message par Chacha le Ven 21 Sep 2012 - 13:47

Bonjour,

Comme demandé par EA :

@Ea a écrit:Bonjour,


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


Cordialement.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49730
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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

Message par Chezoit le Ven 21 Sep 2012 - 13:53

Oui merci j'ai lu mais le code qui m’intéresse c'est celui en Javascript.

Ce qui est en parenthèses est noté pour ceux qui se poserait la question "pourquoi je n'utilise pas celui en CSS ?" cyclops

Là, on est dans le sujet des codes et non dans des problèmes de codes.

Chezoit
***

Masculin
Messages : 106
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

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

Message par demeter1 le Ven 21 Sep 2012 - 15:57

Il s'agit toujours d'une demande d'aide en codage. La réponse de Chacha était pourtant explicite .

demeter1
+ Hyperactif +

Masculin
Messages : 8101
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Chezoit le Ven 21 Sep 2012 - 17:42

EDIT.
C'est bon, on m'a aidé.
Merci B.

Chezoit
***

Masculin
Messages : 106
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

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

Message par Arisana le Dim 23 Sep 2012 - 21:35

Merci pour ce super tuto Smile
Par contre, il n'y aurait pas un moyen de gardé le ration de l'image ? Certaines sont déformées :/

Arisana
*

Féminin
Messages : 39
Inscrit(e) le : 19/02/2011

http://passionmangabeta.forumgratuit.org/
Arisana a été remercié(e) par l'auteur de ce sujet.

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

Message par K@K le Lun 24 Sep 2012 - 10:20

Bonjour,
bravo pour ce tuto thumleft

merci pour ce petit code pour le cadre thumleft

@spip a écrit:
@MIKE 45 a écrit:
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.
échange de bon procédé pour ne plus avoir l'effet de zoom

@spip a écrit: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 tongue comment faire le pour l'enlever ?

Merci.

il faut que vous modifiez la fin des CSS en supprimant la partie rouge

.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;
}

K@K
*****

Masculin
Messages : 848
Inscrit(e) le : 04/04/2008

http://www.1302-03only.com/forum
K@K a été remercié(e) par l'auteur de ce sujet.

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

Message par Jerty le Mer 26 Sep 2012 - 22:13

J'aime !
Mais quand un membre change d'avatar, il prend du temp à se modifier

Jerty
**

Messages : 60
Inscrit(e) le : 26/07/2012

http://www.hobbacity.com/
Jerty a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par azalee 33 le Jeu 27 Sep 2012 - 22:44

merci pour ce tuto , je viens de le mettre sur mon PA , j'ai mis les 2 codes , c'est bien cela qu'il fallait faire!!!

pour l'instant je ne vois rien alors je ne sais pas si cela fonctionne correctement

azalee 33
****

Féminin
Messages : 205
Inscrit(e) le : 08/02/2009

http://whippets.forumactif.info
azalee 33 a été remercié(e) par l'auteur de ce sujet.

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

Message par FANCH 56 le Jeu 27 Sep 2012 - 22:48

Bonsoir

Et bien passe à IE9 ou Firefox. Il est bien précise : Navigateurs Récents

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

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

Message par azalee 33 le Jeu 27 Sep 2012 - 23:18

@FANCH 56 a écrit:Bonsoir

Et bien passe à IE9 ou Firefox. Il est bien précise : Navigateurs Récents

suis pas trop experte !!! Laughing et je n'ai pas fait attention au navigateur . Donc comme j'ai un ancien cela ne risque t il pas de perturber mon forum , dois je alors enlever ce tuto .merci de votre aide

azalee 33
****

Féminin
Messages : 205
Inscrit(e) le : 08/02/2009

http://whippets.forumactif.info
azalee 33 a été remercié(e) par l'auteur de ce sujet.

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

Message par Bad_girls le Dim 30 Sep 2012 - 22:45

Merciiiiiiiiiiiiiiiii! Trop génial!! ♥

Bad_girls
*****

Féminin
Messages : 618
Inscrit(e) le : 21/09/2010

http://leforumdesamis.monally.com/portal.htm
Bad_girls a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 3 Oct 2012 - 19:09

Bonjour,

j'ai mis ce javascript, 'Codes Javascript et j'ai Activer la gestion des codes Javascript :
je souhaiterai si possible réduire l'image sans modifier mon avatar par défaut!



Code:

        $(function(){
       
            if(!window.localStorage) return;
       
            // Avatar par défaut
            var default_avatar= 'http://illiweb.com/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);
            };
       
        });


j'ai actuellement l'image trop grosse elle m"élargies les sujets présenter
EX:


je souhaiterais si possible avoir une image petite comme carré rouge si dessous qui me réduirai la hauteur (flèche rouge)


sans modifier mon avatar par défaut a l'ouverture de mon sujets


je ne suis pas un pro des codes voir même de l'informatique,je suis en invision,
j’espère que vous pourrez m' apporté de l'aide..
Cordialement



quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.

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

Message par KRISTOF.T le Mer 3 Oct 2012 - 19:38

hello, c'est parceque tu n'as pas suivi le tutoriel à la lettre...

il faut les 2 codes, et javascript et css...

quand tu auras bien ajouté les 2 codes à ton forum, la taille de l avatars sera correct.

cordialement,

KRISTOF.T
*****

Messages : 687
Inscrit(e) le : 06/09/2010

http://maofree.com
KRISTOF.T a été remercié(e) par l'auteur de ce sujet.

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

Message par quad daniel le Mer 3 Oct 2012 - 19:52

@KRISTOF.T a écrit:hello, c'est parceque tu n'as pas suivi le tutoriel à la lettre...

il faut les 2 codes, et javascript et css...

quand tu auras bien ajouté les 2 codes à ton forum, la taille de l avatars sera correct.

cordialement,

bonsoir ,
déjas merci pour votre réponse,
pour des connaisseurs sa semble simple pour moi c'est compliqué !
comme j'ai dit je suis pas fort en code est j'ai bien vus que le css était a mettre, mais a PA > affichage > images & couleurs > feuille de style CSS : j'ai dé-jas une écriture alors ou la mettre et comment, faut t'il rajouter un code en suivent ..
je suis perdu sa fait 3 semaine que j’essaie je n'y arrive pas, et j'ai peur de faire une bêtise et de perdre ma page d'accueil.

si personne peut m'apporter de l'aide , a faire mon code dommage pas grave je resterai simple comme avant

vous remercient

quad daniel
***

Masculin
Messages : 187
Inscrit(e) le : 03/02/2011

http://quadsalvetain.com
quad daniel a été remercié(e) par l'auteur de ce sujet.

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

Message par Pinguino le Jeu 4 Oct 2012 - 9:14

Bonjour


Pour le css il suffit de rajouter le code fournit dans le tutoriel à la suite de votre code actuel dans PA > affichage > images et couleurs > couleurs > feuille de style CSS


Cordialement,
Smile

Pinguino
Adminactif
Adminactif

Masculin
Messages : 10213
Inscrit(e) le : 02/05/2004

http://www.forumactif.com
Pinguino a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 3 Précédent  1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum