JS - Smilebox de WYSIBB

Image
Hello ! Aujourd'hui je vais vous montrer comment utiliser la smilebox de Wysibb, comme celle-ci:
Image Image
Étape n°1 Le bouton:
Alors d'abord on va aller dans le fichier jquery.wysibb.fr.js que vous avez sans doute insérer pour avoir les boutons en français. Vers la ligne 307 (normalement) vous allez avoir smilebox.
Copiez, puis collez a la ligne 307 ceci:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.

Normalement, dans votre éditeur, le bouton devrait apparaître, mais vous ne pouvez pas cliquer dessus.
Étape n°2 Liste de smileys:
Maintenant, il vous faut aller a la ligne 439 de votre fichier jquery.wysibb.fr.js.
Vous aurez smilelist qui sera masqué par des //. Vous l'aurez compris, démasquez le. Normalement, sur votre éditeur vous pourrez désormais faire apparaître la liste d'emojis, mais vous aurez ceci a la place:
Image
Étape n°3 Affichage:
Pour afficher vos smileys, rien de plus simple, il vous suffit d'adapter ce code:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.

Je vous laisse adapter le src, ne pas toucher a class, adapter le bbcode, et le title.
Pour ceux qui ne comprennent pas le code (j'en doute mais on ne sait jamais):
- src = Chemin du smiley
- class = class CSS définie dans le fichier wysibb.css  /!\ Attention ne pas toucher /!\
- bbcode = correspond au signes devant être remplacés (ex:  sans espace = :' (  ------> :'()
- title = petit texte/mot qui apparaît au survol du smiley dans la box

- titleV2 = vous pouvez mettre: "title:CURLANG.sm1," qui est le titre du smiley 1 défini en haut du fichier:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.

Voilà ! Des questions ? Image postez un commentaire !
Beignet
Avatar

N'accuse pas le puit d'être trop profond, c'est ta corde qui est trop courte.

1 Commentaire

  1. fleuve2002 Il y a environ 13 mois

    Bonjour, je vous félicite et remercier pour ce tuto , ça ma aidé vraiment .

    une question qui a une (petite) relation avec le sujet :
    EN utilisant l'editeur WYSIBB , es-qu’il y a une solution pour redimensionner l'image on mobile device ?
    sur PC ça fonctionne très bien mais sur mobile non . Merci d'avance :-)

    • Ayseen
      Ayseen Il y a environ 10 mois

      Tu as essayé dans le css de faire avec des pourcentage Au lieu de mettre : width: 50px; De mettre plutôt : width: 50%; L'affichage s'adaptera en fonction de la taille de l'écran et donc de l'appareil

Vous devez être connecté pour écrire un commentaire. Se connecter
Top