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/