Comment appeler rpg_sheet pour un aperçu d'image dans viewtopic_body

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonjour ou bonsoir à tous !

Une idée m'est venue et je ne sais si elle doit être à la fois dans "suggestion" et à la fois ici. Suggestion ne me semblait pas correct car il s'agit pour l'instant d'une demande personnelle et des éclairements.

En effet, comme vous pouvez le voir sur l'image que je vous ai présenté, je souhaite faire que, lors du survol de ma souris sur l'avatar du topic de mon forum, une image en grand présente dans "feuille de personnage" nommée "identité du personnage" pour le moment, puisse apparaître à côté. (l'image vient d'un autre site, d'une association de JDR, auquel je participe en tant que joueuse de jeu de rôle).

Je vois comment appeler une variable mais pas une donnée précise, dans une variable que je fais appeler dans un code qui lui-même, a déjà été changé. Dedans j'ai 3 grandes modifications :

1 - affichage profil avec un hover pour afficher les champ profil par-dessus l'avatar.
2 - j'ai modifié avec l'aide de @MlleAlys l'ensemble du template pour "cacher" via un boutton, les données du forum que je ne voulais pas voir.
3 - J'ai ajouté une réponse rapide avec avatar.

Devant le chantier immense et pour les personnes ayant une idée de la faisabilité, je vous joins mon code :



Pour une idée plus précise; je vous joins le lien de "mon profil" : https://albastrya.bbactif.com/u1 , section "identité du personnage" avec l'image et ce lien pour voir l'aperçu de mon template : https://albastrya.bbactif.com/t126-sujets-des-notifications#481

Plus bas le code CSS qui me permet de faire appel à mon code pour animer l'avatar dans le sujet et y voir ses informations...

Code:

/*=================== INFO RPG AVATAR =================**/
.profil-cache  {position: relative;z-index: 1;width: 188px;margin-left: auto;margin-right: auto;
    background: url(https://2img.net/r/hpimg11/pics/424348fond.jpg) no-repeat center bottom, url(https://2img.net/r/hpimg11/pics/442537fond2.jpg) no-repeat center top;
    padding-left: 1px;padding-right: 1px;text-align: left;box-shadow: 0 0 5px #000;-moz-box-shadow: 0 0 5px #000;-htm-box-shadow: 0 0 5px #000;-o-box-shadow: 0 0 5px #000;-webkit-box-shadow: 0 0 5px #000;
    color: #434343!important;}
/*=================== DECORATION TEXTE PSEUDO RANG =================**/
.name_prof{white-space: normal;font-family:'Cinzel Decorative', cursive;font-size: 16px;margin:1px auto 0 auto;text-align:center;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);}
.name_prof:hover{font-size: 17px;}
.rank{font-family:'Cinzel Decorative', cursive;text-align: center; font-size: 16px;}
/*=================== Cadre rang =================**/
.rang_perso{  position: relative;  z-index: 2;  width: 70%;  height: 20px;  margin: 10px auto 0 auto;  background: #262626;
text-transform: uppercase;  color: #65615b;  font-size: 11px;  box-shadow: 0px 0px 2px #000000;  text-align: center;  padding-top: 3px;}
/*=================== CADRE AUTOUR DE L AVATAR =================**/
.infobulle_avatar a img {width:150px;height:220px;
  -moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;border: 1px double;-moz-box-shadow: 0px 1px 5px;
  -webkit-box-shadow: 0px 1px 5px;box-shadow: 0px 1px 5px;}/* Laissez comme ceci */

Merci à vous de votre future réponse !

[Kaehlyth]

Un petit up.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Kaehlyth]

Un petit up.

[Toryudo]

Bonjour !
Alors, avec le code actuel, on va avoir plusieurs petits problèmes.
Dans un sujet classique https://albastrya.bbactif.com/t126-sujets-des-notifications#481, au niveau de l'avatar, vous avez un id="englob". C'est ce qu'il faudrait qu'on utilise pour faire en sorte de faire une action au survol de l'avatar grâce à du JavaScript, mais le problème, c'est que vous avez cet id au niveau de chaque avatar... alors qu'un id doit être unique au sein d'une même page !

Alors, je ne sais pas si ça vous embête, mais il faudrait remplacer ce id="englob" par un class="englob" pour qu'on puisse l'utiliser (dans votre CSS, il faudra remplacer les #englob par des .englob).


Ensuite, on peut se débrouiller avec ce genre de script :

Code:

$('.englob').hover(function(){
    $('#result').remove();

    var idLink = $(this).find('.imgp a').attr('href');  
    var $result = $("<div id='result'></div>");
    $result.load(idLink + ' .boxRPG ', function (){
        $result.html($result.find('img')[0]);
        $result.css(styles);
    });

    var styles = {
        display: "block",
        position: "fixed",
        zIndex: "100",
        border: "2px solid #000",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
    };
    $("body").append($result);

}, function(){
    $('#result').remove();
});


J'ai appliqué un CSS un peu spécial pour commencer, mais c'est plutôt la technique qui m'intéresse dans un premier temps.
Au survol de la class="englob", le script va chercher le lien vers la fiche perso https://albastrya.bbactif.com/u1 qu'il trouve au niveau du pseudo. Il charge cette fiche en mémoire et va récupérer ce qui est contenu dans la class="boxRPG" (l'image à récupérer + d'autres petites choses que le script s'occupe de nettoyer). Enfin, il ajoute cette image dans un div qu'il crée, et la centre pour le moment sur l'écran en position: fixed.
Dès que la souris quitte l'avatar, la prévisualisation de l'image se referme.

Est-ce que ça correspond à peu près à ce que vous souhaitez ?
Si vous voulez modifier le CSS, je vous suggère de plutôt utiliser ce script :

Code:

$('.englob').hover(function(){
    $('#result').remove();

    var idLink = $(this).find('.imgp a').attr('href');  
    var $result = $("<div id='result'></div>");
    $result.load(idLink + ' .boxRPG ', function (){
        $result.html($result.find('img')[0]);
    });
    $("body").append($result);

}, function(){
    $('#result').remove();
});


Et de prendre ce CSS de base :

Code:

#result {
   display: block;
   position: fixed;
   z-index: 100;
   border: 2px solid #000;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Ce sera plus simple pour vous si vous y êtes habitué !
Et je sais que le code n'est pour le moment pas optimal, parce que si l'image de la fiche RPG apparait au niveau de la souris, le script va croire que vous avez quitté le survol de l'avatar et fermer la prévisualisation... mais en fonction du CSS que vous voulez mettre en place, ça pourra éventuellement ne plus jamais arriver, donc sait-on jamais, je laisse comme ça pour l'instant !

[Kaehlyth]

Bonsoir !

Alors tout d'abord merci pour la réponse !
J'ai donc changé le      

Code:

<div id="englob" class="postdetails">

par      

Code:

<div class="englob" class="postdetails">

Après ça j'ai changé dans le CSS les

Code:

#englob

par

Code:

.englob

Ensuite j'ai installé votre JS dans "toutes les pages" et...

EDIT :
Cela ne marche pas. Cela annule même le bouton "Profil" et le hover d'animation qu'il y avait à la base de l'avatar.
La boite de réponse rapide ne marche plus non plus (basée sur un JS).

Ai-je fait quelque chose de mal ou votre code rentre en conflit ?

Voilà ce que ça donne sur un sujet : 




EDIT : j'avais oublié un autre "englob" ! Alors cela ne donne pas du tout l'image RPG au survol mais ce que vous m'avez décrit que le code ferait est exactement ce que je souhaitais. Peut être un conflit avec d'autres codes JS concernant l'hover de l'avatar ?


(je comprends à moitié tout ce que vous écrivez, j'ai des micro petites base mais ça s'arrête là. Merci à vous !)

[Toryudo]

Ben oui, je suis nouille...
Plutôt comme ça, avec les $(function()... en plus (première ligne et dernière ligne) :

Code:

$(function() {
$('.englob').hover(function(){
    $('#result').remove();
 
    var idLink = $(this).find('.imgp a').attr('href'); 
    var $result = $("<div id='result'></div>");
    $result.load(idLink + ' .boxRPG ', function (){
        $result.html($result.find('img')[0]);
        $result.css(styles);
    });
 
    var styles = {
        display: "block",
        position: "fixed",
        zIndex: "100",
        border: "2px solid #000",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
    };
    $("body").append($result);
 
}, function(){
    $('#result').remove();
});
});

[Kaehlyth]

Youhouuuuuuuuuuuuuuuuuuuuuu  


Donc si je résume bien, si je souhaite personnaliser moi même le CSS, je dois faire comme cela : la première ligne et la dernière

Code:


$(function() {
$('.englob').hover(function(){
    $('#result').remove();
 
    var idLink = $(this).find('.imgp a').attr('href'); 
    var $result = $("<div id='result'></div>");
    $result.load(idLink + ' .boxRPG ', function (){
        $result.html($result.find('img')[0]);
    });
    $("body").append($result);
 
}, function(){
    $('#result').remove();
});
});

Je prend votre css de base, et je peux le modifier pour donner l'effet souhaité ?

[Toryudo]

C'est exactement ça !
En fonction, si vous avez des problèmes pour placer le cadre, on pourra retoucher un peu le script pour vous aider, mais sinon, oui, vous pouvez tout faire par CSS !

[Kaehlyth]

Qu'entendez vous par "avoir du mal à recadrer le cadre" ?
Vous parlez de la position "hover" du cadre "noir" qui contient l'image de la box RPG, c'est bien ça ?

Non, ça va aller ! Je sais que le % permet de centrer sur l'écran et si l'on veut le bouger correctement on y va avec margin !
Comme l'exemple de mes oiseaux sur l'index : bottom : 30px;right:50%;margin-right: 460px;

Par contre, j'ai juste une question, d'habitude je met un effet de "transition" sur tout ce que je fais en "hover". Généralement le même qui peut être modifié sur la durée, ect. J'ai cette ligne :

Code:

 transition: opacity 1s;-moz-transition: opacity 1s;-o-transition: opacity 1s;-webkit-transition: opacity 1s;-htm-transition: opacity 1s;

+

Une ligne de transform qui va avec bien sûr !


Est-ce qu'on peut faire un effet comme si l'image du cadre sortait de l'avatar pour s'afficher ensuite au milieu de l'écran, ou pas du tout ?

Vous êtes un géni en tout cas, merci merci !
Je trouve que c'est un gros plus dans mon forum RPG !

[Toryudo]

On va pouvoir faire ça avec une animation je pense.
Si vous remplacez le CSS que j'avais fourni par celui-ci :

Code:

#result img {
   display: block;
   position: fixed;
   z-index: 100;
   border: 2px solid #000;
   top: 50%;
   transform: translate(-50%, -50%);
   animation: opening 1s ease forwards;
}

@keyframes opening { from { left: 46%; opacity: 0; max-height: 0%;} to { left: 50%; opacity: 1; max-height: 100%; }}

(attention, le premier a changé aussi, bien tout copier pour être sûr)
Ça fait une animation sur 3 choses :
- le left qui passe de 46% à 50% pour l'effet gauche vers la droite
- le opacity de 0 à 1 pour l'affichage en fondu
- le max-height de 0% à 100% pour le côté agrandissement

Il doit y avoir moyen de retoucher au besoin ! Dans l'animation, from correspond à l'état de base et to correspond à l'état final. Vous avez de quoi jouer si vous souhaitez l'améliorer !

[Kaehlyth]

Ah c'est la Key frames qui fait que l'animation s'appelle en JS ?
J'avais fait avec mon transform et l'animation (que j'ai honteusement piqué à mon hover avatar) et ça ne faisait rien.

Merci pour l'explication, c'est la première fois que je vois "from" et "to" qui aident beaucoup à comprendre même sans avoir des bases, sauf en anglais. Je suis très très heureuse et contente ! Reste plus qu'à lire des tutoriels pour changer la forme de l'animation sans tout casser.

Merci merci et merci !

[Toryudo]

En fait, l'animation se lance dès la création du div : le script a créé le div, mais il n'y est pour rien concernant son animation !
Dans la propriété CSS animation, on peut programmer beaucoup de choses :
- la durée de l'animation (ici, 1s)
- le timing de l'animation (ici, ease)
- le delay avant début de l'animation (non précisé dans mon cas, donc pas de delay, elle se lance tout de suite)
- le nombre d'itérations (combien de fois on répète l'animation, non précisé donc une seule fois)
- la direction (du from au to, ou du to au from... on peut choisir, sachant qu'on peut décomposer en plus d'étapes)
- ce qu'on fait à la fin de l'animation (retour au début, on reste à la fin... ici forwards pour dire qu'on reste à la fin)

Je dois en oublier, mais il y a plein d'exemples ici : https://www.w3schools.com/css/css3_animations.asp

[Kaehlyth]

Parfait pour la réponse, je testerai ça demain !

Je résouds.
Merci ! J'espère ce sera une option future de FA !

EDIT :

Tiens, quand une personnage n'a pas encore d'image en grand, le code récupère l'icône d'un champ et le rajoute . C'est rigolo !