教學建立 PicLens 超炫3D相簿( PicLens 3D Album)

教學建立 PicLens 超炫3D相簿( PicLens 3D Album)

最近看一個可以看超炫3D相簿的Firefox外掛PicLens,現在很多相簿都支援PicLens,所以就想來研究一下PicLens是如何做到的。

PicLens 官網教學:手動建立超炫3D相簿

PicLens建立的範例:PicLens Dome

PicLens建立的範例下載:PicLens 下載

PicLens 介紹:使用 Firefox plugin PicLens觀看無名相簿表特牆

相關文章:無名相簿 - 表特牆、正妹牆、正臉牆、帥哥牆(WretchXD)
超炫方式看 Youtube - 使用 PicLens

PicLens 中文教學:

1.第一步:建立一個rss的檔案-範例 photos.rss

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0"
xmlns:media="http://search.yahoo.com/mrss"
xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<item>
<title>A.jpg</title>
<link>pl_images/A.jpg</link>
<media:thumbnail url="pl_thumbs/A.jpg"/>
<media:content url="pl_images/A.jpg"/>
</item>
.
.
.

<item>
<title>Z.jpg</title>
<link>pl_images/Z.jpg</link>
<media:thumbnail url="pl_thumbs/Z.jpg"/>
<media:content url="pl_images/Z.jpg"/>
</item>
</channel>
</rss>
圖形的資料放置 item 間,<title>指圖形的抬頭,<link>指圖形的url位
置,<media:thumbnail>指小圖的url位置,<media:content>指圖形的url位置,
所以如果有很多圖形的話,就代表會重覆很多item 標籤,記得檔案要用utf-8編號。

2.第二步:在網頁上放置程式碼,放在<head>中間,PicLens.htm

<link rel="alternate" href="photos.rss"
type="application/rss+xml" title="" id="gallery" />
<script type="text/javascript"
src="http://lite.piclens.com/current/piclens.js"></script>

3.第三步:更改網頁html code,PicLens.htm
如果第一步的標籤
<link>pl_images/A.jpg</link>
是如此的話,html code 就要改成

<a href="pl_images/A.jpg"><img src="images/A.jpg"></a>


其實這樣即可,但是如果沒裝 PicLens 外掛時,要可以跑基本的 特效時就要再加其他的code。

4.沒裝 PicLens時,在body 內的code:

<a href="javascript:PicLensLite.start();">Start Slideshow
<img src="http://lite.piclens.com/images/PicLensButton.png"
alt="PicLens" width="16" height="12" border="0"
align="absmiddle"></a>



2 意見:

匿名 提到...

版主大哥...我還是不懂耶...我也想把我的BLOG用PICLENS,但是我我還是有看沒有懂,可以用個範例給我看嗎?因為我真的看不懂HTML 標記這些東西

麻瓜 提到...

to 匿名:
我上面有範例的程式,在最上面有個"PicLens建立的範例下載:PicLens 下載"