技术·人生

[javascript][wordpress插件]在当前窗口中打开大图片[8.28更新]

目录：

• 摘要
• 需求说明
• 需求分析
• 查看效果
• 使用方法
• 存在的问题

[摘要]
由于网页布局的限制，有时候在文章中贴的图片并不能放置原始尺寸的图片，就需要提供一种方式展示原始大图。解决的一个方法是点击后新开窗口展示，但是我不太喜欢这个方法，原因是新开窗口的意义不大，仅仅是要看一张图片而已，另外一个方法就是在当前窗口中显示大图，这就是本文写的内容。当然了，目前互联网上已经有很多这方面成熟的作品，这里我只是自己动手做一下。

[需求说明]
1、点击后在当前窗口打开
2、为了突出显示图片且避免影响其他内容，最好在大图下加阴影层挡住其他部分
3、点击大图可以关闭
[需求分析]
就以上几点要求来说，初步定为设计3个div，一个是文字说明div,放在最上层,一个大图展示div，放在文字说明的下方，第3个就是阴影层，放在最下面。
为了显示大图，需要知道大图的url，然后还要获得它的原始尺寸。
网页里用于展示的图片可能是原图设定width和heigth了之后的图，也可能是使用了新的小替换图片，针对两种情况，我们提供onclick函数为showPic_4nothing(imgNode)，如果当前显示的是大图片的thumbnail图，则需要传递大图片的url地址，如果是另外一种情况，则需要传递该img节点。这样，我们就可以获得大图的尺寸了。
为了让阴影层挡住下面的部分，其position设为fixed.

进一步分析，资源是准备够了，下面就是要设置图片的显示位置。
我希望，大图居中显示。那么首先要获得当前浏览器的可用区域或当前滚动的偏移量。然后要知道图片的原始尺寸。如果图片尺寸超过了可用区域，则按比例缩放图片。
[查看效果]
用鼠标单击下面的大图(如果网速较慢，则需要一定时间才能显示出来)

[使用方法]
具体的代码我就不分析了，有兴趣的自己研究。如果希望使用它当作wordpress插件的话，则按以下几步安装和使用：
1、下载picplugin_4nothing_net.zip
2、解压后上传到/wp-content/plugins 目录下
3、从网站blog管理后台-插件里激活插件mage show plugin
4、写文章时在图片里添加代码
示例一:参数为节点

实例二：参数为图片地址

[存在的问题]
图片较大时，加载慢且此时无任何提示。需要更改这一问题，但我暂时不会解决它。有兴趣的自己动手解决，也算是练练手，人那，不能总是等现成的。
此问题已经解决，增加了一个loading画面