« 上一篇 | 下一篇»

Picasa template-XFade

01 九月, 2006 00:20 •  (8) 迴響  •  引用(0)  •  5260 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"

 

  1. Picasa template-XFade嵌入問題

       作者 MeowMeow       [管理]

    老師您好, 您的文章真的是太實用了! 讓人受益良多!
    按照老師的說明, 我已學會了把XFade嵌入網頁了
    可是當我要嵌入照片長寛不同的XFade到網頁時卻一直有問題
    直接XFade的index.html檔是正常的
    可是一旦嵌入到網頁後, 圖片的height下方會被吃掉, 不過每張width都正常顯示
    這樣子不知要如何修正, 謝謝~

  2.  

  3.    作者 winvin15       [管理]

    這個問題 我也有去想過電腦上的我都開了 不過還是不行可是 突然想到...DLINK 也有 = = 傻眼 忘了 哈哈 回家趕快試看看   

     

    ....買書買書....太可笑嘍

  4.  

  5.    作者 阿欣       [管理]

    winvin15:
    檢查看看你的防火牆有沒有開囉!

  6.  

  7.    作者 winvin15       [管理]

    太謝謝老師了  還附帶

    水拉 今天弄了一整天  好讓別人連到我部落格

    但是我想應該是我電腦躲HUB裡面 用虛擬的IP

    跟著DLINK的說明書設定的設定了  還是不行   殘念

     

    不過因為老師的軟體很多讓我覺得很有趣

    所以我明天沒課  想到圖書館借書  真的是   

    越來越想學 越來越有興趣了  跟我的本科系電子 多少有一點點關係

    太正點了 老師很厲害 佩服喔

  8.  

  9.    作者 阿欣       [管理]

    winvin15:
    他們叫我老師,因為我的職業就是老師呀!眨眼

    這裡還有個網頁介紹了14種模板,也可以去看看
    14 Free Picasa Flash and HTML templates

  10.  

  11.    作者 winvin15       [管理]

    大家都稱你老師呢

    那我也稱呼你老師

    看到你的文章真的讓我受益良多

    太正點了   我是大學學生 現在真的很多時間  所以我想學一些學校沒交的東西

    希望我期中考完之後會弄出來 到時候一定第一時間PO過來給你看看

    謝謝你的文章

  12.  

  13.    作者 阿欣       [管理]

    小豬:
    1.上面的語法其中的 xsrc 請改成 src
    2.有想到可能是tinymce的關係,不過LT1.1的tinymce預設是可以接受iframe語法的耶!可以看一下你的LT嗎?

    或者可以寄到我的信箱來 hlps9999@gmail.com

  14.  

  15. 我的部落格無法用 -iframe

       作者 小豬       [管理]

    老師您好:謝謝您的網頁指導讓我受益良多 我試了XFrade成功了

    但是我照指示用 iframe 語法試著在我的部落格上發表新文章卻

    無法做(好像不接受iframe的語法.我是用lifetype 1.1版的).我看您的網頁是可以放的,請老師指點...謝謝

  16.  

發表迴響
 authimage

Google+ 迴響

*********