phZoom 最近更新: 2012.1.6 • 当前版本: 1.292 Final • WP插件(By Ben)当前版本: 1.292
phZoom 是一个轻量级看图插件, 基于jQuery 1.4+.
phZoom 拥有苗条的身材(仅3k多), 以及与众不同的动画特效.
Download phZoom:Wordpress PluginjQuery Plugin on GitHub
Demo One
左右方向键切换图片, 点击页面随时退出大图, 点击大图切换上/下一张
Demo Two
自动预加载相邻大图
Demo Three
滑鼠移动到图片左右可显示超出荧幕部分
How to use phZoom ↓
1. 加载jQuery库(需1.4+)
2. 加载phZoom.css, 并请确保两颗小图标与css文件同级目录.
3. 加载phZoom.js, 并请确保其加载于jQuery库之后.
4. 使用以下代码调用phZoom:
1 2 3 4 5 6 7 8 | // 调用接口, 其中$node为图片链接的jQuery选择器 $node.phzoom({ // 此处为设置项, 可留空. 具体见下面Extend. }); // 建议将调用代码包在一个DOM Ready方法内, 如: $(function(){ // 此处为上面的调用代码 }); |
Extend phZoom ↓
phZoom拥有以下设置选项. 当然, 即使不进行任何设置, phZoom也可以很好地工作.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 以下值为插件设置选项的默认值, 大括号结束前不要逗号 { layOpacity:0.7, // 遮罩层不透明度应为0到1之间的某个小数, 默认0.7即为70%不透明 layDur:300, // 遮罩层渐显的时间, 纯数字, 单位毫秒 animDurA:300, // 图片从原位飞到荧幕中间的时间, 纯数字, 单位毫秒 animDurB:300, // 图片从小到大的变化时间, 纯数字, 单位毫秒 navColor:'#cf0', // 上/下一张按钮的文本颜色, 需要引号 capColor:'#cf0', // 大图底部标题与索引的文本颜色, 需要引号 prevText:'Prev', // 上一张按钮的显示文本, 需要引号 nextText:'Next', // 下一张按钮的显示文本, 需要引号 limitWidth:false, // 默认为false, 大图使用原始宽度; 若设为true, 特大图将不会宽于窗口 returnOrigin:true // 默认为true, 此时返回初始对象集合; 若设为false, 则仅返回包含img元素的对象集合 } |
最后解释一下returnOrigin设置项, 加入returnOrigin是为了让链式操作更自由:
例如$('a').phzoom({...})这样进行调用, 当设为true时, 返回$('a'); 当设为false时, 返回$('a:has(img)')
Click Here To View The Changelog ←
目前phZoom仍可能存在未知的BUG, 如果你对phZoom有任何建议或意见, 敬请留言指出, 这将对我非常重要, 感谢 
原主题已自带图片特效，不知道启用本插件会不会冲突。
Ping
Back
[...] phZoom For 5D6D 超轻量级看图插件 2012.04.04 / 标签: / 分类: 5D6D,Discuz! Leots phZoom 最近更新: 2012.1.6 • 当前版本: 1.292 Final • WP插件(By Ben)当前版本: 1.292 phZoom 是一个轻量级看图插件, 基于jQuery 1.4+. phZoom 拥有苗条的身材(仅3k多), 以及与众不同的动画特效. phZoom 原创作者：phoetry [...]
如果图片高度过大 第一次点击能正常有上下的滚动条 第二次点击就没有了
好看！！！