隱藏式 / 表情貼圖

使用表情符號貼圖 APP、的另一種選擇

最近改寫了、花卉 & 美食的表情符號貼圖方式，請進來觀看 ~ 免費

酷寒的冬天、灰鴿上菜 ~ 隱藏式 / 表情貼圖

使用表情符號貼圖 APP、的另一種選擇

最近改寫了、花卉 & 美食的表情符號貼圖方式，請到樓下觀看 ~

範例如下圖

假如、覺得好用，就夾肥去配 ...

安裝步驟如下 :

Step -1、

建議安裝、痞客的留言插入表情符號APP，倘若你已安裝、當然就不用再裝，你可以停用或一起使用

理由 ~ 醬才會在你的管理後台、顯示表情符號貼圖

Step -2、

新增建2本相簿、本軟體將會使用到2本相簿，每本相簿最多取用100張 (想要貪婪、使用更多就自己修改吧)

( 你也可以和痞客的留言插入表情符號，共同使用同一本相簿 )

點選要使用的相簿，然後看網址最後面的那串數字就是相簿的ID

Step -3、

新增一個側邊欄位 :

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

[自訂標題] 建議填上  、這是註解的寫法、網頁上是不會看到你愛我這串文字的

程式內容: 須要修改的部分是，如下紅字

<script type="text/javascript">

var Usid = "e717"; 部落格的帳號 id
var Stid = ["5931114","13874467"]; 2本相簿的 ID

這個程式、只需要修改到上面 2個紅色字的地方、這程式一樣要指定一本自己的相簿當作來源

複製下面區塊內的程式碼、貼到側邊欄位的 [自訂區塊內容] ~ 最後記得要按下右下角的[儲存版面]

隱藏式 / 表情貼圖

<div id="panel">
<div class="slider">
<div id="itemA"></div>
<div id="MenuA" class="Menu">花卉 ☆ Flower</div>
</div>
<div class="slider">
<div id="itemB"></div>
<div id="MenuB" class="Menu"><button style="float: left;">隱藏</button>美食 ☆ Food</div>
</div>
</div>


<style type="text/css"></style>


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[

var Usid ="e717";
var Stid =["5931114","13874467"];
var reg=new RegExp('https?://pic.pimg.tw/'+Usid+'/(.+)?','i');

if(document.getElementById('article-main')){
var $ = jQuery.noConflict(true);

$(function(){

$('#comment-text').find('li.reply-text,li.post-text').html(function(ix, text)
{ return text.replace(/\[:emotion([^\]]+)\]/g,'<img align="absbottom" src="http://pic.pimg.tw/'+Usid+'/$1" />'); });

$("#panel").on('click',"img.emo-item",function(){ Paste($(this),'[:emotion',']',reg);});

var Paste = function(ts,start,end,Rx){
var MyStr = start + ts.attr('src').match(Rx)[1]+end;
    MyComm = document.getElementById('comment_text');

if(MyComm.selectionStart || MyComm.selectionStart == '0'){
    var startPos = MyComm.selectionStart;
    var endPos = MyComm.selectionEnd;
        MyComm.value = MyComm.value.substring(0, startPos) + MyStr +
        MyComm.value.substring(endPos);
    }
        else{ MyComm.value += MyStr; }
startPos+= MyStr.length;
MyComm.setSelectionRange(startPos,startPos);
MyComm.focus();};

}); //---**

$( window ).load( function () {

$('#unfold-comment-extra').after
('<div style=" width: 160px; margin:-5px 30px;"><div id="emotion-icon" style="margin-left:50px; cursor: pointer; float:left;"><b style="color:#ff00f0;">灰鴿 </b> ♥ 表情符號</div></div>');

//---
$("#emotion-icon").click(function(){$("#panel").fadeToggle(1200)});
$("#panel button").click(function(){$("#panel").fadeToggle(1200)});

$("#emotion-icon").one('click',function(){

$.each( ['#itemA','#itemB','#itemC'], function( inx, itm) {

$.getJSON('http://emma.pixnet.cc/album/elements?callback=?',{user:Usid,set_id:Stid[inx],trim_user:1,with_detail:1,page:1})
.done(function( data) {$.each( data.elements, function( i, item) {

$(itm).append( '<img src="http://pic.pimg.tw/'+Usid+'/'+ item.original.match(reg)[1]+'" class="emo-item" />');
});

$(itm).append( '<span>隱藏式 / 表情貼圖 Ver : 1.0</span> ');
});

}); }); });

}
// ]]></script>

