WordPress 原创插件：PicasaWeb

此插件用来在文章或者页面插入一个PicasaWeb相册，以短代码形式，中间数值为相册链接的ID。

 
[picasaweb]20112[/picasaweb]

效果如下：

WordPress官方下载：PicasaWeb for WordPress

福利，代码版：

1.功能代码丢主题functions.php循环内

 
function picasaweb($atts, $content=null){
 
	return '<div id='.$content.' class="picasaweb" num="1" name="您的Google用户名"  wid="图片最大宽度限制"><div class="navi-l"></div><p class="items"></p><div class="navi-r"></div></div>';
 
}
 
add_shortcode('picasaweb','picasaweb');

如果像我只在一个地方，那就直接上html代码，我就是这么干的：

 
<div id='相册链接ID' class="picasaweb" num="1" name="您的Google用户名"  wid="图片最大宽度限制"><div class="navi-l"></div><p class="items"></p><div class="navi-r"></div></div>

当然，这个html就不受程序限制咯～

2.CSS和JS，还有一张图片，图片和css放同一级。分享一个特定文章才调用的PHP代码，我就是这么干的：

 
<?php if (is_single('特定日志ID的数值,另一篇日志中间加小逗号')) { ?>
 
<link rel="stylesheet" type="text/css" href="http://.../picasaweb.css" />
 
<script type="text/javascript" src="http://.../picasaweb.js"></script>
 
<?php } ?>

当然上段代码得放在jQuery库文件之后，啥？怎么加载jQuery库？我#￥%……&×

3.如果童鞋仅喜欢此相册展示效果，这个当然也是么问题的，看代码：

HTML代码段，一些div，img一条一条插入即可～

 
<div class="picasaweb" num="1">
 
<div class="navi-l"></div>
 
<p class="items">
 
<img src="http://lh3.googleusercontent.com/_65ZfNm-tR48/TVYm30hRsXI/AAAAAAAAEVs/Poc7tn3N9bY/sy-1.jpg?imgmax=640">
 
<img src="http://lh4.googleusercontent.com/_65ZfNm-tR48/TVYm4AY9XcI/AAAAAAAAEVw/_SHY0xTC-f8/sy-2.jpg?imgmax=640">
 
<img src="http://lh5.googleusercontent.com/_65ZfNm-tR48/TVYm4HvyJ6I/AAAAAAAAEV0/RHU0pfP4goM/sy-3.jpg?imgmax=640">
 
</p>
 
<div class="navi-r"></div>
 
</div>

CSS和图片这还得自己调用或者集成，jQuery控制代码得改改，与Picasa相册展示两者不可兼得，对象冲突：

 
jQuery(document).ready(function($){
 
//By ImMmMm.com
 
$('.picasaweb .items').find("img:first").fadeIn(400);
 
 
 
$(".navi-r").click(function(){
 
	var nums=$(this).prev('.items').children('img').size(),num=$(this).parent('.picasaweb').attr('num');
 
	if(num < nums){
 
		$(this).prev('.items').children('img').hide().eq(num).fadeIn(400);
 
		num++;
 
		$(this).parent('.picasaweb').attr('num',num);
 
	}else if(num=nums){
 
		alert('最后一张！')
 
	}
 
	return false
 
});
 
 
 
$(".navi-l").click(function(){
 
	var num=$(this).parent('.picasaweb').attr('num');
 
	if(num > 1 ){
 
		$(this).next('.items').children('img').hide().eq(num-2).fadeIn(400);
 
		num--;
 
		$(this).parent('.picasaweb').attr('num',num);
 
	}else if(num=1){
 
		alert('第一张！')
 
	}
 
	return false
 
});
 
 
 
});

呼，还是纯代码折腾来得给劲！～

zrqx008
二月 27, 2011 21:51:21 #1

sf

回复
cgrabbit/兔了吧唧网
二月 27, 2011 22:10:22 #2

木木开始跳入制作插件的行列中了。。。

回复
- 林木木
  二月 28, 2011 13:22:13
  
  刚学会有激情～
  
  回复
joyla
二月 27, 2011 22:35:22 #3

不错哦！

回复
老王
二月 27, 2011 22:36:22 #4

这个不错哦~

