Superposer 2 images dans le champ avatar

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

Résolu Superposer 2 images dans le champ avatar

Message par Pitra le Ven 8 Avr 2016 - 0:19

Bonjour/Bonsoir Smile

Me voici avec une nouvelle demande. Cette fois-ci par contre, je n'ai pas un code de base, j'espère que ce ne sera pas un problème^^

Alors voilà. Sur un forum RPG en construction, on voudrait bien pouvoir ajouter une deuxième image au niveau de l'avatar. En clair, l'avatar du membre lui-même et celui de son animal de compagnie. En cherchant un peu je suis tombée sur un forum sur lequel ils font presque la même chose:

Capture:
Spoiler:

Lorsqu'on clique sur les petits rectangles en dessous de l'avatar, on peut afficher soit l'avatar, soit le "Daemon" ou les infos de profils. C'est un bouton checkbox/radio (enfin, je pense).

En résumé, je voudrais savoir s'il serait possible de me faire le même effet mais sans les infos de profil? Juste deux div superposés qui contiendront deux images différentes. La deuxième image (celle de l'animal de compagnie) sera ajoutée par le membre lui-même dans un champ de profil créer à cet effet. A priori. Si ce n'est pas possible de l'ajouter ainsi, merci de me dire quelle autre solution pourrait être envisageable?

Voilà, vous savez tout^^

Un grand merci à qui voudra bien m'aider à réaliser ce code Very Happy

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Sam 9 Avr 2016 - 16:52

UP^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par lilas le Dim 10 Avr 2016 - 4:31

Mr. Green

Ça m'intéresse aussi.

lilas
*****

Féminin
Messages : 611
Inscrit(e) le : 07/08/2004

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

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Dim 10 Avr 2016 - 21:51

UP svp^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Mar 12 Avr 2016 - 23:57

UP^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Jeu 14 Avr 2016 - 20:12

UP

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Sam 16 Avr 2016 - 16:51

UP

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Mar 19 Avr 2016 - 16:20

UP^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Jeu 21 Avr 2016 - 12:33

UP

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Superposer 2 images dans le champ avatar

Message par Morane le Jeu 21 Avr 2016 - 12:40

Bonjour, I Am LiBeRtY

Il y a peut être une solution à ton problème sur le forum de Philippe ici:
http://www.milouze14.com/t29314-possibilite-de-deposer-un-deuxieme-avatar

il faut etre inscrit pour voir Wink

Bien à toi

Morane
**

Féminin
Messages : 76
Inscrit(e) le : 18/08/2014

Morane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Jeu 21 Avr 2016 - 12:53

Bonjour Morane,

Merci beaucoup pour votre aide!

Néanmoins, le forum requiert une inscription puis une validation de la part de l'admin. J'avais un compte mais j'ai oublié les identifiants donc... inscription refaite. Et j'attends la validation! edente

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Morane le Jeu 21 Avr 2016 - 12:59

Oui comme précisé plus haut il faut être inscrite I Am LiBeRtY
je pense que ça va etre fait dans la journée

@ bientôt donc ::fleur::

Morane
**

Féminin
Messages : 76
Inscrit(e) le : 18/08/2014

Morane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par MasDan le Ven 22 Avr 2016 - 7:30

Bonjour Pitra,

Voici ma suggestion.


1) Profil
créer au profil un champ pour le deuxième avatar.


Le champ nom est requis car utilisé par le javascript pour localiser le deuxième avatar.

2) Template
Modification du viewtopic_body
repérer (à la ligne 143 du template par défaut)
Code:
{postrow.displayed.POSTER_AVATAR}

et remplacer par
Code:
<div class="bl_avatar">
  <div class="avatar1 afficher">
    {postrow.displayed.POSTER_AVATAR}
  </div>
  <div class="avatar2 cacher"></div>
  <div class="bouton"></div>
    <table id="tab2">
      <tr>
        <td class="affPhoto1">Pseudo</td >
        <td class="affPhoto2">Animal de<br />compagnie</td>
      </tr>
    </table>
  </div>

