« 上一篇 | 下一篇»

Picasa template-Simple Viewer

14 八月, 2006 01:05 •  (58) 迴響  •  引用(0)  •  30737 hit.  • 分類: Picasa   

template來源:SimpleViewer
Demo網頁:小雨安安-SimpleViewer

< !--more-->

How to do?

1.安裝 Google Picasa

你的電腦必須先安裝有 Google Picasa ,安裝步驟可以參考我之前寫的講義

2.下載 SimpleViewer Picasa Template

SimpleViewer 下載這個 SimpleViewer Picasa Template 的zip檔案, 解壓縮後會產生一個 simpleviewer_picasa_template 的目錄,將這個目錄放到 C:\Program Files\Picasa2\web\templates 下。

[更新] 若是安裝Picasa3,就請將上面simpleviewer的資料夾放到 C:\Program Files\Google\Picasa3\web\templates 下。

3.匯出網頁

啟動Picasa→ 選取所有你要製作成網頁相簿的圖片→資料夾→匯出成網頁。

4.設定

在「匯出成網頁」的視窗上,選擇

  • 你要匯出的圖片大小
  • 網頁上的標題文字
  • 選擇輸出網頁、圖片的資料夾

選擇完畢後按下「下一步」

 

5.選擇「SimpleViewer」這個範本

6.成果

上面按下「完成」後,瀏覽器會自動開啟你剛剛製作完成的網頁相簿了。


以上就是整個製作SimpleViewer相簿的過程,很輕鬆、簡單吧!假如妳還想要修改一些東西,就繼續看下去吧!

7.準備文字編輯器軟體:

因為等一下要開啟一些檔案來修改,建議使用一些支援utf-8編碼的文字編輯器來編輯這些檔案會比較簡單、方便。

你可以試試看使用 EmeditorPSPadNOTEPAD++ 這些文字編輯器。假如妳沒用過、也不想用這些文字編輯器,那更簡單的,就使用Windows內建的「記事本」來修改吧!

下面我就用記事本來操作吧!

8.修改網頁背景顏色

打開記事本→檔案、開啟舊檔 → 選擇到我們剛剛製作完成的網頁相簿目錄→ 記得要先將檔案類型改成「所有檔案」→ 選擇 index.html


在 index.html 最下面有一段

