PageCookery:为照片墙增加灯箱和透明效果

2011-01-31

3分钟阅读时长

提醒：本文最后更新于 4818 天前，文中所描述的信息可能已发生改变，请谨慎使用。

不是很喜欢PageCookery默认的照片墙效果，很早之前用了@ideeland同学的方法换了一个透明效果，感觉还不错。这两天又想着搞一个LightBox(灯箱)效果，即点击小图片后可以用LightBox效果浏览大图片。预览效果请见：传送门

PageCookery里头Flickr照片墙是通过CURL函数获取最近上传的json数据来实现的，比较可以的是获取过来的json数据只有小图地址而没有大图地址。所以我就打算自己用Flickr API写过一个。经试验发现，这里需要使用flickr.people.getPublicPhotos和flickr.photos.getSizes两个API，前者获取最近上传照片的信息，后者则获取特定照片的全部尺寸地址。

将下列代码保存成photos.html替换掉template/photos.html

{template header}
<style type="text/css">
	@import 'css/jquery.lightbox.css';
	ul.photos li {
	overflow:hidden;
	/*根据这个宽度和长度控制你单行显示图片的数量，如果总长是600px，这里设置为100px的话那么你单行就能放6张图片，可以根据自己的情况做改变。*/
	/*实在计算不来的可以慢慢试出最佳值*/
	width:149px;
	height:149px;	
	}
	ul.photos li a {
  filter:alpha(opacity=70);
  opacity:0.7;
  -moz-opacity:0.7;
  -webkit-opacity:0.7;	
  }
  ul.photos li a:hover {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
  }
</style>
<script type="text/javascript" src="javascript/jquery.lightbox.js"></script>
<script type="text/javascript">
	$(function() {
		$('ul.photos li a').lightBox({fixedNavigation:true});
	});    
</script>
<div id="main">	
<ul class="photos">
 <php>
 $key= ""; //输入你申请的key,请到"http://www.flickr.com/services/apps/create/noncommercial/?"这里申请你自己的非商用key
 $user_id = ""; //输入你的账户id,请到"http://www.flickr.com/services/api/explore/?method=flickr.photos.getRecent"这里查看你的id
 $per_page = ""; //输入你要显示的照片的数量
 $data = file_get_contents("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=" . $key . "&user_id=" . $user_id . "&per_page=" . $per_page );
 $object = simpleXML_load_string($data);
 $photo = $object -> photos -> photo;
 foreach ($photo as $each) {
 	 $photo_m = 'http://farm' . $each['farm'] . '.static.flickr.com/'	. $each['server'] . '/' . $each['id'] . '_' . $each['secret'] . '_m.jpg';
 	 $photo_b = 'http://farm' . $each['farm'] . '.static.flickr.com/'	. $each['server'] . '/' . $each['id'] . '_' . $each['secret'] . '_b.jpg';
 </php>
 <li><a href="{$photo_b}"><img src="{$photo_m}" /></a></li>
 <php>
 }
 </php>
</ul>
<div style="clear:left"></div>
</div>
{template footer}

需要填写的东西我已经在代码里写好了，大家填写上就好了。可能美观上有些问题，大家再自己根据我这个修改一下自己的样式表就可以了。如有不懂的地方也可以留言，我会尽量帮忙的啦~ 其实我自己的上面是把php语句function成了一个函数，然后再html模板中直接引用就好啦~嘿嘿，发现我最近真的很喜欢这样做，function_microblog.php里已经有好几个自定义函数了。嘿咻~！然后顺便想说的是更换了一个新的icon，没别的意思，就像让大家看一下，结束！

PS:搞完这个之后，我发现Flickr有最近更新的RSS订阅，XML里小图地址大图地址各种齐全，连API,USER_id什么的都不要，各种给力。于是我就这么的悲催了