自己写的Jquery照片墙插件

/** * jQuery photowall v1.2 * Done for Company,named Photo wall. * Author:Andykong * QQ:36092119 * E-mail:[email protected] * Person all rights reserved * Date:2013.04.01 **Parame: * width:可选项,图片墙宽度 * height:可选项,图片墙高度 * autoHide:可选项 * {off:是否关闭此操作,selectors:[{selector:设置在显示大图时需要隐藏的元素的Class或Id或其他选择器,fn:function(a,b){}]} * images：必填项，数组，用于显示的图片集合 * [{title:标题(必填项),shortInfo:简介(必填项),thumb:缩略图地址(必填项),original:原图地址(必填项),customBy:图片等比放大依据(可选项), * fullRate:全景放大比例*(可选项),thumbRate:缩略图方法比例(可选项)}] * animateOn:可选项,是否启用关闭动画，默认不启用 * autoInfo：可选项,是否在大图显示下说明信息鼠标悬浮之上显示全部信息 * hideother:是否隐藏其他元素，要求参数autoHideEle存在 * fullRate：可选项,大图放大比例 * thumbRate:可选项,缩略图放大比例 * gridjs：外部网格布局插件 * v1.0 性能优化，兼容性处理 * v1.1 增加图片切换功能,性能优化 */ (function($){ var defaults = { width:undefined, height:undefined, autoHide:{off:false,selectors:[{ selector:"", fn:function(cobj){} }] }, images:[], animateOn:true, autoInfo:true, hideother:false, fullRate:3, thumbRate:1.5, gridjs:function(ul){ ul.imagesLoaded(function(){ul.masonry({isAnimated : true});}); }}, $shareCache={}, version="v1.0", tools={ createEle :function(tagname,classnames,id,content,attributes){/*创建DOM元素*/ var target = $(tagname); if(classnames&&classnames!="") { target.addClass(classnames); } if(attributes) { target.attr(attributes); } if(content) { target.html(content); } if(id) { target.attr("id",tools.runtimeID(id)); } return target; }, getEle :function(classname){/*获取DOM元素*/ return $("#"+tools.runtimeID(classname))||$("."+classname); }, storeData :{/*jquery数据存储对象*/ set:function(li,imgcfg){ li = $(li); var li_top = li.position().top, li_left = li.position().left, li_height = li.height(), li_width = li.width(), img = li.find("img"), img_top = img.position().top, img_left = img.position().left, img_height = img.height(), img_width = img.width(); li.data($shareCache.jDataKey,{ img:{top:img_top,left:img_left,height:img_height,width:img_width}, li:{top:li_top,left:li_left,height:li_height,width:li_width}, cfg:imgcfg, zIndex:img.css("zIndex") }); }, get:function(li){ return li.data($shareCache.jDataKey); } }, rightPosForMid :function(top,left,cpoint){/*设置预览图放大尺寸以及位置*/ var newpos ={top:top,left:left}; var pagesize = {H:$(window).height(),W:$(window).width()}; if(newpos.top<0) { newpos.top=0; } if(newpos.left<0) { newpos.left=0; } if((pagesize.W-cpoint.x)<toW/2) { newpos.left =pagesize.W-toW; } if((pagesize.H-cpoint.y)<toH/2) { newpos.top =pagesize.H-toH; } return newpos; }, eventHandler :{/*照片墙鼠标进入事件*/ mouseEnter :function(li) { var data = tools.storeData.get(li), img = li.find("img"), div = li.find("div"); var posdata = tools.midSize(data); li.stop().animate({top:posdata.top+"px",left:posdata.left+"px",zIndex:$shareCache.bigThumbZindex}); img.stop().animate({height:posdata.height+"px",zIndex:$shareCache.bigThumbZindex},function(){ var _w = $(this).width(); div.css({"width":(_w-15)+"px"}) div.fadeIn("slow"); }); return this; }, mouseLeave :function(li) {/*鼠标离开事件*/ var data = tools.storeData.get(li), img = li.find("img"), div = li.find("div"); div.hide(); li.stop().animate({top:data.li.top,left:data.li.left,zIndex:0}); img.stop().animate({ height:data.img.height, top:0, zIndex:0 }); return this; } }, hasJqueryData :function(target,key){/*检测是否jquery数据存储对象*/ var data = $(target).data(key); return data; }, windwRengion :{/*浏览器时下尺寸以及滑动条位置*/ windowHeight:function(){ return $(window).height(); }, windowWidth:function(){ var de = document.documentElement; var d = $(window).width(); return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth }, scrollY:function(){ var de = document.documentElement; return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop; }, scrollX:function(){ var de = document.documentElement; return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft; } }, fullImagesPos :function(fullimage){/*全景图片位置*/ var pos={}; var scrollY= tools.windwRengion.scrollY(); var scrollX = tools.windwRengion.scrollX(); var y = tools.windwRengion.scrollY(); pos.W=tools.windwRengion.windowWidth(), _H = tools.windwRengion.windowHeight(); pos.H = _H+scrollY; pos.x = pos.W/2, _Y = _H/2; pos.y = _Y+scrollY, pos.top= _Y-fullimage.height()/2, pos.left = pos.x- fullimage.width()/2; if(scrollY>0) { pos.top = pos.top+scrollY; } if(scrollX>0) { pos.left= pos.left+scrollX; } return pos; }, setImgageHeight :function(i,li,img,customheight){/*等比放大尺寸*/ if(img&&!customheight) { if(i/2!=0) img.css("height","80px"); if(i/2==0) img.css("height","140px"); if(i/5==0) img.css("height","120px"); if(i/6==0) img.css("height","160px"); if(i/7==0) img.css("height","100px"); } else { img.css({"height":customheight}); } }, runtimeID :function(id){/*图片墙运行环境下元素ID生成器*/ var d =new Date(); if(!$shareCache.perFlag&&!$shareCache.arndomFlag) { $shareCache.perFlag = "jquery_imagewall_"; $shareCache.arndomFlag = d.getMilliseconds(); } return $shareCache.perFlag+id+"_"+$shareCache.arndomFlag; }, shareCacheInit :function(){/*图片墙缓存对象*/ $shareCache={ imgLoadedNum: 0, images : [], listCLassName: "imgpanel", jDataKey : "wall-li-orig-attr", config : {}, orgianlImageKey : "img-data", wallCoverClassName : "jq-img-wall-cover", fullImag