<script type="text/javascript">
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#336618");
fo.addVariable("preloaderColor", "0xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.write("flashcontent");
</script>

上面藍色部分的顏色代碼就是網頁的背景顏色,你可以到 ColorBlenderColor schemes 這些網站尋找你要的背景顏色。

9.修改 gallery.xml

我們如果要修改網頁上文字顏色、縮圖區塊位置、圖片說明文字等,就是要修改 gallery.xml 這檔案,在SimpleViewer官網上有對這gallery.xml 的說明「SimpleViewer XML Options」,要修改 gallery.xml,一樣可以直接用記事本等支援UTF-8編碼的文字編輯器來修改。

下面我就簡單做個說明

  • maxImageHeight="1024"圖片最大高度(像素)
  • maxImageWidth="1024":圖片最大寬度(像素)
  • textColor="0xFFFFFF":網頁上文字的顏色
  • frameColor="0xffffff":圖片邊框的顏色
  • frameWidth="20":圖片邊框的厚度
  • stagePadding="40":縮圖區塊與圖片、圖片邊框間的距離
  • thumbnailColumns="3":縮圖區塊的縮圖有幾個直欄,若改成"4",就會變成4直欄。
  • thumbnailRows="3":縮圖區塊的縮圖有幾個橫列
  • navPosition="left":縮圖區塊顯示在中間圖片的左邊,right就是顯示在右邊,如下圖就改成在右邊顯示縮圖區塊 
  • title="小雨安安-SimpleViewer":標題文字
  • enableRightClickOpen="true":預設值為「true」,在中間大圖上按滑鼠右鍵,會有個「Open IMage In New Window」的選項,按下它,可以將目前這張圖片單獨開啟在新視窗上。
    反之,若改成「false」,就不會出現「Open IMage In New Window」這個選項。 
  • backgroundImagePath="":網頁背景圖的圖片路徑及名稱
  • thumbPath="thumbnails/":放置縮圖的目錄名稱
  • imagePath="":放置網頁背景圖的目錄名稱位置-假如你的照片不想放在images目錄下,要放在另一個目錄時,這裡才要填入該目錄的名稱。(951030 updates)
  • 修改圖片說明:
    <filename>dsc00001.jpg</filename>

    <caption>小雨玩鋼琴</caption>
    修改caption裡的文字,就可以在縮圖下顯示圖片的說明 

 

10.修改預設設定:

假如你不想每次都等到網頁製成後再去修改一些文字顏色或背景顏色的設定,想一輸出成網頁就是你要的樣子,那麼你可以直接去修改
C:\Program Files\Picasa2\web\templates\simpleviewer_picasa_template
裡的 indexTemplate.htmlheader.xml 這兩個檔案。

製作完成的網頁相簿,就會依照上兩個檔案的內容輸出成 index.html及gallery.xml。

ps1:

其實這篇文章早該在三天前完成,因為就在快寫完文章前,一不小心按到了瀏覽器上的「上一頁」按鈕,再加上沒有先存成草稿,就這樣內容就不見了,氣死我也~

這樣的經驗已有好幾次,不是time out,就是不小心把網頁給關掉或回上一頁的,尤其是在文章快寫完時才發生這樣的情況時,要叫我再重寫一次,當時實在會沒那心情再寫下去了。

期待 LifeType1.1正式版的釋出,因為1.1版上就有「取回未存檔文章繼續編輯 」的功能。

ps2:
其他的 Picasa template的作法就大同小異了,再讓我「慢慢」寫吧!
創用 CC 授權條款
 
 
Related Posts Plugin for WordPress, Blogger...

58 Comments on "Picasa template-Simple Viewer"

 

  1.    作者 NEW YORK       [管理]

    老師你好!

    請教一下
    我想將相簿插進我要做的網頁
    但相簿不要有任何SIMPLEVIEWER的字樣與連結
    請問這樣要如何做?

    謝謝! 

    若要移除SIMPLEVIEWER的字樣與連結,根據官網的說明,請買Pro版本

    http://www.simpleviewer.net/simpleviewer/pro/#comparison

  2.  

  3. 您好請問把此功能外掛到blog上的地方

       作者 kaimo       [管理]

    老師您好~
    因為我目前是用google的blog網頁(blgger),想把自己的作品
    呈現上方這樣的方式
    就是旁邊有小格的顯示圖,點選某一張就會在旁邊顯示大圖來

    請問google是否有支援這樣的外掛方式呢?
    我在修改網頁時不知在哪裡去找可放外掛的地方?
    而我所希望的是這圖片秀的外掛,就像網頁超連結一樣,比如在網頁
    左邊點選"作品區"的連結,在右邊出現上方那種的圖片秀,而不會另外彈跳出一個視窗。

    想再請問google的blog也支援iframe這個外掛的程式嗎?
    百忙之中不好意思麻煩您了!!!
    謝謝

  4.  

  5. 多個simpleviewer

       作者 老吾       [管理]

    老師您好~
    我在製作網頁過程中 共5的分頁要用到這個幻燈片
    我製作第1份時 將程式碼貼在網頁後 很順利的有顯示出來

    但是我製作第2份時卻不行了
    我發現原因是程式會產生的3個圖檔資料夾和gallery
    第2份製作後產生的資料夾檔名都一樣

    我想說個別建立在子資料夾中 結果製作出來後
    他產生的程式碼只能連接在最上層放html檔案的資料夾
    子資料夾的都沒辦法連結

    這樣我該怎麼解決~拜託老師幫我解答一下 謝謝!

  6.  

  7. 請問老師為什麼匯出HTML之後 只出現原始嗎?

       作者 moniqueyang       [管理]

    請問老師,我用PICASA3.6製作HTML頁面,是用http://www.paulvanroekel.nl/picasa/flashpageflip/index.asp這個範本,可是為什麼製作出來之後出現的頁面卻都是原始碼?然後我檢視匯出的那個資料夾,裡面沒有index,這是為什麼呢?

    首先你先檢查一下,你的檔案是否如下圖放在正確的路徑上,同時內容是否也跟下圖一樣

     

    再來,匯出之後的資料夾,請把Pages.xml 這檔案移到 xml 這資料夾中,再去點選 index.html ,這樣才能正確顯示這個相簿

     

    2010/06/06 更新

    剛剛才發現我寫過這篇文章 Picasa Template-Flash Page Flip Photo Gallery,參考看看吧!

  8.  

  9.    作者 M       [管理]

    想要更新成SimpleViewer 2.0,但是試了半天,東西出不來...

    之前我也有更新過 2.0,依照這邊的說明步驟,但全螢幕出不來。

    剛剛再試一次,發現我寫這篇文章時的simpleviewer版本較舊,照那升級步驟,根本不能。

    剛剛再抓一次「SimpleViewer Picasa Template 」檔案來試試,再依照他的升級步驟,就沒問題。檢查一下,裡面一些檔案內容都有點差異。

    所以建議你不要用升級的方式,到這個網頁抓2.0版的檔案,重做吧!其實也不會花太久的時間的!

  10.  

  11. 阿欣老師

       作者 ELF       [管理]

    你好~謝謝老師清楚的解說!

    另外請問老師要怎麼將SV放到BLOGGER呢??

    sorry,沒玩 blogger,不清楚耶!

  12.  

  13. 老師你好

       作者 di       [管理]

    hi me again!

    我是下載picasa2耶(因為我下載picasa3都找不到他的資料夾)

    然後我把template貼到picasa2,還是沒有辦法選simple viewer的範本ˊˋ 

    謝謝!

     

  14.  

  15. 老師

       作者 di       [管理]

    老師你好!
    我也遇到了在選擇範本時沒有simple viewer這個選項的問題
    但是我確實是從您提供的網頁下載templet的
    請問我該怎麼處理這個問題呢?

    p.s會不會是跟simple viewer或picasa的版本有關?

    你將檔案解壓縮到哪個資料夾呢?

    上面的說明是安裝在Picasa2,現在你安裝的Picasa應該是Picasa3,所以請將「simpleviewer_picasa_template」這個資料夾放到「C:\Program Files\Google\Picasa3\web\templates」下面就可以了!

  16.  

  17. 老師您好

       作者 toro       [管理]

    阿欣老師您好,感謝您無私分享讓我們又多學一樣技巧

    想請問一下關於縮圖的左右白色箭頭

    是否有修改顏色的方法, 謝謝 !

    沒辦法,除妳可以拿到原作者 view.swf 的.fla原始檔才有辦法修改。

    另外,剛剛才發現原作者後來有更新 SimpleViewer 2.0

    我的範例檔案在這裡

    箭頭樣式不同,畫面右上角多兩個連結(開啟圖片、全螢幕顯示),但我試他所謂的「全屏」好像沒差別。

    若要更新很簡單,網頁上就有說明了。

  18.  

  19. 如果不用google製作的話

       作者 maimai       [管理]

    如果不用google製作的話,直接下他的檔

    雖然大圖出的來,但小圖卻無法顯示出來?

    你有自己做小圖嗎?它是不會幫你自動產生小圖的

    把你的小圖放在「thumbs」目錄下,檔名跟大圖一樣

     

  20.  

  21.    作者 Agrippa       [管理]

    我將iso-8859-1改成utf-8就不會變成亂碼了^^

    我是用內建的notepad.exe改的,可是我有將儲存格式換成utf-8,但還是亂碼…

    對了,我也可以將連結改用圖示的形式來表現嗎?

    謝謝你幫我^^

    連結用圖示,當然可以呀!

    原本是

    <a href="相簿首頁的網址">相簿首頁</a>

    改成

    <a href="相簿首頁的網址"><img src="圖片網址" border="0"></a>

    網路上還有許多關於img的語法可以參考。

    建議上語法再加上 border="0" ,避免圖片有邊框出現。

  22.  

  23.    作者 Agrippa       [管理]

    請問一下9樓關於相簿首頁我放到indexTemplate.html中輸出就會變成亂碼。直接到輸出的相簿修改index.html也是一樣的結果。

    我有將格式設成utf-8,但還是亂碼…想請問一下有什麼辦法可以解決? 

    建議你改一下index.html裡的

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

    改成

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    另外這些檔案你是用什麼編輯器去修改的呢?我想你的問題應該是出在存檔時編碼的選擇。

    我通常使用Emeditor,或者PSPadNOTEPAD++ 這些文字編輯器。

    Emeditor存檔時可以設定檔案要存成怎樣的編碼。

    至於其他文字編輯器就不一定了,有些是要在設定裡修改。 

  24.  

  25.    作者 maimai       [管理]

    Simple Viewer 也有支援gif檔嗎?

    我用了好像無法動也?

  26.  

  27.    作者 maimi       [管理]

    無法支援gif檔嗎?

    可以,要改一下Picasa的設定。

    「工具」/「選項」/「檔案類型」

  28.  

  29.    作者 Ru       [管理]

    你好..請問一下..

    我有按照你說的做成相舖後成功..

    可是要怎麼把它

    匯成Dreamweaver 8 做成網頁的模式呢???

    因為它的SimpleViewer 網路Flash相簿

    不知道該怎麼匯成,麻煩妳了謝謝^^

    sorry~

    不太懂您的意思,做出來的東西不就是個網頁檔了嗎?

    用Dreamweaver直接去編輯那.html檔不就好了?

    還是你要再加上其他東西呢?

  30.  

  31.    作者 Agrippa       [管理]

    你好~

    請問一下相簿背景可以換顏色,那有沒有方法可以換成圖片呢?

    上面文章裡有提到喔!

    backgroundImagePath="":網頁背景圖的圖片路徑及名稱

    我有很多個相簿,我該怎麼利用SimpleViewer做一個相簿首頁?

     

    可能沒辦法,得自己做網頁了。

     

  32.  

  33.    作者 maimai       [管理]

    不好意思,請問圖說可以在大圖的下方嗎?字型可放大或改字型嗎?

    對齊的方面,我多試幾次才會成功不知那裡問題,每次都這樣!!

    原始碼如下

    http://rghost.ru/54917

  34.  

  35.    作者 maimai       [管理]

    我有用iframe語法加入相簿,可是卻對不齊

    http://img296.imageshack.us/my.php?image=20081113131351hc6.jpg

    dw設定 我有設過用botton了還是一樣

    http://img296.imageshack.us/my.php?image=20081113131336zy2.jpg


    沒看到網頁原始碼,實在不容易知道為何?

    把iframe裡的height參數改大一點,看看行不行。

  36.  

  37.    作者 maimai       [管理]

    請問一下老師

    backgroundImagePath="" 只能換背景圖,不能換顏色是嗎?

    還有縮圖可否在navPosition="left"左邊,但是是靠上對齊呢?

    還是圖多就會了!?

    1.要換背景顏色請修改 index.html ,其中

    var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");

    2.這裡有gallery.xml的參數說明,thumbnailColumns、thumbnailRows、vAlign、hAlign這幾個參數玩一玩,看看能否改成你要的模樣。

    假設你本來是3x3(thumbnailColumnsxthumbnailRows)個縮圖,你把它改成3x10,你就可以看到不一樣的畫面了。

  38.  

  39.    作者 maimai       [管理]

    請問要如何崁入我自已製作的網頁裡呢?

    假如你對html熟悉的話,直接把相簿裡index.html裡相關於原始碼加到你現在的網頁上,記得把相簿目錄裡其他檔案、目錄, 也放在你的網頁同一個目錄下。

    若不行,你可以是是使用 iframe 這個語法,把相簿網頁嵌入到你的網頁裡。
    google一下「iframe 語法」就有很多資料可以參考
  40.  

發表迴響
 authimage

Google+ 迴響

*********