Animated Emoji Picker Plugin With jQuery - mb.emoticons

Animated Emoji Picker Plugin With jQuery - mb.emoticons

The mb.emoticons jQuery plugin appends an emoji picker to the textarea element that allows to convert Emoji keywords to animated GIFs.

1. Download and insert the JavaScript file jquery.mb.emoticons.js after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="inc/jquery.mb.emoticons.js"></script>

2. Initialize the emoji picker on the target textarea and done.

<textarea id="ta" class="ta"></textarea>
$(function(){
  $("#ta").mbSmilesBox();
})

3. To render the emoji strings as animated GIFs.

<div id="render" style="display:none"></div>
$('#render').html($('#ta').val()).emoticonize(true).show()

4. Options and defaults.

$("#ta").mbSmilesBox({
  smilesPath:"",
  smiles: {
    "(angel)":      "angel",
    " :@":          "angry",
    "(bandit)":     "bandit",
    "(bear)":       "bear",
    "(beer)":       "beer",
    " :D":          "bigsmile",
    "(bow)":        "bow",
    "(u)":          "brokenheart",
    "(bug)":        "bug",
    "(^)":          "cake",
    "(call)":       "call",
    "(cash)":       "cash",
    "(clap)":       "clapping",
    "(coffee)":     "coffee",
    " 8-)":         "cool",
    " ;(":          "crying",
    "(dance)":      "dance",
    "(devil)":      "devil",
    "(doh)":        "doh",
    "(drink)":      "drink",
    "(drunk)":      "drunk",
    "(dull)":       "dull",
    "(blush)":      "eblush",
    "(emo)":        "emo",
    "(envy)":       "envy",
    " ]:)":         "evilgrin",
    "(F)":          "flower",
    "(fubar)":      "fubar",
    "(giggle)":     "giggle",
    "(handshake)":  "handshake",
    "(happy)":      "happy",
    "(headbang)":   "headbang",
    "(heart)":      "heart",
    "(heidy)":      "heidy",
    "(hi)":         "hi",
    "(inlove)":     "inlove",
    "(wasntme)":    "itwasntme",
    "(kiss)":       "kiss",
    " :x":          "lipssealed",
    "(mail)":       "mail",
    "(makeup)":     "makeup",
    "(finger)":     "middlefinger",
    "(mmm)":        "mmm",
    "(mooning)":    "mooning",
    "(~)":          "movie",
    "(muscle)":     "muscle",
    "(music)":      "music",
    "(myspace)":    "myspace",
    " 8-|":         "nerd",
    "(ninja)":      "ninja",
    "(no)":         "no",
    "(nod)":        "nod",
    "(party)":      "party",
    "(phone)":      "phone",
    "(pizza)":      "pizza",
    "(poolparty)":  "poolparty",
    "(puke)":       "puke",
    "(punch)":      "punch",
    "(rain)":       "rain",
    "(rock)":       "rock",
    "(rofl)":       "rofl",
    " :(":          "sadsmile",
    "(shake)":      "shake",
    "(skype)":      "skype",
    " |-)":         "sleepy",
    "(smile)":      "smile",
    "(smirk)":      "smirk",
    "(smoke)":      "smoke",
    " :|":          "speechless",
    "(*)":          "star",
    "(sun)":        "sun",
    " :O":          "surprised",
    "(swear)":      "swear",
    "(sweat)":   "sweating",
    "(talk)":       "talking",
    "(think)":      "thinking",
    "(o)":          "time",
    "(tmi)":        "tmi",
    "(toivo)":      "toivo",
    " :P":          "tongueout",
    "(wait)":       "wait",
    "(whew)":       "whew",
    "(wink)":       "wink",
    " :^)":         "wondering",
    " :S":          "worried",
    "(yawn)":       "yawn",
    "(yes)":        "yes"
  },
  smilesVariations: {
    ":-)": "smile",
    ":)": "smile"
  },
  smileBoxBtn:"#smileBoxBtn",
});

This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 27.11.2017
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 244 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 244 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/YtcQb9c31HzUGPBR4EaF3NiWFFnpWkcpNbR0D4fR', 'contents' => 'a:3:{s:6:"_token";s:40:"b3u8AfihU3hknEEOw7LrktU2wK0RcmlnIDc5gCYN";s:9:"_previous";a:1:{s:3:"url";s:86:"http://ivanovdmitry.com/blog/post/animated-emoji-picker-plugin-with-jquery-mbemoticons";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/YtcQb9c31HzUGPBR4EaF3NiWFFnpWkcpNbR0D4fR', 'a:3:{s:6:"_token";s:40:"b3u8AfihU3hknEEOw7LrktU2wK0RcmlnIDc5gCYN";s:9:"_previous";a:1:{s:3:"url";s:86:"http://ivanovdmitry.com/blog/post/animated-emoji-picker-plugin-with-jquery-mbemoticons";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/YtcQb9c31HzUGPBR4EaF3NiWFFnpWkcpNbR0D4fR', 'a:3:{s:6:"_token";s:40:"b3u8AfihU3hknEEOw7LrktU2wK0RcmlnIDc5gCYN";s:9:"_previous";a:1:{s:3:"url";s:86:"http://ivanovdmitry.com/blog/post/animated-emoji-picker-plugin-with-jquery-mbemoticons";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('YtcQb9c31HzUGPBR4EaF3NiWFFnpWkcpNbR0D4fR', 'a:3:{s:6:"_token";s:40:"b3u8AfihU3hknEEOw7LrktU2wK0RcmlnIDc5gCYN";s:9:"_previous";a:1:{s:3:"url";s:86:"http://ivanovdmitry.com/blog/post/animated-emoji-picker-plugin-with-jquery-mbemoticons";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)