2006/02/21

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

這是使用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內就大功告成了。


 


<!-- flickr photo -->
<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&amp;count=6&amp;display=random&amp;name=0&amp;size=square&amp;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>
<!-- flickr photo end-->

1 則留言:

D.A.Y. design studio/每日設計 提到...

您好
假若我想要向你一樣的圖片效果
不知道程式碼可否教我如何修改
謝謝你