顯示具有 blogger 標籤的文章。 顯示所有文章
顯示具有 blogger 標籤的文章。 顯示所有文章

2009年3月4日 星期三

[Blogger] 免手動修改圖片連結,讓lightbox也能正常運作的方法

有用lightbox的人,也許會遇到這個問題。

本文的效果為:當網頁載入而未完畢前,點圖片連結會另開新(分)頁來顯示圖片,而javascript載入完成後,lightbox可以正常運作。

原本我以為是Windows Live Writer的問題,當文章內的圖片上傳到blogger後(picasa的相簿內)後,無法讓有使用lightbox的<a>標籤正常使用lightbox來開啟影像(會變成讀取不到圖片)。

當初我自己測試是,把影像連結內的/s1600-h 或是/s800這段文字給刪除掉,lightbox即可正常運作。

但是每次發表完文章,還要上draft.blogger.com去修改文章原始碼,實在耗時費力!當初靈機一動,何不用jQuery直接把href也改成能正常使用的字串呢?

這個東西去年就想弄了,至少拖了有半年以上,之間有讀到Abin一篇相關的文章: Blogger 和 Picasa 的圖片上傳和外連限制,我才知道原來是Google Picasa的做的小詭計,加個"-h"就可避免讓圖片被外連。原來我之前一直錯怪WLW了。

雖然有想法,但是我拖到剛剛才來試寫這個script,沒想到幾分鐘就完成了…

這邊跟大家分享一下我的作法。

函式原始碼:

//用來避免lightbox無法正常連結圖片
//做法是將s1600-h,改為s1600
function ReplaceImageLink()
{
    lightboxLinks = $('a.lightbox');
    for(i=0; i<lightboxLinks.length; i++)
    {
      if (lightboxLinks[i].href.match(/s1600-h/))
        lightboxLinks[i].href = lightboxLinks[i].href.replace(/s1600-h/g, 's1600');
    }
}

因為我的blogger有掛上jQuery,於是我在document.ready裡面,lightbox函式執行之前,加上了ReplaceImageLink()這個函式,內容就變成下面這樣:

<script type='text/javascript'>
$(function(){

//修改符合a.lightbox的href
ReplaceImageLink();

$('.lightbox').lightBox();
});
</script>

這樣就算完成啦。當lightbox執行之前,圖片中有s1600-h的,都會被改成s1600,然後lightbox就可以正常執行。

另外,也可以改成把/s1600-h給整個去掉,一樣是可以正常運作。

 

4889

2009年3月3日 星期二

更換Blogger最新回應小工具

由於之前使用lvchen的最新回應,跟我後來手工加入jQuery的部份會有衝突,於是我最近又找了單純一點的"最新回應"widget。

這次我使用 http://chagg.blogspot.com/2007/07/blogger-pixnet.html

效果就如側邊欄最新回應小工具囉~

2009-03-03_142504

2008年11月27日 星期四

在Blog顯示圖片的工具 – jQuery.Lightbox

2008-09-25_125706

以前在逛網頁的時候,有印象看過這類的顯示方式,昨天心血來潮,查到了這個工具的名稱: Lightbox,並且下載來套用在自己的blog,讓它可以更痴肥一點。

這邊我前後試了兩種Lightbox:

  1. 一種是原始的,目前到第2版。
  2. 一種是使用jQuery實作的Lightbox,目前到0.5版。

原先我是先裝了第一種,全都設定好之後發現好像無法work,看一下原始碼跟開了jash來debug才發現,跟我原本已經掛上的jQuery好像有衝突,它的prototype.js用到了$這個名稱。

於是我又上網找,就發現了第二種這個jQuery-lightbox,而這個版本所需script檔更少更小(第一種版本光script檔就要5個,加一加是200kb;而第二種版本只要一個script檔,而且只要10kb,當然前提是要先掛好jQuery)。

下載點

jQuery Lightbox最新版

安裝方法

將壓縮檔內的相關檔案(jquery.lightbox.min.js, images, css)都上傳到你自己的網頁空間(如Google Pages)後,在你的blog的html範本檔中header內加入:

<script type="text/javascript" src="jquery.js"></script>
<script type=”text/javascript” src=”lightbox.js”></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

上面檔案的位置請改為對應存放的網址。

然後,在你的script最後加上:

//for jQuery.lightbox 
$(function() {
    $(".lightbox").lightbox({fitToScreen: true});
});

使用方法

單張圖片: 在a 標籤裡加上 class="lightbox",如 :

<a ref="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAwMcucNkiTyHapMS30WA2TKaz3kDjMYQxP1MS7Pk6o9JblFRHGJIWbs5LShPgEp4Ck1xZNSU2u5kDG6YR2YfgbQgTY2KsPHRZYj4QX5Ggcz7sYbnGs-AnK8CLontU8h_HW0H_7ugnqxD/s800/20080803234.jpg">My Photo</a>

範例: My Photo

一組圖片: 除了class="lightbox"外,在要顯示的a 標籤裡加上rel="groupname" ,groupname為這組要顯示的圖片組名。注意! 是rel 不是ref 哦…(謎之聲:誰會跟你一樣笨啊!!…囧rz)

<a href="photo1.jpg" class="lightbox" rel="2008112701"><img src="photo1.jpg"/></a> 
<a href="photo2.jpg" class="lightbox" rel="2008112701"><img src="photo2.jpg"/></a> 
<a href="photo3.jpg" class="lightbox" rel="2008112701"><img src="photo3.jpg"/></a>

範例: | |

另外可以用title這個屬性來決定相片的標題。

2008年8月25日 星期一

讓手機使用Nokia LifeBlog上傳生活照至Flickr + Blogger

前陣子試著玩Nokia N82的LifeBlog,自動將手機裡面每日發生的紀錄,包含拍過的照片、收發的簡訊(、還有記錄的行事曆?),都貼心的幫我根據日期整理成一篇篇的紀錄,感覺還蠻不錯的。

而LifeBlog內建可以上傳Yam、Wretch、還有另一家沒聽過的,但是我都不想上傳這幾家的blog,於是上網找了一下有沒有上傳blogger的設定,果然已經有人先做好作業了 :)

首先要有Flickr的帳號,如果已經有Yahoo的帳號也可以通。然後依序至以下設定好Flickr帳號對應的blog,再取回用LifeBlog登入的帳號密碼。

  1. Flickr的Blog清單
    2008-08-25_110545
  2. 透過LifeBlog上載
    2008-08-25_110911

最後,把帳號密碼、連線設定都設定好之後,就可以去選要上傳的圖片或是訊息資訊,傳到blogger上面了。

下面是傳完的範例圖:
2008-08-25_111405

這邊有幾點我個人認為要改進的地方:

  1. 上傳的時候,如果有多個帳號設定,似乎只能自動用最上面的那個設定為上傳目標(也就是第一個),沒法手動選擇上傳的目錄。但是新加入的設定會在最底下,所以我手動把原本內建的都刪掉了... :( 這點蠻不合理的~
  2. 選擇要上傳的照片時,只能一次選一張,要用"標示"這個功能,一張一張"標示"起來,就是上傳選擇的手續很麻煩就是了,不知道如果是有筆鍵的s60手機,會不會比較人性化一點?
  3. 上傳時只能一張一張傳,變成一張照片一篇文章,而不是一個日期包含了當日所有的照片,來組成一篇文章。這樣在瀏覽及blog文章分類組織倒是覺得蠻不便的。也許可以提供多種上傳的格式供使用者選擇(如一張照片一篇文章,或是一天一篇文章之類等等。)

這個功能目前我只用過一次,看了結果之後,不如預期,就再沒有讓我想再使用的念頭了。如果能改進我上面提出的三點問題,或許才會讓人覺得更方便吧。

延伸閱讀: [Symbian] 我的N82就是我的行動部落格,寫e生活(LifeBlog)+Flickr+Blogger.com