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

這個XFade的網頁範本可以將照片以幻燈片的方式來顯示，同時您也可以自行設定每張照片所要顯示的時間。

例如上面的 「小雨安安-XFade 」就是以每張照片2秒鐘（預設是5秒鐘）的時間來輪流播放。

基本的修改的方式請參考之前 Picasa template-Lightbox的步驟1～6。

1.修改背景顏色及照片邊框顏色

在我們輸出的index.html裡有段
<link rel="stylesheet" type="text/css" xhref="scripts/xfade2_o.css" />

所以我們要修改一些顏色設定等，就必須修改 scripts/xfade2_o.css 這檔案 。

原來內容：

#imageContainer {
    position:relative;
    margin:20px auto;
    width:700px;
    height:auto;
    /* border:12px solid #FFFFFF; */
}

body {
    background: #000000;

我修改後的內容

#imageContainer {
    position:relative;
    margin:20px auto;
    width:700px;
    height:525px;
    border:12px solid #FFFFFF;
}

body {
    background: #336699;
}

上面的設定，我是在照片旁邊加上了白色邊框12px，但height原本的設定為auto，這裡會造成邊框無法在照片周圍產生。
所以上面的 「width:700px;  height:525px; 」就必須依照您產生的圖片大小來設定。

background: #336699; 就是背景顏色的設定了。

3.改變每張照片的顯示時間

預設每5秒鐘輪撥照片，若要修改時間，必須修改 scripts＼xfade2.js 這檔案。

function so_init() {
    if(!d.getElementById || !d.createElement)return;
   
   略...
   
    setTimeout(so_xfade,2000);
}

function so_xfade() {
    cOpacity = imgs[current].xOpacity;
    nIndex = imgs[current+1]?current+1:0;
    nOpacity = imgs[nIndex].xOpacity;

      略...

        setTimeout(so_xfade,2000);
    } else {
        setTimeout(so_xfade,50);
    }

上面第一個紅色數字2000代表的是第一張照片會顯示2秒鐘，第二個紅色數字2000代表的是後面的每張照片會以2秒鐘來顯示。

3.在一般網頁上嵌入 XFade

例如上面播放的小圖，它的原始網頁在這裡。在將它輸出成網頁前，我先將輸出圖片的寬度調整成 200px。

修改的檔案在「C:＼Program Files＼Picasa2＼web＼templates＼XFade-Picasa-template」裡的 index.tpl 

define imageWidth 200
#define imageHeight 562
# define thumbnailHeight 100
# define thumbnailWidth 150

只要調整寬度就可以了，照片的高度會依照比例自行調整，所以輸出的照片大小就變成了 200X150 像素。

又因為我是要將這網頁嵌入在一般網頁上（或我這文章裡），所以我希望顯示圖片的位置放在網頁的左上角，這裡不需要另外自己改css檔，因為在網頁輸出的 scripts 目錄裡就有個  xfade2.css 可以使用。

#imageContainer {
    /* height:525px; */
}

#imageContainer img {
    display:none;
    position:absolute;
    top:0; left:0;
}

 

所以只要將輸出網頁的 index.html 裡的

<link rel="stylesheet" type="text/css" xhref="scripts/xfade2_o.css" />

改成

<link rel="stylesheet" type="text/css" xhref="scripts/xfade2.css" />

即可 。

至於如何嵌入在一般網頁裡呢 ？其實只要使用 <iframe>這個html語法就可以了。

例如下面的圖片它的語法就是

<iframe width="200" scrolling="no" height="150" frameborder="0" src="http://www.hlps.tcc.edu.tw/picasa_template/xfade-small"> </iframe>