« 上一篇 | 下一篇»

Picasa template-XFade

01 九月, 2006 00:20 •  (8) 迴響  •  引用(0)  •  5266 hit.  • 分類: Picasa   

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秒鐘輪撥照片,若要修改時間,必須修改 scriptsxfade2.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.tc.edu.tw/picasa_template/xfade-small"> </iframe> 

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

8 Comments on "Picasa template-XFade"

 

發表迴響
 authimage

Google+ 迴響

*********