小君的友情世界

感覺好像沒啥新花樣

整天只會玩表情符號耶...哈~

這次要分享的表情符號是竄改痞哥的正版表情符號APP

且將它稱為山寨版表情符號,目的是為了解決以前用電影截圖當表情符號會有些麻煩

1.需要手動將 _t 刪除.有時會忘記

2.挑選時圖片太小張,看不到截圖裡的文字是什麼

所以才有這山寨版的出現

但偶沒有將他寫到應用市集的APP讓大家安裝,因為app審核的流程有點...不知該如何說~

所以有興趣的格友們...只要新增一個側邊欄位,將程式放進去即可

請到 http://panel.pixnet.cc/blog/sidecolumn 點選右上角 [新增版位]

複製下面區塊內的程式碼

<script type="text/javascript"> (function($,undefined){'use strict';$.extend({pixAddonCommentEmotion:function(options){$(function(){if(!$('#unfold-comment-extra'))return false;$('<div id="comment-emotion"><img src="https://s6.pimg.tw/avatar/myflytwo/0/0/zoomcrop/15x15.png" height="11" width="11" style="width: 11px; height: 11px;">山寨版表情符號</div>').insertAfter('#unfold-comment-extra');var settings=$.extend({},options||{}),cursor,str={loadmore:'載入更多',insertIcon:'插入表情符號'},apihost='http://emma.pixnet.cc',ajaxData={user:pix.owner.toLowerCase(),set_id:settings.set_id,trim_user:1,with_detail:1,page:1},jq_commentEmotion=$('#comment-emotion'),_commentTextArea=document.getElementById('comment_text'),jq_commentTextArea=$(_commentTextArea),jq_frameContent=$('#frame-content'),jq_popupFrame=$('#popup-frame'),jq_commentText=$('#comment-text'),jq_commentPostText=jq_commentText.find('li.post-text'),jq_commentReplyText=jq_commentText.find('li.reply-text'),inlineStyle='<style id="pixAddonCommentEmotion_style">.pixAddonCommentEmotion li{display: inline-block;margin: 3px; } .pixAddonCommentEmotion img {width: 50px; height: 50px; } .pixAddonCommentEmotion + button {width: 80px; margin: 10px auto; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #ccc; text-align: center; background-color: #eee; }</style>',text2icon=function(text){return text.replace(/\[:emotion([^\]]+)\]/g,'<img src="https://pic.pimg.tw/'+ajaxData.user+'/$1">');};jq_frameContent.css({'max-height':$(window).height()*0.7,'overflow':'auto'});jq_commentEmotion.on('click',function(){ajaxData.page=1;var icons={},reg=new RegExp(pix.owner+'/(.+)?','i'),jq_targetUl=jq_frameContent.html(inlineStyle+'<ul class="pixAddonCommentEmotion"></ul>').find('ul').eq(0),jq_loadmore=jq_frameContent.append('<button data-page="1" disabled class="" style="display: none;">'+str.loadmore+'</button>').find('button').eq(0),mayloadMore=function(){if(icons.now_page<icons.total_page){jq_loadmore.prop('disabled',false).data('page',icons.now_page+1).one('click.loadmore',function(){ajaxData.page+=1;$.getJSON(apihost+'/album/elements?callback=?',ajaxData,gotNewIcon);}).show();}else{jq_loadmore.hide();}},addIcons=function(iconsSrc){var i=0,iconHtml='';for(;i<iconsSrc.length;i++){iconHtml+='<li><img src="'+iconsSrc[i].thumb+'" class="comment-emotion-item" data-identifier="'+iconsSrc[i].original.match(reg)[1]+'"> '+iconsSrc[i].title+'</li>';} jq_targetUl.append(iconHtml);},gotNewIcon=function(data){icons.total=data.total;icons.per_page=data.per_page;icons.now_page=data.page;icons.total_page=Math.ceil(icons.total/icons.per_page);addIcons(data.elements);mayloadMore();jq_popupFrame.find('h3').text(str.insertIcon).end().show();};$.getJSON(apihost+'/album/elements?callback=?',ajaxData,gotNewIcon);});jq_commentPostText.add(jq_commentReplyText).each(function(){var $text=$(this);$text.html(text2icon($text.html()));});$.getScript('http://libs.pixfs.net/jquery-plugins/fieldselection/0.2.3/jquery-fieldselection.js',function(){jq_commentEmotion.on('click.cursor',function(){cursor=jq_commentTextArea.getSelection();});jq_frameContent.on('click','img.comment-emotion-item',function(){jq_popupFrame.hide();var ta=_commentTextArea,mark='[:emotion'+$(this).data('identifier')+']';ta.value=ta.value.substr(0,cursor.start)+mark+ta.value.substr(cursor.end);cursor.start=cursor.start+mark.length;cursor.end=cursor.start;cursor.length=0;jq_commentTextArea.focus().setSelection(cursor);});});});}});})(jQuery); jQuery.pixAddonCommentEmotion({"set_id":"8173575","addon_username":"blogbackup","addon_expired_at":0}); </script>

然後貼到側邊欄位的 [自訂區塊內容],如下圖

[自訂標題] 建議填上 <!--改良版表情符號--> ,這是註解的寫法,網頁上是看不到這串文字的

程式內容必須改的部分是倒數第二行,如下紅字...(或是參考上圖紅色框的地方)

jQuery.pixAddonCommentEmotion({"set_id":"11799930","addon_username":"blogbackup","addon_expired_at":0});

上面紅色字是需要修改的,第一個數字是相簿的ID,這程式一樣要指定一本自己的相簿當作來源

到自己部落格點選要用的相簿,然後看網址最後面的那串數字就是相簿的ID

第二個紅色字串就是你在痞客邦的ID,大家應該知道自己的ID是什麼吧!!

修改後就按下[側邊欄位]右下角的 [送出]

然後將新增的側邊欄位從 [版位暫存區] 的最下面拖拉到你的 [側欄1] 或是 側欄2] ,並移到最下方

最後再按下右下角的[儲存版面]就完成囉

成功後會在留言處看到該功能,如下圖

**注意事項**

山寨版會跟正版衝突到

所以兩者只能擇一使用喔

請到 http://appmarket.pixnet.tw/#/my-addons

將不用的app[停用]或是[解除安裝]

------------------------------------------------------------------------------------------

使用上變更的部分有..

1.不用再自己將 -t 刪除,所有插入的表情符號會以原始大小呈現,所以不會再有 _t 出現

2.滑鼠移到表情符號上面停一下,會出現標題說明,可以知道截圖裡的文字內容

所以上傳電影截圖(或任何圖..)前,記得設定好每張圖片的標題唷~參考下圖

以上~有任何問題請再留言讓我知道吧!

表情符號, 截圖, 電影