3) CSS
Ajouter le code suivant
Code:
div.avatar1, div.avatar2 {
 width: 150px;
 height: 199px;
 overflow: hidden;
}
.afficher {
  display: inherit;
}

.cacher {
  display: none;
}

.affPhoto1, .affPhoto2 {
  text-align: center;
}

.affPhoto1.disp, .affPhoto2.disp {
  background-color: #AA0000;
  color: #00FF00;
  cursor: pointer;
}

.affPhoto1:not(.disp), .affPhoto2:not(.disp) {
  background-color: #555555;
  color: #00FF00;
  cursor: default;
}

4) Javascript (placement : sur les sujets)
Code:
$(document).ready(function(){
 "use strict";
 let nom = "Animal de compagnie";
 $('span.postdetails.poster-profile').each(function() {
 let id = $(this).closest('tr').attr('id');
 if ($('tr#' + id + ' span.label span:contains('  + nom + ')').length > 0 ) {
  let scr = $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().next('img').attr('src');
  $('tr#' + id + ' div.avatar2').html('<img src="' + scr + '" />');
  $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().next('img').css('display','none');
  $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().css('display','none');
      $('tr#' + id + ' .affPhoto1').addClass('disp');
      $('tr#' + id + ' .affPhoto2').addClass('disp');
      $('tr#' + id + ' .affPhoto1').attr('onClick',"$('#" + id + " .avatar2').removeClass('afficher').addClass('cacher');$('#" + id + " .avatar1').removeClass('cacher').addClass('afficher');"); 
      $('tr#' + id + ' .affPhoto2').attr('onClick',"$('#" + id + " .avatar1').removeClass('afficher').addClass('cacher');$('#" + id + " .avatar2').removeClass('cacher').addClass('afficher');");
 }
 });
});
Ligne 3: le texte de la variable nom correspond à la valeur du champ nom du profil.

Pour les cases Pseudo et Animal de compagnie, le fond gris indique que le deuxième avatar est absent alors que le fond rouge indique sa présence.

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

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

Résolu Re: Superposer 2 images dans le champ avatar

Message par Morane le Ven 22 Avr 2016 - 15:03

Salut Pitra Wink

tu as un second exemple ici : http://www.milouze14.com/t29323-phpbb2-permettre-aux-mettre-d-avoir-un-deuxieme-avatar#561439

Morane
**

Féminin
Messages : 76
Inscrit(e) le : 18/08/2014

Morane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Ven 22 Avr 2016 - 15:17

Hello @MasDan,

Merciiiiii! Une fois de plus, vous êtes l'homme de la situation!
Alors, la proposition me convient parfaitement et je suis sûre qu'elle aurait pu fonctionner sans encombre (pour le moment, tout s'affiche correctement mais l'image n'intègre pas la div2 et les fonds des cases sont tous les 2 grisés) si je n'avais pas un viewbody assez particulier. Je suis sûre que les class utilisés dans le JV ne correspondent pas à mon template. J'essayais justement d'adapter un autre de mes JV mais j'y arrive pas.
Je vous poste le template, histoire que vous essayez de modifier les class du JV en conséquence svp Angel :




Bonjour @Morane,

Merci vraiment pour ton aide mais la proposition de MasDan me convient parfaitement donc je vais travailler sur ça. Mais merci beaucoup pour ton aide♥

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par MasDan le Ven 22 Avr 2016 - 16:51

Bonjour,

