让emlog使用Picasa相册

无聊到处瞎逛发现了这篇文章,觉的不错,就折腾一下看看效果,演示Demo

木木木木那里有具体讲了。。我就随便写一些咯

1、先复制以下代码保存为为picasa.js

  1. jQuery(document).ready(function($){  
  2. var name = "fivemu" //修改成你的Google用户名  
  3. var numx = 16//每页显示相册数量  
  4. var top= $(’#navi’).offset().top-20//页面刷动到分页,可修改  
  5. $body=(window.opera)?(document.compatMode=="CSS1Compat"?$(’html’):$(’body’)):$(’html,body’);var href="https://picasaweb.google.com/data/feed/api/user/"+name;$.getJSON(href+"?fields=openSearch:totalResults&alt=json&callback=?",function(c){c=parseInt(c.feed.openSearch$totalResults.$t/numx)+1;for(var b=1;b<=c;){$("#navi").append("<a href=’"+b+"’> P "+b+" </a> >> ");b++}$("#navi a").eq(1).addClass("current")});  
  6. $("#navi a").live("click",function(){$("#items").fadeOut(500);$(this).addClass("current").siblings().removeClass();var c=$(this).attr("href")-1;$.getJSON(href+"?start-index="+(numx*c+1)+"&max-results="+numx+"&fields=entry(title,gphoto:id,gphoto:numphotos,media:group(media:thumbnail))&alt=json&callback=?",function(b){$("#items").empty();$body.animate({scrollTop:top},400);$(b.feed.entry).each(function(g,d){var f=d.title.$t,e=d.gphoto$id.$t,n=d.gphoto$numphotos.$t,h=d.media$group.media$thumbnail[0].url;$("#items").append("<div class=’item’><div class=’thumb’><img src=’"+  
  7. h+"’ id=’"+e+"’/><br /><span>"+f+" {"+n+"}</span></div></div>")});$("#items").fadeIn(400)});return false});$("#navi a").click();  
  8. $(".thumb img").live("click",function(){$("#items").fadeOut(500);var c=$(this).attr("id");$.getJSON(href+"/albumid/"+c+"?fields=entry(media:group(media:content,media:title))&alt=json&callback=?",function(b){$("#items").empty();$body.animate({scrollTop:top},400);$(b.feed.entry).each(function(g,d){a=d.media$group;var f=a.media$title.$t,e=a.media$content[0].url;$("#items").append("<div class=’item’><div class=’thumb-1’><a href=’"+e+"?imgmax=800’><img src=’"+e+"?imgmax=118’/></a><br /><span>"+f+"</span></div></div>")});  
  9. $("#items").fadeIn(500);$(".thumb-1 a:has(img)").slimbox()});return false});  
  10. });  

2、复制以下代码保存为为slimbox2.js

  1. (function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w(’<div id="lbOverlay" />’)[0],a=w(’<div id="lbCenter" />’)[0],G=w(’<div id="lbBottomContainer" />’)[0]]).css("display","none"));g=w(’<div id="lbImage" />’).appendTo(a).append(p=w(’<div style="position: relative;" />’).append([I=w(’<a id="lbPrevLink" href="#" />’).click(B)[0],d=w(’<a id="lbNextLink" href="#" />’).click(e)[0]])[0])[0];c=w(’<div id="lbBottom" />’).appendTo(G).append([w(’<a id="lbCloseLink" href="#" />’).add(H).click(C)[0],A=w(’<div id="lbCaption" />’)[0],K=w(’<div id="lbNumber" />’)[0],w(’<div style="clear: both;" />’)[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);  

3、然后新建一页面,假设缩略名为为photo,复制以下代码为photo.php

  1. <div id="navi"><a href="1" style="display:none;"></a></div>  
  2. <div id="items"></div>  

4、在你的css里加入下面的css

  1. #navi {margin-top:2em;text-align:center;}  
  2. #navi a{padding:5px;margin:0 10px;}  
  3. #navi .current{text-shadow:#AAA 1px 1px 1px;}  
  4. #items{display:none;}  
  5. .item{margin:20px 0 20px 42px;text-align:center;display:inline-block;}  
  6. .item img{padding:2px;border:1px solid #aaa;-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;box-shadow:rgba(0,0,0,.2) 0px 0px 5px;cursor:pointer;}  
  7. .item span{display:block;height:18px;width:118px;overflow:hidden;}  
  8. .thumb,.thumb img{width:120px;height:80px;}  
  9. .thumb-1{width:118px;height:118px;display:table-cell;vertical-align:middle;}  
  10. .thumb-1 img{vertical-align:middle;}  
  11. /* SLIMBOX2 */  
  12. #lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}  
  13. #lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflowhidden;background-color:#fff;}  
  14. .lbLoading{background:#fff url(images/loading.gif) no-repeat center;}  
  15. #lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}  
  16. #lbPrevLink,#lbNextLink{displayblock;positionabsolute;top:0;width:50%;outline:none;}  
  17. #lbPrevLink{left:0;}  
  18. #lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}  
  19. #lbNextLink{rightright:0;}  
  20. #lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}  
  21. #lbCaption,#lbNumber,#lbCloseLink,#lbBottom{display:none;}  

5、调用上面的两个js,即是:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
  2. <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/slimbox2.js"></script>  
  3. <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/picasa.js"></script>  

 

您可以选择一种方式赞助本站

目前评论:14   其中:访客  9   博主  5

  1. 2010年10月01日 19:44  沙发
  2. 2010年10月01日 18:55  板凳
  3. 2010年10月01日 13:31  地板
  4. 2010年10月01日 19:22  4楼
  5. 2010年10月01日 11:45  5楼
  6. 2010年10月01日 14:44  6楼
  7. 2010年10月01日 19:36  7楼
  8. 2010年10月01日 19:26  8楼
  9. 2010年10月01日 18:23  9楼
  10. 2010年10月01日 18:32  10楼
  11. 2010年10月01日 16:50  11楼
  12. 2010年10月01日 13:48  12楼
  13. 2010年10月01日 10:24  13楼
  14. 2010年10月01日 10:58  14楼
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: