IMG SHOW BOX 延迟显示效果

imgshowbox是一个十分给力的照片显示工具，但是原版插件是点击产生特效。由于wordpress系统中本身集成了图片blog功能，因此如果点击显示特效就无法评论图片了。为了不缺失此功能特向原作者请教了插件如何显示。没想到作者这么热心回复了我的邮件，此插件show.js就是控制显示的主要文件。由于本人完全不懂js在实现特效的过程中还得到了朋友和同事们的帮助，特别感谢柯强同学实操性协助。现把实现方法记录一下以备以后不慎忘记或者文件丢失。

我的想法是既然图片不能点击，那么我鼠标移动到图片范围中，并且在3秒后，如果鼠标依然在图片范围中那么开始显示照片效果。否则忽略显示需求。想看效果？我的blog所有图片都可以哦~~

具体实现代码如下：

function foo(){
	//转换成函数写法
       var boxhtml="<div id='lightbox'><div id='bg'></div><div id='img_content'><div id='close' style='position:relative;'><a></a></div><div id='theimg'></div><div id='thetitle'></div></div></div>";
			//add the all div 添加div
			$("body").append(boxhtml);
			//var img_url=$(".imgshow").attr("src");
			//var img_alt=$(".imgshow").attr("alt");
			//var img_title=$(".imgshow").attr("title");
		$("#theimg").html("<img src='"+img_url+"' alt='"+img_alt+"' title='"+img_title+"'/>");
			$("#thetitle").html("<span>"+img_title+"</span>");
			
		
		//图片长宽比例ee. the ratio of image is ee. 
	//var ee=$(".imgshow").height()/$(".imgshow").width();    
        var window_h=$(window).height()/2;
		var window_w=$(window).width()/2;
		
		//显示层.show the img by lightbox
		$("#lightbox").fadeIn(50);
		//尺寸判断 judge and resize the size.
			if($("#theimg img").height()>(2*window_h-60))
			{
				$("#theimg img").height(2*window_h-60);	
				$("#theimg img").width(mh/ee);
			}
		var mh=$("#theimg img").height();
		var mw=$("#theimg img").width();
		
		$("#img_content").stop().animate({height:mh},500)	
		$("#img_content").animate({"margin-top":-mh/2-20+"px"},{queue:false})
		$("#img_content").animate({width:mw},700).animate({"margin-left":-mw/2-10+"px"},{queue:false});

		$("#lightbox,#close").click(function(){
		$("#lightbox").remove();
	});
}
var img_url;//特别注意不声明变量无法使用
var img_alt;
var img_title;
var ee;
jQuery(document).ready(function(){
//the range of this plugins,may be you should do some changes;你也许需要修改下面这行$(" ")内的作用范围；
$(".post-content img,.post-text img,.entry img,.wrap img.content img,.post img,.posttext img").addClass("imgshow");
	$(".noimgshow").removeClass("imgshow");
		$("[class=imgshow]").unwrap();
$(".imgshow").mouseover(function(){
		//当鼠标划过图片开始触发动作
		pleaseshow=setTimeout(foo, 3000);//延迟3秒执行show特效代码
		img_title = $(this).attr("title");//特别注意全局变量声明不用var
		img_url = $(this).attr("src");
		img_alt = $(this).attr("alt");
	
		ee = $(this).height()/$(this).width();//获取纵横比
		//alert (ee);
		//alert("aaa");			
});
$(".imgshow").mouseout(function(){
		//当鼠标离开图片触发
		clearTimeout(pleaseshow);//清除计时器	
});
	
	
});

无论如何最后也要感谢插件的作者 Joychao
插件下载主页http://wordpress.org/extend/plugins/img-show-box/