Permalink
Browse files

Site updated at 2013-05-16 10:08:07 UTC

  • Loading branch information...
1 parent 84d86c6 commit 5781b6c6d5c6b3868a941bbaabe91bf50e7ce789 unknown committed May 16, 2013
View
@@ -4,7 +4,7 @@
<title><![CDATA[apa]]></title>
<link href="http://blog.rx836.tw/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -20,16 +20,16 @@
<id>http://blog.rx836.tw/blog/jquery-plugin-for-pinterest</id>
<content type="html"><![CDATA[<p><img src="https://si0.twimg.com/profile_images/2725838700/32f4e2dce13c0b983003eaa10efea6a5.png" /></p>
-<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <strong>pinterest</strong> 來做為分享圖片的對象,在此特別紀錄下來</p>
+<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <a href="http://pinterest.com/" target="_blank">Pinterest</a> 來做為分享圖片的對象,在此特別紀錄</p>
<!--more-->
-<p>但為了以後的套用方便,我們可以將這部份的需求寫成一個plugin,至於要做甚麼呢?其實很簡單,就是當滑鼠移到圖片時,右下角浮現出 pinterest 分享圖片的小icon</p>
+<p>為了以後重複使用,我們可以將這部份的需求寫成一個plugin,至於要做甚麼呢?其實很簡單,就是當滑鼠移到圖片時,右下角浮現出 Pinterest 分享圖片的小icon</p>
<p><img src="https://lh6.googleusercontent.com/-3uQelUPbt2g/UZSmojbUPxI/AAAAAAAACcA/uPWSGQBZYoQ/w170-h167-no/2013-05-16_162143.jpg" /></p>
-<p>按下以後,就會跳出 pinterest 的登入畫面(假如沒登入的話),接著就是看要將圖片 pin 到哪個Board</p>
+<p>按下以後,就會跳出 Pinterest 的登入畫面(假如沒登入的話),接著就是看要將圖片 pin 到哪個Board</p>
<p><img src="https://lh6.googleusercontent.com/-XgxZfhKtXHg/UZSmpJlu9TI/AAAAAAAACcI/hrXNi19FHlc/w856-h463-no/2013-05-16_162258.jpg" /></p>
@@ -71,11 +71,6 @@
};
})( jQuery );
-
-$(document).on('ready', function(){
- //不喜歡預設圖可以直接這樣替換
- $('img#share').pinterest({ button: 'pinterest-alt.png'});
-});
</code></pre>
<p>接著我們需要添加一些 html 元素到圖片上面,包括分享的小圖片</p>
@@ -94,13 +89,9 @@ $(document).on('ready', function(){
});
};
})( jQuery );
-
-$(document).on('ready', function(){
- $('img#share').pinterest({ button: 'pinterest-alt.png'});
-});
</code></pre>
-<p>以上程式內容主要是用一個 span 包起來,再將分享小圖片放置在圖片右下角</p>
+<p>以上的code主要是替 img 用一個 span 包起來,再將分享小圖片放置在圖片右下角</p>
<p>接著加上 on_click 和 on_hover_in 事件</p>
@@ -128,15 +119,11 @@ $(document).on('ready', function(){
};
})( jQuery );
-
-$(document).on('ready', function(){
- $('img#share').pinterest({ button: 'pinterest-small.png'});
-});
</code></pre>
<p>on_hover_in是讓滑鼠移到圖片時,可以秀出右下角的分享圖片,當然效果可以依照自己喜歡去做修改</p>
-<p>至於 on_click 部份,就是將圖片分享致 pinterest</p>
+<p>至於 on_click 部份,就是將圖片分享至 Pinterest</p>
<pre><code>function on_click () {
img = $(this).siblings('img:first');
@@ -155,15 +142,15 @@ $(document).on('ready', function(){
<p>利用 window.open 開啟一個分享視窗,pin_url 裡面的網址搭配參數,分別是</p>
-<p>url:從哪個 url 分享而來,利用 document.location 語法取得</p>
+<p>url:<strong>從哪個 url 分享而來,利用 document.location 語法取得</strong></p>
-<p>media:利用 .attr() 取得該 img 的 src</p>
+<p>media:<strong>利用 .attr() 取得該 img 的 src</strong></p>
-<p>description:利用 .attr() 取得該 img 的 title</p>
+<p>description:<strong>利用 .attr() 取得該 img 的 title</strong></p>
<p>當然,記得使用 encodeURIComponent 做編碼</p>
-<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑 http://xxx.xxx.com/</p>
+<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑,例如: http://xxx.xxx.com/abc.jpg</p>
<pre><code>function getUrl(src){
var url = document.location.toString();
@@ -187,7 +174,13 @@ $(document).on('ready', function(){
<pre><code>media = getUrl( img.attr('src') );
</code></pre>
-<p>就大功告成了</p>
+<p>就大功告成了,要使用時</p>
+
+<pre><code>$(document).on('ready', function(){
+ //不喜歡預設圖可以直接這樣替換
+ $('img#share').pinterest({ button: 'pinterest-alt.png'});
+});
+</code></pre>
<p><a href="http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/05/jquery-pinterest1.zip" target=""_blank>完整範例程式碼</a></p>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: CSS | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/css/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Facebook | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/facebook/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: HTML5 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/html5/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: JavaScript | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/javascript/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: jQ-Plugin | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/jq-plugin/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -20,16 +20,16 @@
<id>http://blog.rx836.tw/blog/jquery-plugin-for-pinterest</id>
<content type="html"><![CDATA[<p><img src="https://si0.twimg.com/profile_images/2725838700/32f4e2dce13c0b983003eaa10efea6a5.png" /></p>
-<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <strong>pinterest</strong> 來做為分享圖片的對象,在此特別紀錄下來</p>
+<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <a href="http://pinterest.com/" target="_blank">Pinterest</a> 來做為分享圖片的對象,在此特別紀錄</p>
<!--more-->
-<p>但為了以後的套用方便,我們可以將這部份的需求寫成一個plugin,至於要做甚麼呢?其實很簡單,就是當滑鼠移到圖片時,右下角浮現出 pinterest 分享圖片的小icon</p>
+<p>為了以後重複使用,我們可以將這部份的需求寫成一個plugin,至於要做甚麼呢?其實很簡單,就是當滑鼠移到圖片時,右下角浮現出 Pinterest 分享圖片的小icon</p>
<p><img src="https://lh6.googleusercontent.com/-3uQelUPbt2g/UZSmojbUPxI/AAAAAAAACcA/uPWSGQBZYoQ/w170-h167-no/2013-05-16_162143.jpg" /></p>
-<p>按下以後,就會跳出 pinterest 的登入畫面(假如沒登入的話),接著就是看要將圖片 pin 到哪個Board</p>
+<p>按下以後,就會跳出 Pinterest 的登入畫面(假如沒登入的話),接著就是看要將圖片 pin 到哪個Board</p>
<p><img src="https://lh6.googleusercontent.com/-XgxZfhKtXHg/UZSmpJlu9TI/AAAAAAAACcI/hrXNi19FHlc/w856-h463-no/2013-05-16_162258.jpg" /></p>
@@ -71,11 +71,6 @@
};
})( jQuery );
-
-$(document).on('ready', function(){
- //不喜歡預設圖可以直接這樣替換
- $('img#share').pinterest({ button: 'pinterest-alt.png'});
-});
</code></pre>
<p>接著我們需要添加一些 html 元素到圖片上面,包括分享的小圖片</p>
@@ -94,13 +89,9 @@ $(document).on('ready', function(){
});
};
})( jQuery );
-
-$(document).on('ready', function(){
- $('img#share').pinterest({ button: 'pinterest-alt.png'});
-});
</code></pre>
-<p>以上程式內容主要是用一個 span 包起來,再將分享小圖片放置在圖片右下角</p>
+<p>以上的code主要是替 img 用一個 span 包起來,再將分享小圖片放置在圖片右下角</p>
<p>接著加上 on_click 和 on_hover_in 事件</p>
@@ -128,15 +119,11 @@ $(document).on('ready', function(){
};
})( jQuery );
-
-$(document).on('ready', function(){
- $('img#share').pinterest({ button: 'pinterest-small.png'});
-});
</code></pre>
<p>on_hover_in是讓滑鼠移到圖片時,可以秀出右下角的分享圖片,當然效果可以依照自己喜歡去做修改</p>
-<p>至於 on_click 部份,就是將圖片分享致 pinterest</p>
+<p>至於 on_click 部份,就是將圖片分享至 Pinterest</p>
<pre><code>function on_click () {
img = $(this).siblings('img:first');
@@ -155,15 +142,15 @@ $(document).on('ready', function(){
<p>利用 window.open 開啟一個分享視窗,pin_url 裡面的網址搭配參數,分別是</p>
-<p>url:從哪個 url 分享而來,利用 document.location 語法取得</p>
+<p>url:<strong>從哪個 url 分享而來,利用 document.location 語法取得</strong></p>
-<p>media:利用 .attr() 取得該 img 的 src</p>
+<p>media:<strong>利用 .attr() 取得該 img 的 src</strong></p>
-<p>description:利用 .attr() 取得該 img 的 title</p>
+<p>description:<strong>利用 .attr() 取得該 img 的 title</strong></p>
<p>當然,記得使用 encodeURIComponent 做編碼</p>
-<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑 http://xxx.xxx.com/</p>
+<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑,例如: http://xxx.xxx.com/abc.jpg</p>
<pre><code>function getUrl(src){
var url = document.location.toString();
@@ -187,7 +174,13 @@ $(document).on('ready', function(){
<pre><code>media = getUrl( img.attr('src') );
</code></pre>
-<p>就大功告成了</p>
+<p>就大功告成了,要使用時</p>
+
+<pre><code>$(document).on('ready', function(){
+ //不喜歡預設圖可以直接這樣替換
+ $('img#share').pinterest({ button: 'pinterest-alt.png'});
+});
+</code></pre>
<p><a href="http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/05/jquery-pinterest1.zip" target=""_blank>完整範例程式碼</a></p>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: jQuery | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/jquery/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Octopress | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/octopress/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: PhoneGap | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/phonegap/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Win8 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/win8/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: 好書分享 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/好書分享/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -4,7 +4,7 @@
<title><![CDATA[Category: 學習筆記 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/學習筆記/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-05-16T17:53:54+08:00</updated>
+ <updated>2013-05-16T18:07:45+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
Oops, something went wrong.

0 comments on commit 5781b6c

Please sign in to comment.