回复
囧啊囧
二月 27, 2011 22:52:22 #5

围观

回复
小闇
二月 27, 2011 22:56:22 #6

木木開始向插件之路進發了

回复
- 林木木
  二月 28, 2011 13:24:13
  
  雄起一把而已～
  
  回复
阅微博客
二月 27, 2011 22:59:22 #7

第二枚插件了？高效。。

回复
- 林木木
  二月 28, 2011 13:25:13
  
  马上会出第三枚～
  
  回复
Solo
二月 27, 2011 23:07:23 #8

看起来很强劲.

回复
优窝得
二月 27, 2011 23:11:23 #9

我一直是对WordPress恐惧，做了一个博客很久了里面的功能还没弄明白。

回复
- 林木木
  二月 28, 2011 13:25:13
  
  会写日志就OK～
  
  回复
gsid
二月 27, 2011 23:21:23 #10

强淫木，支持一个！

回复
- 林木木
  二月 28, 2011 13:25:13
  
  多谢多谢～
  
  回复
Dianso
二月 28, 2011 01:31:1 #11

一直是用本地图片的飘过

回复
- 林木木
  二月 28, 2011 13:26:13
  
  其实这个展示效果也可以用在其他图片集上的～
  
  回复
wmtimes
二月 28, 2011 02:07:2 #12

最近好像一直在出作品啊。支持啊。这个插件也很不错。

回复
- 林木木
  二月 28, 2011 13:28:13
  
  周末周末嘛～
  
  回复
瞿胜佳
二月 28, 2011 07:32:7 #13

这个可以有

回复
老宋博客
二月 28, 2011 08:50:8 #14

木木V5，这个真不错，如果大图下面能加入缩略图，可以跨图选择就更完美了！

回复
- 林木木
  二月 28, 2011 13:30:13
  
  可以实现，时间有限，记录先～
  
  回复
  - 老宋博客
    三月 2, 2011 10:03:10
    
    下面加个导航也可以，可以很醒目的知道共多少张图片，现在浏览第几张
    
    回复
子夜星辰
二月 28, 2011 10:16:10 #15

插件，一直不懂……也就折腾点CSS

回复
- 林木木
  二月 28, 2011 13:30:13
  
  一点点来，条件成熟了就简单了～
  
  回复
  - 子夜星辰
    二月 28, 2011 14:29:14
    
    刚被人泼冷水，而且还是个前两天才交流过折腾心德的人，哎……
    
    回复
    - 林木木
      二月 28, 2011 14:44:14
      
      自己喜欢就好～
      
      回复
小羿
二月 28, 2011 11:27:11 #16

这个要强顶

回复
A.shun
二月 28, 2011 11:58:11 #17

插件制造机木木

回复
Arun
二月 28, 2011 12:47:12 #18

Wonderful plugin. Thanks for PicasaWeb plugin.

回复
Maplews
二月 28, 2011 12:50:12 #19

棒哇！

回复
aunsen
二月 28, 2011 14:16:14 #20

木木越来越牛逼了！一个大牛缓缓升起

回复
- 林木木
  二月 28, 2011 14:45:14
  
  牛X是我的追求～
  
  回复
tanst
二月 28, 2011 16:34:16 #21

谷歌的服务让人放心，
今天看主页居然是李白的诞辰1310周年，看来谷歌没忘咱俩华人啊。

回复
奚少
二月 28, 2011 17:15:17 #22

好东西，图片是国内主机的鸭梨啊，小水管和小空间…

回复
Arsun
二月 28, 2011 18:12:18 #23

漂亮~能不能再增加添加单张图片的功能啊？

回复
- 林木木
  二月 28, 2011 18:33:18
  
  单张？那不就直接插入图片撒～
  
  回复
kita
二月 28, 2011 20:01:20 #24

這個刷插件的速度好恐怖的說。。。

回复
mybg
二月 28, 2011 20:30:20 #25

强大，想改弄到typecho上用肯定不错。

回复
- 林木木
  二月 28, 2011 20:42:20
  
  代码版可以直接转的，毕竟是基于jQuery的～
  
  回复
  - mybg
    二月 28, 2011 21:30:21
    
    忘了问了，怎么取得相册链接ID 的呢？
    
    回复
    - 林木木
      二月 28, 2011 21:33:21
      
      文章图片，比如我的一个相册地址为：……google.com/fivemu/20112# ，相册链接id就是20112～
      
      回复
