Monday 14 January 2013

Facebook Style Emotions with Jquery

The Jquery emotions plugin helps you to convert text symbols to emotion images like in social chat editors similar to facebook. Who doesn't want smileys as they type their emotions out? 
Facebook style emotions plugin with jquery
You can try our DEMO and also Download the script. Read more:

                   DOWNLOAD SCRIPT      DEMO
The Basic Setup
Include the jQuery and emotions plugin libraries into your document using script tag. 
<script src="js/jquery.js"></script>
<script  src="js/jquery.emotions.js"> </script>

These are the text codes for emotions names references. 
NameIconCodeNameIconCode
Angel o:) Colonthree :3 
Confused o.O Cry :'( 
Devil 3:) Frown :( 
Gasp :O Glasses 8) 
Grin :D Grumpy >:( 
Heart <3 Kiki ^_^ 
Kiss :* PacMan :v 
Smile :) Squint -_- 
Sun Glasses 8| Toungue :p 
Unsure :/ Upset >:O 
Wink ;) 

Calling Plugin
$(document).ready(function()
{
$(“selector”).emotions();
});

Plugin Code
This code helps to replace text code to emotion icons using array mapping.
$.fn.emotions.defaults = {
a : "emotions-fb/", // Emotions folder
b : newArray("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"), // Emotions Type
s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"),
c : "gif// Emotions Image format
};

Example Usage
Included jQuery plugin in head tag and ajax code included in this jquery function $("#showText").emotions()- showText is the ID name of div tag. Emotions plugin helps to converts <3 to emotion icon. 
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.emotions.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showText").emotions();
});
</script>
</head>
<body>
<div id='showText'>
I Love You <3
</div>
</body>
</html>

Plugin Variable Info
// Notes
// a - icon folder
// b - emotions name array
// c - image format

1 comment:

  1. :p :p :p :p first :p was changed unfortunately next :p wasn't changed fix it pls

    ReplyDelete