zoomimage 展示图片
嫌弃前一段时间使用的 Lightbox 太过笨重，并且我所要求的显示特效也并不高，简单的放大图片就能满足我了，因此寻思找一款较为轻便的工具来展示文章中的图片，而如果能让我较为简单、方便地自行定义当然更好。
既然已经加载了 jQuery ，本着要充分利用已有资源的原则，寻找的方向自然就是基于 jQuery 的优先，尝试了 fancybox , prettyPhoto 等几个优秀的插件之后，最终还是决定使用相比较起来更为简单的 zoomimage ，能满足我需要的功能就好，给我其他再多再炫的效果我也用不上！
在官方网站上就有演示和使用说明，很是符合我的要求，不是WP的插件，使用也很简单。加载上CSS和JS，然后对图片设置一个类属性或者rel属性，最后初始化一下功能就可以正常工作。
加载CSS和JS无需细说，大家都知道，不过值得注意的是自己可能需要在CSS中修改一下图片的地址，以便能正常显示效果。另外就是给图片添加class或者rel属性了，难道是以后自己每贴一张图片都要手动地去修改源代码添加？况且还有以前的图片呢，也不至于再去编辑文章修改吧，最主要的是，保不准以后我又换了一个图片展示工具呢，如此这般再来一遍？没这个闲心去折腾的.. 
好在有伟大的 jQuery ,使用脚本在页面加载之后自动给图片链接添加一个rel属性，这样就是一劳永逸的事情了，我以后在贴图的时候不用手动地去编辑代码，以前的图片也能正常使用效果，即使以后我更换了插件，那么也只是修改脚本的问题，不对图片产生影响。又考虑到图片显示 caption 需要链接 a 中包含 title 标签，不过我在贴图的时候怎么可能去给图片的链接也加上 title ? 好在，依旧可以简单使用用 jQuery 来搞定（同时也是为了解决使用木木“美妙的标题提示”后图片没有title提示的问题），提取图片的title再送给包住它的链接就好了！
不再废话，在footer.php中添加上以下代码（包含我使用的zoomimage参数）
- <script type="text/javascript">
- jQuery(document).ready(function($){
- $('.content img').each(function(){
- var ti = $(this).attr("title");
- $(this).parents("[href$='.png']").attr({rel:"qi",title:ti});
- });
- $(".content a[rel^='qi']").zoomimage({
- centered:true,
- border:20,
- hideSource:true
- });
- });
- </script>
然后就一切搞定了~，事实上大部分的插件工作要求都差不多，解决给图片添加rel问题之后，根据自己需要选择插件就好了。
本文链接: http://isouth.org/archives/246.html , 转载请注明出处，此外还可以订阅我。
相关日志 Relate Posts
“zoomimage 展示图片”16条留言
Pingbacks/Trackbacks
-
[...] (GB级)先标记一下. 另外过程中发现一些文章,推荐一下: 起衣的:zoomimage 展示图片, 衍生追溯到:jquery图片缩放插件:zoomimage.js, [...]
-
[...] 实现方法：起衣：zoomimage 展示图片 [...]
对水水来说，有范例有图片比较有爱些－x-
@littlewater 最近几篇文章内的图片都可以点的哇~，以后要走小图片路线了，可以提高页面加载速度
@起衣
的确木有错=x=，最近回帖的时候发现有HTML标记=0=！
@littlewater 有这个标记就可以给回复的人发邮件通知了~
@起衣
虽然对于排版还是有些不太习惯…………
@littlewater 嘿嘿，习惯一下
@起衣
嗯=x=
能够用编程的方式调整BLOG还是很牛的呐……
@littlewater 自己需要的东西还是得自己动手才行呐~
1.现在rss点击已经过不来了
2.什么破广告：
男性保健产品 用过都说好
恢复男性魅力，拒绝做“小白脸” 送货上门，货到付款，无效退款。
http://www.hj5199.com（苏州）微软大学生实训
微软软件技术实训 项目实战 软件工程师定制培养 输送就业
@dning1 哈哈，feedburner的那个地址被河蟹了，所以我现在在每篇文章的下面都插入了原文链接，点那个地址就可以直接过来叻~ ，文字广告嘛~~
貌似是png的图片，对于photoshop这种外链没后缀的，应该不行。
@zrqx008 没有后缀的倒是没有尝试，不过也许也可以呢（脚本得稍微改一点点）
试试去
@亿品元素