flickr配合javascript所做出來的滑動式相簿列

作者： mtchang 2月 21, 2006

這是使用www.flickr.com所提供的功能，配合javascript所做出來的滑動式相本。來源出處已經不可考，如果有人知道的話煩請告知。
flick是一間很新的公司，所提供的服務也非常的創新，他不以固定的容量限制會員的相本空間，每個會員每各月可以有20MB的相簿使用量，每個月月初flickr會將使用容量歸零，也就是說妳用越久相簿空間也就越大，另外他還提供tag的功能，使用這可以透過tag來找尋自己想看的照片。
flickr如此創新的服務於是在2005年初被yahoo公司買下，並在2005年8月提供了只需yahoo的帳號即可使用flickr的服務，所以各位可以使用自己的yahoo帳號登入flickr取得這個免費的相簿空間使用，就可以使用這個精美的相片滑動列了。
這個範例，使用不難請各位仔細閱讀完後，再行操作。

(1)http://www.flickr.com/ 首先請先連到flickr的網址，請使用你的yahoo帳號登入系統。(如果妳沒有yahoo 帳號請至yahoo申請一個)

(2)登入系統後，請先卻認妳的相簿有照片，如果沒有請使用upload photo選項上傳照片上去。
(3)如有有相片了，請從此頁面點選your photos 這個連結。

(4)進去後即是flickr的瀏覽畫面，請找到flickr badge這個連結，點選進入

(5)我們這個javascript其實是利用badge所產生的動態tag來得到相片的網址，所以我們現在目的要取得其動態產生的一組nsid，所以在這裡請選擇a flash badge然後點選下一步Next:choose photos

(6)接下來這個步驟，是設定你要產生的html的資訊及所要顯示的set集合，妳可以不理會他，直接Next:Color

(7)這個步驟是設定顯示的顏色妳也可以不理他，直接NEXT: preivew 及 get code

(8)這個步驟已經產生我們要的程式碼了，妳可以直接把這段程式碼貼到你的網頁上面，body和body之間...即可得到他示範網頁的顯示效果。

(9)但是我們要的是滑動的相片列，所以請從這段程式碼中找到底下類似的這串文字「86726444@N00」(這是我範例的文字串，你的應該是類似但不一樣)

(10)把底下的程式碼，貼到你的網頁前修改其中這段nisid之後的那串字「http://www.flickr.com/badge_code.gne?nsid=86726444@N00」，貼上在(9)中找到的那串文字串，替換成妳自己的相簿編號，如果妳沒有修改的話顯示的還是我的相簿。

(11)接下來把程式碼貼到網頁的body內就大功告成了。

<div id="randomphotos">
<script type="text/javascript">
// flickr's photo CSS setting
flickr_badge_background_color = "#000000";
flickr_badge_border = "10px solid #000000";
flickr_badge_width = "120px";
flickr_badge_text_font = "11px Arial, Helvetica, Sans serif";
flickr_badge_image_border = "1px solid #FFFFFF";
flickr_badge_link_color = "#FFFFFF";
</script>
<div id="photodock" style="valign:bottom;padding:5px;height:80px;" onmouseover="imgEnlarge(event)" onmouseout="imgNormal(event)"> <br />
<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=86726444@N00&count=6&display=random&name=0&size=square&raw=1">
// Flickr.com's photo nsid
</script>
</div>

<script type="text/javascript">
// the script to change image size
var org = 40;
var aft = 80;
var dockdiff = aft -org;
dock = document.getElementById("photodock");
dockimgs = dock.getElementsByTagName("img");
resettonormal();
function getMyTarget(evt){
if(!evt) var evt = window.event;
if (evt.target) obj = evt.target;
else if (evt.srcElement) obj = evt.srcElement;

if (obj.nodeType == 3) // defeat Safari bug
obj = obj.parentNode;
return obj;
}

function imgEnlarge(evt){
obj = getMyTarget(evt);

name = obj.nodeName;
if(name!="IMG" && name !="img"){
return true;
}
currentIndex = -1;
resettonormal();
for(i=0;i<dockimgs.length;i++){
if(dockimgs[i] == obj){
currentIndex = i;
break;
}
}
resize(currentIndex, aft, aft);
resize(currentIndex+1, org + dockdiff/2, org + dockdiff/2);
resize(currentIndex+2, org + dockdiff/10, org + dockdiff/10);

resize(currentIndex-1, org + dockdiff/2, org + dockdiff/2);
resize(currentIndex-2, org + dockdiff/10, org + dockdiff/10);
}

function imgNormal(evt){
obj = getMyTarget(evt);
if(obj.getAttribute("id") == "photodock"){
resettonormal();
}
}

function resize(idx, w, h){
if(idx < 0 || idx >= dockimgs.length) return;
var obj = dockimgs[idx];
if(obj==null) return false;

// for IE
obj.style.marginTop = "0px";
obj.style.width = w+"px";
obj.style.height = h+"px";
// end for ie;

obj.setAttribute("style", "margin-top:0px;width:"+w+"px;"+"height:"+h+"px;");
}

function resettonormal(){
for(i=0;i<dockimgs.length;i++){
// for IE
dockimgs[i].style.marginTop = "0px";
dockimgs[i].style.width = org+"px";
dockimgs[i].style.height = org+"px";
// end for ie;
dockimgs[i].setAttribute("style", "margin-top:"+dockdiff+"px;"+"width:"+org+"px;"+"height:"+org+"px;");
}
}

</script>
</div>