最近威爺跟雪倫剛蜜月完回來，愛出走除了多了一個討論區之外，也新增了很多照片，不過我用不太習慣威爺的照片瀏覽程式，個人覺得也許可以考慮Flickr的輪播方式(比起無名強太多了)，剛好想到上次介紹給尼哥的PHP/SWF Charts的兄弟產品XML/SWF Slideshow可以做到類似的功能，所以就拿來玩了一下，之後希望推薦給威爺看看愛出走能不能也寫一套或者是使用類似撥放程式。

安裝：
安裝方式很簡單，只要將slideshow.zip抓下來解壓縮後得到的slodeshow.swf放在網頁可以call到的地方即可使用。

使用說明：
基本上我們只需要一個網頁跟一個xml檔案即可完成照片輪播的功能，網頁主要是用來嵌入slideshow.swf，而xml裡面則是包含所有圖片以及slideshow動作的設定，下面是範例：

這個範例主要是根據官網的範例修改而成，假設我們有一個資料夾叫做slideshow，下面有三個檔案，index.php、sample.php以及slideshow.swf以及一個存放相片的資料夾image，檔案結構如下：

slide
-index.php
-sample.php
-slideshow.swf
+image
--img1

index.html

我把sample.xml改成sample.php是為了讓程式可以根據index.php傳入的資料夾參數自動把資料夾內所有的圖片找出來並輸出成xml檔，傳入的dir%3Dimg1的img1就是在image資料夾名稱，這邊把參數編碼是因為這個值會先傳給slideshow.swf，為了避免特殊字元造成slideshow.swf混淆所以就照官方建議編了碼。


<HTML>
<BODY bgcolor="#FFFFFF">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
        WIDTH="420"
        HEIGHT="300"
        id="slideshow" />
<PARAM NAME="movie" VALUE="slideshow.swf?xml_source=sample.php%3Fdir%3Dimg1"/>
<PARAM NAME="quality" VALUE="high" />
<PARAM NAME="bgcolor" VALUE="#000000" />
<param name="allowScriptAccess" value="sameDomain" />

<EMBED src="slideshow.swf?xml_source=sample.php%3Fdir%3Dimg1"
    quality="high"
    bgcolor="#000000"
    WIDTH="420"
    HEIGHT="300"
    NAME="slideshow"
    allowScriptAccess="sameDomain"
    swLiveConnect="true"
    TYPE="application/x-shockwave-flash" 
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

</BODY>
</HTML>

sample.php
這邊比較要注意的是兩個點，第一點，因為這隻程式會根據傳入的資料夾去搜尋底下所有的檔案，因此很可能被利用來攻擊主機，所以我利用basname這個函式另外在前面加上image這個資料夾，讓被跨目錄攻擊的風險減到最低，此外我也加了一個preg_match("/jpg/",$entry)來避免其他檔案被任意瀏覽，anyway這種直接傳遞目錄的功能是滿危險的，建議要寫的話可以用一些替代方案，像是結合資料庫，這樣還可以搞一個相片管理的後台。

第二點就是在image Tag裡面的fill強烈建議用center，因為我常常有直拍的照片，但是電腦螢幕大多是橫的長方形，照片太長瀏覽起來不方便，因此我多半會把長度限制在600以下，當照片長度超過預設長度時，slideshow.swf預設的squeeze參數會照著照片比例縮放，但是縮出來圖實在非常難看，所以我乾脆使用center把超出來的部分截掉，如果不希望照片被截掉的話把圖縮小一點也是解決方案之一，畢竟專業縮圖軟體縮出來的圖會比較漂亮一點(可採用固定高度依比例縮圖的壓縮方式，這樣直幅的圖也可以完整呈現)。
<?php
$path="image/".basename($_GET[dir]);
$d = dir($path);
echo "<slideshow>\n";
while (false !== ($entry = $d->read())) {
    if($entry!='.' && $entry!='..'){
        if(preg_match("/jpg/",$entry)){
            echo "<slide>\n";
            echo "   <image url='$path"."/$entry' fill='center' />\n";
            echo "   <transition type='fade_to_black' duration='2' />\n";
            echo "</slide>\n";
        }
    }
}
$d->close();
echo "<control bar_visible='on' />\n";
echo "</slideshow>\n";
?>

寫完之後廢話不多說，來看成果吧。

arrow
arrow
    全站熱搜

    nsysumis94 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