- 林木木
  二月 28, 2011 21:01:21
  
  已更新代码版，看看吧～
  
  回复
  - mybg
    二月 28, 2011 21:17:21
    
    好的，这样我可以试试，相册展示和文章插入单个相册都能实现了，多谢多谢！
    
    回复
Leo.N
二月 28, 2011 20:38:20 #26

这个好

回复
闲云野鹤
二月 28, 2011 20:54:20 #27

能不能外链skydrive的图片或者下载的链接，以前记得任大哥写过，不过每次都要那么折腾很麻烦。要是弄成插件了，方便多了就！

回复
- 林木木
  二月 28, 2011 21:02:21
  
  skydrive的图片貌似链接不固定，固定的图片地址还得自己解析的……
  
  回复
- 林木木
  二月 28, 2011 21:06:21
  
  如果单是指使用这个效果那到是行的，分离一下就OK了～
  
  回复
  - 闲云野鹤
    二月 28, 2011 21:08:21
    
    求方法
    
    回复
    - 林木木
      二月 28, 2011 21:33:21
      
      看文章最后那段3～
      
      回复
无冷
二月 28, 2011 21:42:21 #28

Picasa好像被墙了，打不开啊

回复
- 林木木
  二月 28, 2011 21:47:21
  
  加s～
  
  回复
Afio
二月 28, 2011 22:42:22 #29

爱死这个插件了【最近Picasa的”无限小图片存储”太赞了！！！】

回复
- 林木木
  二月 28, 2011 23:04:23
  
  放了2年多的图片，才3MB～
  
  回复
Paran
三月 1, 2011 00:55:0 #30

还是喜欢纯插件点击启用就可

回复
- 林木木
  三月 1, 2011 11:21:11
  
  不过插件多了，也会造成页面加载很多东西……
  
  回复
coldplains
三月 1, 2011 09:58:9 #31

支持了~昨天就在群里说最好有能输出picasa的~~哈哈感谢

回复
- 林木木
  三月 1, 2011 12:03:12
  
  恩，就是方便插入相册的～
  
  回复
kredarmy
三月 1, 2011 10:45:10 #32

功能很多啊！

回复
亦白
三月 1, 2011 23:03:23 #33

这个有意思~

回复
落伍啦
三月 2, 2011 09:31:9 #34

不错的，挺好

回复
coldplains
三月 2, 2011 16:24:16 #35

木木要是能连带着一起输出picasa中照片的备注就更完美了

回复
- 林木木
  三月 2, 2011 23:21:23
  
  OK，实现～
  
  回复
  - coldplains
    三月 2, 2011 23:34:23
    
    额好吧灰常好但是能告诉我怎么实现的么？乃的插件也没更新啊~~~
    
    回复
    - 林木木
      三月 2, 2011 23:39:23
      
      现在后台应该已经提示更新了～实现方法直接研究插件源码咯～
      
      回复
      - coldplains
        三月 2, 2011 23:42:23
        
        好吧我这暂时没提示支持乃的插件希望越来越强大吧~~~晚安
        
        回复
        
        林木木
        三月 2, 2011 23:44:23
        
        这儿已经1.0.2了 http://wordpress.org/extend/plugins/picasaweb-for-wordpress/
        可能后台推送会慢一些
        
        回复
Kimcool
三月 2, 2011 23:29:23 #36

越来越完善了。。不错

回复
- 林木木
  三月 2, 2011 23:40:23
  
  借助于强大的GoogleAPI撒～
  
  回复
西门
三月 3, 2011 00:06:0 #37

建议第一张和最后一张那里，不要alert，直接不显示左边的箭头和右边的箭头，没得点，用户自然知道是第一张或者是最后一张。

回复
- 林木木
  三月 3, 2011 00:09:0
  
  恩。记下，之前要想做出这样，不过alert来得简单些……
  
  回复
afterstory
三月 6, 2011 14:35:14 #38

木木的博客速度好给力……有哪些方面诶？

