/*文字コードUTF-8*/ (function($) { var strImgDir = 'ressources/'; var oImgZoomBox=$('
'); var oImgClose = $('').css({position:'absolute',top:0,left:0,cursor:'pointer',zIndex:100200}); $.fn.fancyzoom = function(userOptions) { //the var to the image box div var oOverlay = $('
').css({ height: '100%', width: '100%', position:'fixed', left: 0, top: 0, cursor:"wait", position:'relative', zIndex:100000 }); function openZoomBox(imgSrc,o){ if(o.showoverlay) { oOverlay .prependTo('body') .click(function(){closeZoomBox(o);}); oOverlay.css({position:'absolute',zIndex:100000,height:$(document).height(),width:$(document).width()}); } pos=imgSrc.offset(); o=$.extend(o,{dimOri:{width:imgSrc.outerWidth(),height:imgSrc.outerHeight(),left:pos.left,top:pos.top,'opacity':0}}); var oImgDisplay = $('img', oImgZoomBox); oImgZoomBox.css({'opacity':0,'text-align':'center',zIndex:100000,'border':'0px solid red'}).appendTo('body'); var iWidth = oImgZoomBox.outerWidth(); var iHeight = oImgZoomBox.outerHeight(); dimBoxTarget=$.extend({},{width:iWidth,height:iHeight,'opacity':1}, __posCenter((iWidth+15),(iHeight+30))); oImgClose.css({left:(dimBoxTarget.left+ dimBoxTarget.width-22-(dimBoxTarget.width-oImgDisplay.width())/2),top:dimBoxTarget.top}); var $fctEnd = function(){ if($.fn.shadow && !$.browser.msie){ $('img:first',oImgZoomBox).shadow(o.shadowOpts);} if(o.Speed>0 && !$.browser.msie) {oImgClose.fadeIn('slow');$('div',oImgZoomBox).fadeIn('slow');} else {oImgClose.show();$('div',oImgZoomBox).show();} }; $('div',oImgZoomBox).hide(); if(o.Speed > 0) { oImgZoomBox.css(o.dimOri).animate(dimBoxTarget,o.Speed,$fctEnd); } else { oImgZoomBox.css(dimBoxTarget); $fctEnd(); } }//end openZoomBox function closeZoomBox(o){ oImgClose.remove(); if(o.Speed > 0){ oImgZoomBox.animate(o.dimOri,o.Speed,function(){ $(this).empty().remove(); }); if(o.showoverlay) {oOverlay.animate({'opacity':0},o.Speed,function(){$(this).empty().remove();});} }else { oImgZoomBox.empty().remove(); if(o.showoverlay) {oOverlay.empty().remove();} } } return this.each(function() { var $this = $(this); var imgTarget = $this.is('img')?$this:$('img:first',$this); var imgTargetSrc=null; if($this.attr('href')){ imgTargetSrc = $this.attr('href'); } if($this.is('img')){ imgTargetSrc = $this.attr('src'); $this.css('cursor','pointer'); } var opts = $.extend({},$.fn.fancyzoom.defaultsOptions, userOptions||{},{dimOri:{}, oImgZoomBoxProp:{position:'absolute',left:0,top:0} }); oOverlay.css({ opacity: opts.overlay, background:opts.overlayColor }); if(!/\.jpg|\.png|\.gif/i.test(imgTargetSrc) || ($('img',$this).size()===0 && !$this.is('img'))){ return; } $this.click(function(){ if(oLoading && oLoading.is(':visible') || timerLoadingImg){ if(oImgZoomBox && $('img:first',oImgZoomBox).attr('src') != imgTargetSrc){ __cancelLoading(); } else {//solve the double click pb return false; } } var o = $.extend({},opts,userOptions); if(oImgZoomBox && oImgZoomBox.parent().size()>0){ var imCurrent = $('img:first',oImgZoomBox); if(imgTargetSrc == imCurrent.attr('src')){ pos=imgTarget.offset(); o=$.extend( o, {dimOri:{width:imgTarget.outerWidth(),height:imgTarget.outerHeight(),left:pos.left,top:pos.top,'opacity':0}} ); closeZoomBox(o); return false; }else { //user click on an other image, destroy it oImgClose.remove(); oImgZoomBox.empty().remove(); } } if(o.showoverlay && oOverlay) {oOverlay.empty().remove().css({'opacity':o.overlay});} oImgClose.attr('src',o.imgDir+'closebox.png').appendTo('body').hide(); if($.fn.ifixpng) {$.ifixpng(o.imgDir+'blank.gif');oImgClose.ifixpng(o.imgDir+'blank.gif');} oImgClose.unbind('click').click(function(){closeZoomBox(o);}); oImgZoomBox=$('
').empty().css(o.oImgZoomBoxProp); var oImgZoom=$('').attr('src',imgTargetSrc).css({position:'relative',zIndex:100000,marginTop:15,marginRight:15}).click(function(){closeZoomBox(o);}).prependTo(oImgZoomBox); var imgPreload = new Image(); imgPreload.src = imgTargetSrc; var $fctEndLoading = function(){ if(bCancelLoading) {bCancelLoading=false;} else { if(__getFileName(imgPreload.src) == __getFileName($('img:first',oImgZoomBox).attr('src')) ){ fctCalculateImageSize(); openZoomBox(imgTarget, o); __stoploading(); } } }; var fctCalculateImageSize = function () { var divCalculate = $('
').css({position:'absolute',zIndex:100000,'top':0,'left':0,opacity:0,'border':'0px solid red'}); oImgZoom.appendTo(divCalculate); divCalculate.appendTo('body'); imWidth = oImgZoom.width(); imHeight = oImgZoom.height(); maxWidth = $(window).width()*0.9; maxHeight = $(window).height()*0.8; if( maxHeight < imHeight ){ oImgZoom.css('height', maxHeight); }else if( maxWidth < imWidth ){ oImgZoom.css('width', maxWidth); } divCalculate.remove(); oImgZoom.prependTo(oImgZoomBox); }; if(imgPreload.complete) { fctCalculateImageSize(); openZoomBox(imgTarget, o); /*__displayLoading(imgPreload); setTimeout($fctEndLoading,4000);*/ } else { __displayLoading(); imgPreload.onload = function(){ //when loading is finish display the zoombox if user not click on cancel $fctEndLoading(); }; } return false; }); } );//end return this };//end Plugin //Default Options $.fn.fancyzoom.defaultsOptions = { overlayColor: '#fcc', overlay: 0.7, showoverlay:false, Speed:500, shadowOpts:{ color: "#fcc", offset: 4, opacity: 0.2 }, imgDir:strImgDir }; function __posCenter(iWidth,iHeight){ var iLeft = ($(window).width() - iWidth) / 2 + $(window).scrollLeft(); var iTop = ($(window).height() - iHeight) / 2 + $(window).scrollTop(); iLeft=(iLeft < 0)?0:iLeft; iTop=(iTop < 0)?0:iTop; return {left:iLeft,top:iTop}; } // // LOADING MANAGEMENT // var oLoading =null ; var bCancelLoading = false; var timerLoadingImg = null; function __displayLoading(){ if(!oLoading){ oLoading = $('
').css({position:'relative',zIndex:100000,width:50,height:50,position:'absolute','background':'transparent', opacity:8/10,color:'#FFF',padding:'5px','font-size':'10px'}); } oLoading.css(__posCenter(50,50)).html('').click(function(){__cancelLoading();}).appendTo('body').show(); timerLoadingImg=setTimeout(__changeimageLoading,400); } function __cancelLoading(){ bCancelLoading=true; __stoploading(); } function __stoploading(){ oLoading.hide().remove(); if(timerLoadingImg){ clearTimeout(timerLoadingImg); timerLoadingImg=null; } } function __changeimageLoading(){ if(!oLoading.is(':visible')){ timerLoadingImg=null; return; } var $im=$('img',oLoading); //First call im.src ="", set it to the fire png zoom spin if(!$im.attr('src') || /blank\.gif/.test($im.attr('src'))){ strImgSrc = $.fn.fancyzoom.defaultsOptions.imgDir+"zoom-spin-1.png"; } else { tab = $im.attr('src').split(/[- .]+/); iImg = parseInt(tab[2]); iImg = (iImg < 12)? (iImg+1):1; strImgSrc= tab[0]+"-"+tab[1]+"-"+iImg+"."+tab[3]; } var pLoad = new Image(); pLoad.src=strImgSrc; var $fct = function (){ oLoading.css(__posCenter(50,50)); $im.attr('src',strImgSrc); timerLoadingImg = setTimeout(__changeimageLoading,100); }; //to preserve bug if img not exist change it only if load complete. if(pLoad.complete){$fct();} else{pLoad.onload=$fct;} } function __getFileName(strPath){ if(!strPath) {return false;} var tabPath = strPath.split('/'); return ((tabPath.length<1)?strPath:tabPath[(tabPath.length-1)]); } //settei $(function() { $.fn.fancyzoom.defaultsOptions.imgDir='./images/ressources/'; $('.fancyzoom').fancyzoom({showoverlay:true,overlay:4/10}); }); })(jQuery);