Le précédent javaScript ayant été écrit pour un template non modifié n'est pas fonctionnel sur votre template personnalisé. Ce nouveau javaScript devrait corriger le tout.
Code:
$(document).ready(function(){
 "use strict";
 let nom = "Animal de compagnie";
 let cmpt = 0;
 $('td.boxPOST').each(function() {
  $(this).closest('tr').attr('id','msg-' + (++cmpt));
 });
 $('tr[id^="msg-"]').each(function() {
   let id = $(this).attr('id');
   if ($('tr#' + id + ' span.label span:contains('  + nom + ')').length > 0 ) {
     let scr =   $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().next('img').attr('src');
     $('tr#' + id + ' div.avatar2').html('<img src="' + scr + '" />');
     $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().next('img').css('display','none');
     $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().css('display','none');
      $('tr#' + id + ' .affPhoto1').addClass('disp');
      $('tr#' + id + ' .affPhoto2').addClass('disp');
      $('tr#' + id + ' .affPhoto1').attr('onClick',"$('#" + id + " .avatar2').removeClass('afficher').addClass('cacher');$('#" + id + " .avatar1').removeClass('cacher').addClass('afficher');"); 
      $('tr#' + id + ' .affPhoto2').attr('onClick',"$('#" + id + " .avatar1').removeClass('afficher').addClass('cacher');$('#" + id + " .avatar2').removeClass('cacher').addClass('afficher');");
   }
 });
});

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

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

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Ven 22 Avr 2016 - 17:50

Re,

Vraiment désolée MasDan mais rien ne change. Les champs sont toujours grisés et l'image apparaît toujours dans le champ normal des profils. Gloups

Si vous avez besoin d'un autre template ou de mon CSS en entier, je le fourni volontiers.

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par MasDan le Ven 22 Avr 2016 - 20:30

Hum...

Chez moi, avec votre template et le dernier javaScript fourni, tout fonctionne bien.



Je vois que vous avez modifier le libellé de l'affichage du deuxième avatar.

Le texte du nom du profil doit être le même que la valeur de la variable nom du javascript. Et le type d'affichage requiert texte.






Si le problème persiste, puis-je avoir un accès pour visualiser le problème?

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

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

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Ven 22 Avr 2016 - 20:40

On vient de confirmer que je suis une grosse nouille :O:

J'avais tout bon pour le changement du nom, j'ai juste mis "icône" au lieu de "texte" pour le type d'affichage. J'avais juste bêtement suivi le premier screen que vous m'aviez posté Laughing

Du coup, c'est topissime maintenant, merci mille fois pour votre aide!!!

Je vais attendre un peu avant de passer en résolu, je voudrais essayer de modifier les couleurs^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Ven 22 Avr 2016 - 22:33

Re,
Me revoilà. Je cherche mais je trouve pas et j'ai surtout peur de faire des bêtises donc...

SVP, je voudrais que vous me modifiez un tout petit peu le JS pour y ajouter une fonction qui permettrait de changer la couleur de la cellule active. C'est à dire que quand on coche par exemple la case "avatar", qu'elle devienne orange et que quand on clique sur la case "animal", que ce soit elle qui devienne orange et que l'autre redevienne la couleur par défaut.

Je voudrais aussi ajouter un petit effet (fade in ou flip) au changement de l'image.

Merci d'avance pour votre coup de main ::fleur::

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Dim 24 Avr 2016 - 15:45

Mode UP activé^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par MasDan le Lun 25 Avr 2016 - 1:22

Bonjour Pitra,


Voici une nouvelle version

1) Template viewtopic-body

Repérer (nouveau)
Code:
<tr>
<td valign="top" class="boxPOST">
et remplacer par
Code:
<tr id="msg-{postrow.displayed.U_POST_ID}">
<td valign="top" class="boxPOST">


Repérer
Code:
{postrow.displayed.POSTER_AVATAR}
et remplacer par (du code donné précédemment: ajout ligne 4 - balise img )
Code:
<div class="bl_avatar">
    <div class="divAvatar">
      {postrow.displayed.POSTER_AVATAR}
     <img class="avatar2 cacher" />
    </div>
    <div class="bouton">
      <table id="tab2">
        <tr>
          <td class="affPhoto1">Pseudo</td >
          <td class="affPhoto2">Compagnon</td>
        </tr>
      </table>
    </div>
  </div>


