').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);