※ 此APP軟體、由本人無料授權，可以任意複製、轉貼、修改、分享。

自訂標題

隱藏式 / 表情貼圖

自訂區塊內容

使用3本相簿的版本

<style type="text/css"></style>


<div id="panel">
<div class="slider">
<div id="itemA"></div>
<div id="MenuA" class="Menu">花卉 ☆ Flower</div>
</div>
<div class="slider">
<div id="itemB"></div>
<div id="MenuB" class="Menu">美食 ☆ Food</div>
</div>
<div class="slider">
<div id="itemC"></div>
<div id="MenuC" class="Menu"> ☆ Top 100<button style="float: right;">隱藏</button></div>
</div>
</div>


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[

var Usid ="e717";
var Stid =["5931114","13874467","15175972"];
var reg=new RegExp('https?://pic.pimg.tw/'+Usid+'/(.+)?','i');

if(document.getElementById('article-main')){
var $ = jQuery.noConflict(true);

$(function(){

$('#comment-text').find('li.reply-text,li.post-text').html(function(ix, text)
{ return text.replace(/\[:emotion([^\]]+)\]/g,'<img align="absbottom" src="http://pic.pimg.tw/'+Usid+'/$1" />'); });

$("#panel").on('click',"img.emo-item",function(){ Paste($(this),'[:emotion',']',reg);});

var Paste = function(ts,start,end,Rx){
var MyStr = start + ts.attr('src').match(Rx)[1]+end;
    MyComm = document.getElementById('comment_text');

if(MyComm.selectionStart || MyComm.selectionStart == '0'){
    var startPos = MyComm.selectionStart;
    var endPos = MyComm.selectionEnd;
        MyComm.value = MyComm.value.substring(0, startPos) + MyStr +
        MyComm.value.substring(endPos);
    }
        else{ MyComm.value += MyStr; }
startPos+= MyStr.length;
MyComm.setSelectionRange(startPos,startPos);
MyComm.focus();};

}); //---**

$( window ).load( function () {

$('#unfold-comment-extra').after
('<div style=" width: 160px; margin:-5px 30px;"><div id="emotion-icon" style="margin-left:50px; cursor: pointer; float:left;"><b style="color:#ff00f0;">灰鴿 </b> ♥ 表情符號</div></div>');

//---
$("#emotion-icon").click(function(){$("#panel").fadeToggle(1200)});
$("#panel button").click(function(){$("#panel").fadeToggle(1200)});

$("#emotion-icon").one('click',function(){

$.each( ['#itemA','#itemB','#itemC'], function( inx, itm) {

$.getJSON('http://emma.pixnet.cc/album/elements?callback=?',{user:Usid,set_id:Stid[inx],trim_user:1,with_detail:1,page:1})
.done(function( data) {$.each( data.elements, function( i, item) {

$(itm).append( '<img src="http://pic.pimg.tw/'+Usid+'/'+ item.original.match(reg)[1]+'" class="emo-item" />');
});

$(itm).append( '<span>隱藏式 / 表情貼圖 Ver : 1.0</span> ');
});

}); }); });

}
// ]]></script>

延伸閱讀 : 插入表情符號APP ~ 懶人包 Ver : 1.2

灰鴿

❤️灰鴿❤️

灰鴿發表在痞客邦留言(0) 人氣(0)

❤️灰鴿❤️

灰鴿 ~