Repérer (nouveau)
Code:
<div class="abtPOST">
et remplacer par
Code:
<div class="abtPOST" style="display: none;">



2) CSS remplacer le CSS donné précédemment par
Code:
.divAvatar, .divAvatar img {
 width: 150px;
 height: 199px;
 overflow: hidden;
}
  /* si valeur height modifié  -» modifier la valeur du top(.avatar2) même valeur en négatif */

img.avatar1.afficher, img.avatar2.afficher {
  opacity: 1;
  -moz-transition: opacity 2s linear 1.5s;
  -webkit-transition: opacity 2s linear 1.5s;
  transition: opacity 2s linear 1.5s;
}

img.avatar1, img.avatar2 {
  opacity: 0;
  -moz-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.active {
  background-color: #DD7506 !important;
}

.avatar2 {
  position: relative;
  top: -199px;
}

.affPhoto1, .affPhoto2 {
  text-align: center;
}

.affPhoto1.disp, .affPhoto2.disp {
  background-color: #AA0000;
  color: #00FF00;
  cursor: pointer;
}

.affPhoto1:not(.disp), .affPhoto2:not(.disp) {
  background-color: #555555;
  color: #00FF00;
  cursor: default;
}



3) JavaScript placement sur les sujets - remplacer le javaScript donné précédemment par
Code:
$(document).ready(function(){
  "use strict";
  let nom = "Compagnon";
  $('tr[id^="msg-"] span.label span:contains('  + nom + ')').parent().next('img').css('display','none');
  $('tr[id^="msg-"] span.label span:contains('  + nom + ')').parent().css('display','none');
  $('tr[id^="msg-"]').each(function() {
    let id = $(this).attr('id');
    if ($('tr#' + id + ' span.label span:contains(' + nom + ')').length > 0 ) {
      $('tr#' + id + ' .divAvatar a img').addClass('avatar1 afficher');
      let src = $('tr#' + id + ' span.label span:contains('  + nom + ')').parent().next('img').attr('src');
      $('tr#' + id + ' .divAvatar img.avatar2').attr('src', src);
      $('tr#' + id + ' .affPhoto1').addClass('disp active');
      $('tr#' + id + ' .affPhoto2').addClass('disp');
      $('tr#' + id + ' .affPhoto1').attr('onClick',"modifPhoto(1, 2, '" + id + "');");
      $('tr#' + id + ' .affPhoto2').attr('onClick',"modifPhoto(2, 1, '" + id + "');");
    }
  });
  $('div.abtPOST').removeAttr('style');
});

function modifPhoto(aff, cache, id) {
  if ($('tr#' + id + ' .affPhoto' + aff).hasClass('active') == false) {
    $('tr#' + id + ' .affPhoto' + aff).addClass('active');
    $('tr#' + id + ' .affPhoto' + cache).removeClass('active');
    $('#' + id + ' .avatar' + cache).removeClass('afficher').addClass('cacher');
    $('#' + id + ' .avatar' + aff).removeClass('cacher').addClass('afficher');
  }
}

P.S.: Désolé pour la mauvaise capture d'écran dans un précédent message (type d'affichage icône au lieu de texte).

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

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

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Lun 25 Avr 2016 - 1:34

Bonjour MasDan,

Merci beaucoup pour cette nouvelle version!! cheers
Je test ça demain et je vous tiens au courant^^

Pas grave pour la capture d'écran, ça peut arriver Very Happy

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer 2 images dans le champ avatar

Message par Pitra le Lun 25 Avr 2016 - 19:12

Hello !

Je passe confirmer que vous avez fait un super travail, @MasDan, c'est pile poil ce que je souhaitais!!! cheers

Thanks Thanks Thanks Very Happy

Sujet résolu^^

Pitra
***

Féminin
Messages : 132
Inscrit(e) le : 16/09/2015

http://bimbforum.forumeiros.com
Pitra a été remercié(e) par l'auteur de ce sujet.

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