« 上一篇 | 下一篇»

Picasa template-Flash Page Flip Photo Gallery

22 十二月, 2009 03:42 •  (3) 迴響  •  引用(0)  •  4094 hit.  • 分類: Picasa   

好久沒寫Picasa templates的文章,晚上看到江老師的這一篇「第681回-電子白板教學應用-55-網頁式flash電子書-1」,覺得那畫面似乎很熟悉,找了一下Picasa templates,的確以前看過這個「Flash Page Flip Photo Gallery template for Picasa」,所以就再來寫一下文章吧!

模版檔案來源:http://www.paulvanroekel.nl/picasa/flashpageflip/
Demo相簿:
981222-FlashPageFlipgallerylandscape(橫式照片)
981222-FlashPageFlipgalleryportrait(直式照片)


一、下載檔案:

連結到這頁面,這裡有兩個 .zip 的模版檔案,一個是橫式照片用模版(landscape),一個是直式照片用模版(portrait)。

將檔案下載後分別解壓縮,將目錄複製到 C:\Program Files\Google\Picasa3\web\templates\ 這目錄下即可。

二、修改檔案:

打開剛剛解壓縮的目錄,這裡有兩個檔案要注意一下。

1. index.tpl

以文字編輯器打開index.tpl,可以看到如下面的部份內容

# possible sizes
# 500 x 375 for compact
# 500 x 333 for slr cameras

define imageWidth 500
define imageHeight 500

上面那500是比較要注意的,它的意思就是你輸出的圖片的寬度大小為500px ,一個頁面放兩張照片,寬度就是1000px了,以一般1024x768的螢幕大小來說,這樣的圖片寬度大小是剛好的。所以這數字要增要減,就看你要做出多大的相簿而定了。

至於「imageHeight 500」則不必管它,屆時輸出的圖片是依據寬度來縮放的。


2. header.xml

這檔案(landscape模版)的內容

<content width="500" height="375" bgcolor="cccccc" loadercolor="000000" panelcolor="000000" buttoncolor="000000" textcolor="ffffff">

<page src="img/frontpage.jpg"/>

500x375 (4:3的比例)也就是相簿頁面上單張照片的顯示範圍大小,一般單眼相機的照片比例是3:2,這裡就要改成 500x333,這樣才能顯示完整的圖片。

若是直式照片的的portrait模版,上面 width、height 的數值就是對調的了。

至於上面的 img/frontpage.jpg 也就是相簿的封面,預設是這一張,若有需要你可以自己修改。

三、以Picasa產生網頁:

1.在Picasa中選取你的照片

2.「資料夾」→「匯出為HTML頁面」

3. 輸入標題,這標題就是你輸出的資料夾名稱

4. 選擇網頁範本


5. 產生相簿目錄,同時會以預設瀏覽器打開這相簿,不過你應該是看不到相簿網頁內容。

如下圖所示產生的目錄內容,請手動將 Page.xml 這檔案移至 xml 目錄中,這樣瀏覽index.html時才可以正確看到相簿內容的。

這樣就完成了!

ps:若輸出相簿有白邊,可能是width、height的數字設定不對,不需要再用Picasa重做一次,只要去修改輸出目錄裡的 Page.xml這檔案,就可以直接修改展示出來的相簿大小了。

<contentwidth="334" height="500" bgcolor="cccccc" loadercolor="000000" panelcolor="000000" buttoncolor="000000" textcolor="ffffff">

<page src="img/frontpage.jpg"/>
<page src="images/img_6082.jpg"/>
<page src="images/img_6083.jpg"/>
<page src="images/img_6084.jpg"/>
......略

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

3 Comments on "Picasa template-Flash Page Flip Photo Gallery"

 

  1. 解決了--根本沒有index.html

       作者 四百       [管理]

    1.打開FlashPageFlipgallerylandscape
    2.以文字編輯器打開index.tpl
    3.將後面算來第6行
           copy assets\  \
    改成  copy assets\
    存檔就可

  2.  

  3. 根本沒有index.html

       作者 四百       [管理]

    +1

    以前做過是有的

  4.  

  5. 根本沒有index.html

       作者 egg       [管理]

    以上述的方式,完全看不到index.html

  6.  

發表迴響
 authimage

Google+ 迴響

*********