回复
- 林木木
  三月 6, 2011 14:51:14
  
  首先是主机给力，然后我开了插件 WP Super Cache
  
  回复
  - afterstory
    三月 6, 2011 14:55:14
    
    还是小张的主机呗？super cache~好吧，回去继续开上~
    
    回复
-jp
三月 7, 2011 02:56:2 #39

Hello, Is there any possibility to make this plugin work also with albums that are not visible on whole internet (visibility: “Anyone with the link”)? It would be fantastic if it would work.

回复
- 林木木
  三月 7, 2011 11:23:11
  
  Is currently not feasible.
  
  回复
万戈
三月 9, 2011 13:07:13 #40

有个疑问，如果是 google apps 用户呢？不是以 @gmail.com 结尾的

回复
- 林木木
  三月 9, 2011 23:09:23
  
  picasa登录的时候用什么用户名的？
  
  回复
  - 万戈
    三月 9, 2011 23:12:23
    
    我的 google apps 帐号，也就是我的邮箱 i@wange.im
    
    回复
    - 林木木
      三月 10, 2011 22:36:22
      
      直接输入 i@wange.im 也是行的，我刚试了试输入Gmail也是OK的，我把插件后面@gmail.com删了去～
      
      回复
Aklis
三月 10, 2011 12:21:12 #41

占座学习

回复
Chen.
三月 12, 2011 16:22:16 #42

这个挺不错的

回复
elaphent
三月 20, 2011 12:53:12 #43

好实用的插件，希望Picasa不要再悲剧了

回复
- 林木木
  三月 21, 2011 21:00:21
  
  好服务总归要悲剧的～
  
  回复
马啃菠箩
三月 25, 2011 18:54:18 #44

太强大了，已经用上了，赞啊赞

回复
coldplains
三月 25, 2011 21:57:21 #45

貌似插件又更新了~~~照片备注显示更漂亮了哈哈支持

回复
Ismael
三月 27, 2011 06:21:6 #46

Hi your Plugin is Amazing, Is there any possibility to make thumbnails under Slideshow

tnx

回复
- 林木木
  三月 27, 2011 08:26:8
  
  Will be updated in time to allow
  
  回复
Ismael
三月 27, 2011 13:56:13 #47

林木木 Thank you, waiting

回复
Dennis
四月 4, 2011 20:00:20 #48

Great Plugin!

How can I get the arrows (left / right) inside the photo? Like your example.
My arrows are OUTSIDE of the image.

回复
- 林木木
  四月 4, 2011 21:28:21
  
  Ths！
  Articles about the CSS width is set.
  
  回复
Ismael
四月 8, 2011 02:41:2 #49

Hi

Did you tested picasaweb plugin in IE 6, I tested and is not working!.

Cheers

回复
- 林木木
  四月 8, 2011 15:08:15
  
  Give IE6 it, even Microsoft themselves to give up!
  
  回复
使用中的人
四月 11, 2011 19:19:19 #50

意見而已:
應該提供縮圖的效果
因為可以選擇性地選擇想觀看的圖片, 也不用次次按下一張吧

不過還要多謝的你好插件

回复
- 林木木
  四月 11, 2011 22:59:22
  
  恩，已经有朋友反馈过，我也记下来，有时间会更新～
  
  回复
Raimund
七月 3, 2011 20:55:20 #51

Hello,

your plugin works as fine as expected, which I appreciate *very* much!
There is only a quite minor thing: the implementation via wp_footer hook throws a HTML validation error = element “link” is not allowed where it’s called (at the end of the page before closing body-tag).
Any advise for eliminating that?

Thanks in advance

Raimund

回复
胡一刀
十二月 5, 2011 10:41:10 #52

是不是因为picasa的链接形式改掉了？我无法用你这个插件唉

回复
- 林木木
  十二月 6, 2011 19:52:19
  
  我测试插件代码运行正常，已经把相册的html代码加入到页面中来了，应该是墙的关系～
  后台用户名填正确，然后想这样的链接…/109948552279273718837/RobinsonClubMaldives短代码用的是RobinsonClubMaldives。
  
  回复
  - 胡一刀
    十二月 6, 2011 22:31:22
    
    好的明儿我再去试一下
    
    回复

木木木木木

WordPress 原创插件：PicasaWeb

发表评论取消回复

发表评论 取消回复

发表评论取消回复