I've been wanting to create this plugin for almost a year. Since I
don't have the ability to create modx plugin (as my blog using
modx
for it's cms engine), I proceed to the next best thing that is by
replacing the emoticons symbol inside html with the correct image using
javascript. Using simple jquery syntax and the power of regex and a
little bit of help from this wordpress plugin, I'm able to finish this plugin in just 3 days using my spare time at the office before maghrib came.
The idea behind this plugin is simple, in the html text of selected
jquery selector, if the plugin found emoticons symbol in it, the plugin
will replace it with the correct image tag. And here's the catch,
Because I fancy Plurk emoticons, so.... this plugin is using emoticons
symbol from plurk *PLUS* emoticon symbol that I create myself, such us:
(mario), (luigi), (yoshi), etc.
Here's how you use it in your code:
-
include the required .js files in the head of your html file, like so:
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/emoticons/emoticons.js"></script>
-
Then create something like this in your html file:
<script type="text/javascript">
$(function() {
$("#commentsAnchor").emoticons ({
url:"http://dwaan.com/assets/js/emoticons/emo/"
});
});
</script>
Replace the url, with the url where you store the emoticon files
collection and the jquery selector with your own jquery selector, and
wallah. If you still don't understand how to use it just view source
this page, I'm using this plugin for the comment section.
Download the file here:
Ps: You have to install
7Zip first to unpack the file.
Link:
The Inspiration |
Jquery Website |
7-Zip website |
)
