Blogger news

Jquery Plurk Emoticons Plugin


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:
emoticons.7z
Ps: You have to install 7Zip first to unpack the file.
Link: The Inspiration | Jquery Website | 7-Zip website |


0 Responses So Far: