Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Add Remote Clickable Emoticons
Topic Started: Aug 2 2013, 06:11 PM (2,728 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Add Remote Clickable Emoticons

What the code does: Instead of adding an emoticon via the Admin CP, this code allows you to add an emoticon with JavaScript, which is a remote image URL that does not have an upload limit.

How to use the code: Modify the capitalized text in the addEmot lines and you can repeat the addEmot line as many times as you like to add more emoticons.

How to install the code:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
function addEmot(shortcut, iURL) {
$('#emot_list').append('<li><img title="' + shortcut + '" alt="' + shortcut + '" src="' + iURL + '" /></li>');
var re = new RegExp(shortcut, 'ig');

$('td:contains(' + shortcut + '):not(:has(textarea)), div.search_results:contains(' + shortcut + ')').each(function () {
$(this).html($(this).html().replace(re, '<img src="' + iURL + '" alt="' + shortcut + '" />'));
});
}

addEmot('SHORTCUT', 'IMAGE_URL');
addEmot('SHORTCUT', 'IMAGE_URL');
addEmot('SHORTCUT', 'IMAGE_URL');
//]]>
</script>
Offline Profile Quote Post Goto Top
 
slothly
Member
[ * ]
Hey so I added this to my board and it works great, shows up in posts and everything. The only problem I'm having is that it's not working in the 'Clickable Emoticons' area. Clicking on it does nothing for me, it doesn't put the code in the posts.

Edit: I re-added the code again and it works now.
Edited by slothly, Dec 27 2014, 10:34 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
slothly
Dec 28 2014, 10:21 PM
I have a question, I've added a lot of GIF smilies with this code and they seem to slow down the pageload quite a bit on the new reply page with the emoticon list. Would it be possible to freeze GIF animation by incorporating this service into your code? http://embed.ly/docs/tutorials/gif
Glad you got the code in the OP to work for you. Please use this topic only for support regarding the code in the OP.
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Two questions:

1>
Is it possible to have the
Code:
 
addEmot('SHORTCUT', 'IMAGE_URL');
addEmot('SHORTCUT', 'IMAGE_URL');
addEmot('SHORTCUT', 'IMAGE_URL');
as a called file of some kind so it can easily be added to if stored elsewhere, so it doesn't get renamed every time an Admin wants to add or remove an emoticon?

I host the codes I use on ZetabBoards' servers, and editing them to add an emoticon every time someone wants one could be a hassle. It would be much simpler if it called a file list instead.

(if that's not "doable", I understand though)

2>
I'm using the "Clickable Emoticons in Fast Reply" code, but the emoticons in THIS code don't show up there, they only appear (as insertable) in the "Full Reply Screen"/"Advanced Editor". Is there a way to add them to the "Clickable Emoticons in Fast Reply" pop-open window that pops open when the "Smilies" button below the Fast Reply box gets clicked?
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Bump
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Bump
Offline Profile Quote Post Goto Top
 
Syndication
Member
[ *  * ]
I'm looking into bringing expanded emojis (up to 200) to my board and this would make it much easier.

I was wondering when using this code if there was a way to have it where they could be categorized or searchable and maybe located elsewhere when posting? I would like to keep the existing emoticon box for gif ones.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Do you want it where the emoticon shortcut must be copy and pasted for use?
Offline Profile Quote Post Goto Top
 
Syndication
Member
[ *  * ]
That would be okay. Whatever is the easiest way to implement.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You could create a table on a web page on your forum to display the emoticons in the same style as the emoticons in the 'Clickable Emoticons' box when you click Show All.
Code: HTML
 
<table id="extra_emots">
<thead>
<tr>
<th colspan="2">Extra Emoticons</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="EMOTICON_URL" alt="EMOTICON_SHORTCUT" title="EMOTICON_SHORTCUT" /></td>
<td>EMOTICON_SHORTCUT</td>
</tr>
<tr>
<td><img src="EMOTICON_URL" alt="EMOTICON_SHORTCUT" title="EMOTICON_SHORTCUT" /></td>
<td>EMOTICON_SHORTCUT</td>
</tr>
<tr>
<td><img src="EMOTICON_URL" alt="EMOTICON_SHORTCUT" title="EMOTICON_SHORTCUT" /></td>
<td>EMOTICON_SHORTCUT</td>
</tr>
</tbody>
</table>

<style type="text/css">
#extra_emots td {
text-align: center;
}
</style>
Code:
 
$('#emot_list').append('<li><img title="' + shortcut + '" alt="' + shortcut + '" src="' + iURL + '" /></li>');
Remove that line from my code if you don't want them added to the emoticons list.
Offline Profile Quote Post Goto Top
 
Syndication
Member
[ *  * ]
Awesome. Thanks. Another question... is it possible to compress the code to save space in the template?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Are you referring to the code in the OP or the code in my previous post?
Offline Profile Quote Post Goto Top
 
Syndication
Member
[ *  * ]
The code in your previous post. I would use it without them added to the emoticons list.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
That coding doesn't go in the Board Template, it goes on a webpage.
Offline Profile Quote Post Goto Top
 
Syndication
Member
[ *  * ]
x.x I meant the code that went into the board template. Not the webpage code. Sorry about the confusion. I realized what I wanted to accomplish will take up a huge chunk of the template character limit. So I was wondering if I could have a like master file that I can edit and only use a single line in the template.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply