« 上一篇 | 下一篇»

Picasa template-Lightbox

27 八月, 2006 00:58 •  (1) 迴響  •  引用(0)  •  9813 hit.  • 分類: Picasa   

之前有寫過這一篇「Lightbox JS v2.0」,後來使用了這Lightbox2,做了個一般html網頁的「華龍老照片」,原本我還想說要在這裡寫一篇如何使用Lightbox2在一般網頁上。

不過有了這下面要介紹給大家的 Picasa template-Lightbox,上面那篇文章也就不用寫了,因為有了Picasa,有了這template,要做個有Lightbox效果的網頁相簿,一切就變成了非常簡單、快速。

template 來源:Picasa templates using Lightbox JS and Thickbox JS by Paul van Roekel
DEMO網頁:小雨安安-Lightbox

1.建立個template目錄

首先在 C:\Program Files\Picasa2\web\templates下建立個例如「Lightbox-Picasa-template」(可自行命名)的目錄,因為等一下下載回來的template壓縮檔本身不含目錄名稱。

2.下載template壓縮檔並解壓縮

到「Picasa templates」這網頁下載那「Lightbox Photo Gallery and Slideshow Template 1.2 (zip, 60 Kb)」 的.zip壓縮檔,解壓縮後放到 C:\Program Files\Picasa2\web\templates\Lightbox-Picasa-template 裡。

在還未使用 Picasa 製成網頁相簿之前,還必須先修改一些可以先改的預設檔案,不然製成了網頁相簿後,就比較不方便來修改了(當然要改還是可以的啦)

3.修改預設編碼為UTF-8

假如你的網頁上有要出現中文字,這個步驟一定要做,否則做出來的網頁裡的中文會變成亂碼。

用文字編輯器修改在「C:\Program Files\Picasa2\web\templates\Lightbox-Picasa-template」裡的 header.html

將其中

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

修改成

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4.修改輸出照片大小

這個Lightbox template,它輸出到網頁相簿上的照片大小並不是由Picasa來控制,而是由「C:\Program Files\Picasa2\web\templates\Lightbox-Picasa-template」裡的 index.tpl 來決定」

index.tpl 裡有段

define imageWidth 700:代表輸出的大圖的寬度
define imageHeight 525:代表輸出的大圖的高度
# define thumbnailHeight 100
define thumbnailWidth 150:代表輸出的縮圖的寬度

所以假如你要修改這些輸出圖的大小,再未利用 Picasa 製成網頁相簿前就要先改好。

5.修改 Picasa 裡 照片資料夾的相關說明

這個template所製成的網頁相簿,會顯示出在 Picasa裡照片資料夾的一些說明


所以你可以先修改這些說明文字,以免製成了網頁相簿後,要修改會比較麻煩一點

在 Picasa 裡 ,你要製成網頁相簿的資料夾上,按「滑鼠右鍵」→「修改資料夾內容」,再修改一下你要顯示的文字資料

6.製成網頁相簿

參考之前這一篇「 Picasa template-Simple Viewer」的第3及第4個步驟,大同小異。
「選擇網頁範本」時則選擇那個「LIghtboc PhotoGallery....」

7.修改照片說明文字

網頁輸出後,預設的照片說明文字是以照片的檔名來做說明,假如你要修改的話,必須修改輸出的網頁相簿裡的 index.html

index.html 裡有許多段關於照片的html碼 ,例如我在「DEMO網頁:小雨安安-Lightbox 」上的第一張照片所修改後的html碼

<div class="thumbnail">
<a class="thumbnailhover" title="小雨玩鋼琴(照片裡的說明文字)"  rel="lightbox[48]" xhref="images/dsc00001.jpg"><img xsrc="thumbnails/dsc00001.jpg" title="滑鼠移到縮圖上時的說明文字" alt="dsc00001.jpg" width="149" height="112"  border="0" />
小雨玩鋼琴<br>(網頁上的說明文字)</a>
</div>

請自行對照一下哪些文字會出現在哪裡。
上面的「小雨玩鋼琴<br>(網頁上的說明文字) 」其中的<br>,是為了讓說明文字斷行而自行加上去的。

8.修改每一列有幾個縮圖

預設輸出的網頁每一列會有4 張縮圖,若要修改成每一列有更多張縮圖,例如下圖:

這裡會有點麻煩,若要做比較精確、完整的說明,可能得花許多時間來一一講解,所以我這裡只簡單說明一下,若有想改的人,可能要自行嘗試看看了。

必須先將 index.html 裡每張縮圖圖片的大小改小一點,這樣才能讓每一列能放進更多張縮圖。

所以必須改一下index.html 裡關於照片長寬的html碼,原本為「width="149" height="112"」,可以改成「width="100" height="75"

這樣還不行,還必須修改 css 目錄下的 template.css ,例如我將部分css改了下面紅色字的部分

.thumbnail {
    float: left;
    margin: 5px;
    padding: 8px;
    text-align: center;
    color: #CCCCCC;
    width: 100px;
    height: 140px;
    }

.thumbnailhover{
    background:  none;   
    display:block;
    width: 100px;
    height: 140px;
}

a.thumbnailhover:hover{
        background:  url(images/bg_body.jpg) no-repeat left top;   

    display:block;
    width: 114px;
    height: 140px;
    color: #76B41C;
    font-weight: bold;
}

就可以讓每一列變成了6張縮圖。

反正網頁上所有的文字顏色,背景顏色、背景圖案、圖片大小等設定,通通可以在這template.css裡做修改,自己動手樂趣多,有興趣的玩玩看吧!

創用 CC 授權條款
 
 
Related Posts Plugin for WordPress, Blogger...

1 Comments on "Picasa template-Lightbox"

 

  1. 很不錯的相簿

       作者 rex       [管理]

    謝謝分享

    沒想到picasa也可以做這些相簿的效果

  2.  

發表迴響
 authimage

Google+ 迴響

*********