[PHPBB3] Bouton à Smileys

Hello Ludovic,

alors ce script devrait fonctionner:
Remplaces l'actuel par celui-ci:

Code:

$(function(){$(function(){
//L IMAGE DU BOUTON SUR L EDITEUR
var M14_img="https://2img.net/i/fa//i/smiles/icon_biggrin.png";
//TEXTE DE L INFOBULLE
var M14_title="Smileys 2";
$('<a class="sceditor-button M14_SmilieS" unselectable="on"><div  unselectable="on"class="M14_smileys"style="background-image:url('+M14_img+')"title="'+M14_title+'">'+M14_title+'</div></a>
<div id="M14_smileys"class="sceditor-dropdown"style="display:none;">

  <span class="Nourriture"style="float:left;">Nourriture</span>
  <span class="Drapeaux">Drapeaux</span>
  <span class="Humeur"style="float:right;">Humeur</span>
 
<div id="nourriture"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div> 
  <div id="drapeaux"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>
<div id="humeur"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>
</div>').insertBefore('a.sceditor-button-bold');
$('.M14_smileys').click(function(){$('#M14_smileys').slideToggle();});
 
  $('.Nourriture').click(function(){
  $('#drapeaux,#humeur').hide();
  $('#nourriture').show();
});
    $('.Drapeaux').click(function(){
  $('#nourriture,#humeur').hide();
  $('#drapeaux').show();
});
  $('.Humeur').click(function(){
  $('#nourriture,#drapeaux').hide();
  $('#humeur').show();
});
$('.M14_editorImg').each(function(){$(this).click(function(){var smilYes=$(this).attr('src');
$('#text_editor_textarea').sceditor("instance").insert('[img]'+smilYes+'[/img]\n');
});});})});

Puis le style a remplacer:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*CURSEUR SUR LE BOUTON*/
a.sceditor-button.M14_SmilieS{cursor:pointer;}
/*LE CONTENEUR DES SMILEYS*/
#M14_smileys.sceditor-dropdown
{
margin-top:30px;
width: 250px;
height:100px;
overflow-y: auto;
border:2px solid black;
}
/*CHAQUE IMAGE DANS LE CONTENEUR*/
img.M14_editorImg
{
max-width:16px;
max-height:16px;
float: left;
margin: 2px;
}
a.sceditor-button.M14_SmilieS.disabled div{opacity:1!important;}


Penser a cliquer sur le bouton

Je t'explique le fonctionnement du script:

Ce qui fera les boutons des thèmes :

Code:

 
<span class="Nourriture"style="float:left;">Nourriture</span>
  <span class="Drapeaux">Drapeaux</span>
  <span class="Humeur"style="float:right;">Humeur</span>


Afin de mieux te repérer j'ai attribué une class en relation avec chaque thème

Puis chaque div en relation avec le script qui va afficher les smileys
en relation avec celui-ci ayant un identifiant identique:

Pour celui de la nourriture celui qui restera affiché :

Code:


<div id="nourriture"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>


Celui des drapeaux qui sera masqué (display:none):

Code:

  <div id="drapeaux"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>

Celui de l'humeur qui sera masqué (display:none):

Code:

<div id="humeur"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>

Bon, j'ai juste fait un copier coller des smileys dans tous les blocs,
à toi de travailler .

Ensuite les scripts qui vont déclencher l'ouverture et fermeture :

Code:

 $('.Nourriture').click(function(){
  $('#drapeaux,#humeur').hide();
  $('#nourriture').show();
});
    $('.Drapeaux').click(function(){
  $('#nourriture,#humeur').hide();
  $('#drapeaux').show();
});
  $('.Humeur').click(function(){
  $('#nourriture,#drapeaux').hide();
  $('#humeur').show();
});

Bon courage mon ami et à ce soir ou demain matin.

merci beaucoup, cela fonctionne.
J'ai pas eu le temps de relire mon message qu'une proposition était déjà faite.



Après une courte adaptation, maintenant c'est à moi de jouer, et trier plusieurs dizaines de smileys en un minimum de catégorie lol

mille merci

De rien Ludovic,
bon courage pour les ajouts.