/* *Autheur: Ilic Goran *Création: 27 septembre 2007 * *Interaction avec l'application de gestion de galeries sur info.tsr.ch. *Chemin du script qui contient le tableau javascript avec les infos pour retrouver les images * http://info.tsr.ch/galeriephoto/mud_Scripts_external.php?GalerieId=[id] */ var Gallery = { //membres arrImg:null, isDebug:false, imgFullSizeEl:null, intCurrentImg:null, intervalLink:null, maxSize:null, isPlay:1, Effect:{ previewClick:null, backClick:null, nextClick:null, playClick:null }, //charge l'image la 1ère image lorsque la page est chargée initImgFull: function(id){ //-1 sur l'id car les clés des tableaux commence à 0 id--; //création de l'objet Img var imgObject = this.mkObjImg(id); //application de l'image courrante à l'objet this.intCurrentImg=id; //utilisation d'une fonction externe liée via previewClick pour appliquer les effectes [DHTML] this.Effect.previewClick(this.imgFullSizeEl, imgObject); //on Insert le lecteur mp3 swf this.mkFlash(); simplePreload(this.arrImg); }, setSwfSrc:function(src){ this.swfSrc=src; }, //---Displayer--// //Affiche les images d'illustration dans l'élément spécifié dspPreview : function (id){ // on recherche les liens de preview this.setImgPreviewLink(); //on compte le nombre d'image var intLength = this.arrImg.length; //pour chacune des images on l'insert dans l'élément spécifié et on lui ajoute un event de type click for(var i=0; intLength > i; i++){ var strId=id+'_img_'+i; //trace.addMsg('id imagePrevis:'+strId,'dsp Prev images') var strImgHtml=' '; //dom insertion var ElA=document.createElement('a'); ElA.setAttribute('href','javascript:;'); var ElImg=document.createElement('img'); ElImg.setAttribute('src',this.arrImg[i]['imagePrev']); ElImg.setAttribute('id',strId); ElA.appendChild(ElImg); $(id).appendChild(ElA); //en dom //this.insertion(id, strImgHtml); //utilisation d'une astuce pour rester dans l'object var instance=this; Event.add(strId, 'click', function(event){instance.dspImgFullSize(event)}); } }, dspName:function(id){ var name=this.arrImg['info']['name']; $(id).innerHTML=name; }, //Event qui switch l'image principale par l'image preview sur la quelle on a cliqué dspImgFullSize: function (event){ //trace.addMsg('current instance id :'+this.currentInstance,'event'); //on capture l'élément de l' event var evElement=Event.element(event); //on recherche l'id var arrIds = evElement.id.split("_"); //on modifie la valeur de l'image courrante this.intCurrentImg=arrIds[2]; //utilisation d'une fonction externe liée via previewClick pour appliquer les effectes [DHTML] this.Effect.previewClick(this.imgFullSizeEl, this.mkObjImg()); }, //affiche la date dans l'élément pas dans la variable id dspDate: function(id){ //convertion du format yyyy-mm-dd au format dd.mm.yyyy var arrFragDate=this.arrImg['info']['dateCreation'].split("-"); var strDateNice=arrFragDate[2]+'.'+arrFragDate[1]+'.'+arrFragDate[0]; //insertion de la date dans l'élément this.insertion(id, strDateNice); }, //modifie le code html pour afficher le nombre d'image dans l'élément id dspNbrImg: function (id){ var intLength = this.arrImg.length.toString(); this.insertion(id, intLength); }, //Ajoute a l'url des images "_preview.jpg" pour trouver les illustrations stock le résultat dans this.arrImg[i]['imagePrev'] setImgPreviewLink: function (){ //on verifie si arrImg est du bon type (Array) if(typeof this.arrImg==Array){ this.isDebug==true ? alert('objImg n\'est pas setter correctement'):false; return false } //on compte le nombre d'image var intLength = this.arrImg.length; //pour chaqune des images on ajoute __preview et on stock le résultat dans la cléf imagePrev for(var i=0; intLength > i; i++){ this.arrImg[i]['imagePrev']=this.arrImg[i]['image'].replace(/.jpg$/, '_preview.jpg'); } }, //retourn le valeur de l'image courrante getCurrentImgId:function (){ var intCurrentImg=this.intCurrentImg; intCurrentImg++; //trace.addMsg('current id is:'+intCurrentImg,'id info'); return intCurrentImg; }, //--Add event--// //ajoute l' event on click pour l'id en paramètre l'action de l'event est "image précédente" backClick: function(id){ var instance=this; Event.add(id, 'click', function(e){instance.eventBack(e)}); }, //ajoute l' event on click pour l'id en paramètre l'action de l'event est "image suivant" nextClick: function (id){ var instance=this; Event.add(id, 'click', function(e){instance.eventNext(e)}); }, //start / stop la lecture automatique de la gallery playClick:function (id, pid, intTime){ var instance=this; //on ajoute la propriété temps entre chacune des photos this.intTime=intTime; this.idsEvent=new Array(); this.idsEvent['start']=id; this.idsEvent['pause']=pid; //on applique l'even click a l'élément qui stop / start la galerie Event.add(id, 'click', function(e){instance.eventPlay(e, id, pid)}); //on applique l'even click a l'élément qui stop / start la galerie Event.add(pid, 'click', function(e){instance.eventPlay(e, id, pid)}); }, //--event--// //event qui affiche l'image précédente lorsque il est appelé eventBack: function(event){ //l'action s'effectue que si l'image acctuel n'est pas la première if(this.intCurrentImg > 0 ){ //on soustrait -1 this.intCurrentImg--; //on récupère l'élément de l'event var evElement=Event.element(event); //utilisation d'une fonction externe liée via backClick pour appliquer les effectes [DHTML] this.Effect.backClick(this.imgFullSizeEl, this.mkObjImg()); } }, //event qui affiche l'image suivante lorsque il est appelé eventNext: function(event){ //trace.addMsg('current instance id :'+this.currentInstance,'event'); //on récupère le nombre total d'images var intLength = this.arrImg.length; //l'action s'effectue que si l'image acctuel n'est pas la dernière if(intLength - 1 > this.intCurrentImg){ //on fait plus 1 this.intCurrentImg++; //utilisation d'une fonction externe liée via nextClick pour appliquer les effectes [DHTML] this.Effect.nextClick(this.imgFullSizeEl, this.mkObjImg()); } }, //event qui start / stop la lecture de la galerie eventPlay: function (event, id, pid){ //comment::mp3flashplayer //this.switchFlashStat(); //debug//alert(Gallery.isPlay) //si le status de la galerie est à 1 if(this.isPlay==1){ //on le switch à 0 this.isPlay=0; $(id).style.display='none'; $(pid).style.display='block'; //on déclanche la lecture de la galerie Gallery.intervalPlay(refObject.store(this)); this.intervalLink = window.setInterval("Gallery.intervalPlay("+refObject.store(this)+")",this.intTime); //trace.addMsg('id intervalLinker:'+this.intervalLink+'Start', 'plantage'); //on déclanche la lecture du mp3 //'swfContent'+this.idGallery //eval('window.document.swfContent'+this.idGallery+'.SetVariable("jsVar","start")'); //window.document.myFlash.SetVariable("jsVar","start"); //eval('window.document.swfContent'+this.idGallery+'.SetVariable("jsVar","start")'); //this.intervalPlay(); } else { //trace.addMsg('id intervalLinker:'+this.intervalLink+'stop', 'plantage'); //autrement //on set isPlay = 1 this.isPlay=1; //on stop la galerie window.clearInterval(this.intervalLink); $(id).style.display='block'; $(pid).style.display='none'; //eval('window.document.swfContent'+this.idGallery+'.SetVariable("jsVar","stop")'); } if(this.isPauseSet==true){ } //trace.addMsg('id intervalLinker:'+this.intervalLink, 'plantage'); }, pause:function(){ if(this.isPlay!=1){ this.isPlay=1; //on stop la galerie window.clearInterval(this.intervalLink); $(this.idsEvent['start']).style.display='block'; $(this.idsEvent['pause']).style.display='none'; } }, switchFlashStat:function(){ if(this.isPlay==1){ eval('window.document.swfContent'+this.idGallery+'.SetVariable("jsVar","start")'); }else{ eval('window.document.swfContent'+this.idGallery+'.SetVariable("jsVar","stop")'); } }, //-- interval --// //interval qui execute la lecture de la galerie intervalPlay: function (instance){ //trace.addMsg('id intervalLinker:'+this.intervalLink, 'plantage'); //trace.addMsg('in interval play the instance id is:'+instance,'play'); refInstance=refObject.get(instance); //si l'image courante est la dernière on recommance du début if(refInstance.intCurrentImg==(refInstance.arrImg.length-1)){ //trace.addMsg('reste play'); refInstance.intCurrentImg=0; } else { //trace.addMsg('next image play'); //autrement incrémentation de 1 refInstance.intCurrentImg++; } //alert(1) //utilisation d'une fonction externe liée via playClick pour appliquer les effectes [DHTML] refInstance.Effect.playClick(refInstance.imgFullSizeEl, refInstance.mkObjImg()); }, //-- utility --// //création de l'object image passé au fonction externe mkObjImg: function(id){ //si l'id n'est pas defini on utilise l'id courant if(typeof id=='undefined'){ var arrId=this.intCurrentImg; } else { var arrId=id; } //création de l'objet image var imgObject = new Image; //trace.addMsg('mk object Image with id:'+arrId); //application des paramètres imgObject.src=this.arrImg[arrId]['image']; imgObject.caption=this.arrImg[arrId]['caption']; imgObject.title=this.arrImg[arrId]['title']; imgObject.id=this.getCurrentImgId(); this.setMaxSize(imgObject); //retour de l'objet return imgObject; }, // setMaxSize:function(imgObject){ //si les valeurs maximales ne sont pas définie //on execute pas le reste de la methode if(typeof this.maxSize!='string') return true; var arrWH=this.maxSize.split(','); imgObject.MaxWidth=arrWH[0]; imgObject.MaxHeight=arrWH[1]; }, //-- load --// //chargement de fichier qui contient le tableau load:function(strParamName, mode){ this.strParamName=strParamName; //création de l'instance //this.mkInstance(); //si le nom du paramètre dans l'url n'est pas définit on retourne faux if(typeof strParamName=='undefined') return false; //récupération de l'id de la galerie if(mode=="directID"){ var idGallery=strParamName; } else { var idGallery=getURLParam(strParamName); //si l'id de la galerie n'est pas definit if(typeof idGallery=='undefined') return false; } //on stock l'id this.idGallery=idGallery; //maj ll3252215 //TRAITEMENT DOM //récupèration de la position du tag head var ElHeader=document.getElementsByTagName('head')[0]; //création du lien de la galerie //on utilise l'id de l'instance pour l'identifier var intId=refObject.store(this); //alert(intId); var strScriptSrc='http://info.tsr.ch/galeriephoto/mud_Scripts_external.php?GalerieId='+idGallery+'&instance='+intId; if(document.getElementById('external'+this.strParamName)==null){ //création de l'élément script var ElScript=document.createElement('script'); //création des attributs suivant sr, type , id ElScript.setAttribute('src', strScriptSrc); ElScript.setAttribute('type','text/javascript'); ElScript.setAttribute('charset','ISO-8859-1'); ElScript.setAttribute('id','external'+strParamName); ElScript.setAttribute('randomid',intId); //insertion de l'élément script dans la balise header ElHeader.appendChild(ElScript); var idRandom=false; } else { var ElScript=document.getElementById('external'+strParamName); var idRandom=ElScript.getAttribute('randomid'); } //attende de la fin du chargement du fichier //création du fonction qui effectue le lien vers l'objet cette astuce est utilisé car le this n'est //pas pris en compte dans le steInterval this.intervalLoad=window.setInterval("Gallery.isLoad("+intId+","+idRandom+")",1000); //trace.addMsg('start inervaler for isLoad() function idIntervaler is:'+this.intervalLoad, 'Gallery.load'); }, //execute la fonction externe onLoad quand le fichier qui contient le tableau est chargée isLoad:function(idInstance, idRandom){ var object=refObject.get(idInstance); if(idRandom!=false){ idInstance=idRandom; } if(typeof eval('imgsGallery'+idInstance) =='object'){ //trace.addMsg('imagesGallery is load now', 'load'); //on recpère l'instance de l'objet //alert(typeof Gallery.instanceId[idInstance].currentInstance) //to delete//var refObjGallery=Gallery.instanceId[idInstance]; //trace.addMsg('get the object instance typof object is:'+(typeof object)); //new gallery //trace.addMsg('insert javascript array in object array:'+eval('imgsGallery'+idInstance)); object.arrImg=eval('imgsGallery'+idInstance); //reset //trace.addMsg('imgsGallery array is load en we clear intervaler idIntervaler:'+object.intervalLoad, 'Gallery.isLoad'); window.clearInterval(object.intervalLoad); //alert('onLoad start'); object.onLoad(); } }, insertion:function(El, Data){ $(El).innerHTML+=Data.toString(); }, mkFlash:function(){ //on check si ld div qui contiendra tous les lecteurs flash exsiste déja if($('swfContent')==null){ //on le fabrique car il n'exsiste pas var ElDiv=document.createElement('div'); ElDiv.setAttribute('id','swfContent'); //document.getElementsByTagName('body')[0].appendChild(ElDiv); } //on check si un el avec le même id est présent if($('swfContent'+this.idGallery)==null){ var ElDiv=document.createElement('div'); ElDiv.setAttribute('id','swfContent'+this.idGallery); $('swfContent').appendChild(ElDiv); } //création flash if(typeof this.swfSrc=='undefined'){ this.swfSrc='http://www3.tsr.ch/flash/playerMp3Empty.swf'; } var so = new SWFObject(this.swfSrc, 'swfContent'+this.idGallery, "1","1", "8", "#fff"); so.addParam("quality", "low"); so.addParam("wmode", "transparent"); so.addParam("swLiveConnect", "true"); so.addVariable("file", "http://info.tsr.ch/galerieSounds/"+this.idGallery+".mp3"); so.write('swfContent'+this.idGallery); } } // object qui affiche dans un élément des messages pour aider le développeur var refObject={ //les ids des instances instanceIds:new Array(), store:function(object){ //caputre du nombre de milliseconde var instanceId=this.instanceIds.length+1; //trace.addMsg('addNew instance id:'+instanceId, 'refObject'); //si l'id de l'instance exsiste déjé if(typeof this.instanceIds[instanceId]=='object'){ //trace.addMsg('id instance are in use try new', 'load'); //on recommence this.store(object); }else { //trace.addMsg('insert object in instanceid array by ref', 'load'); //autrement on l'ajoute this.instanceIds[instanceId]=object; return instanceId; } }, get:function(id){ if(typeof this.instanceIds[id]=='object'){ return this.instanceIds[id]; } else { return false; } } } function getURLParam(strGet){ // récupère le paramètre demandé dans l'url // on peut passer en deuxième paramètre une autre URL (si par exemple on est dans des frames) // Ioan Sameli, 2003 var url, args=getURLParam.arguments; if(args.length != 1) url = args[1]; else url = window.location.search; if (url!=''){ url=url.substring(1,url.length); liste=url.split("&"); for (i=0;i<=liste.length-1;i++){ temp=liste[i].split('='); if(temp[0]==strGet)return(temp[1]); } return(null); } else return(null); } //copie un object recursivement //Goran Ilic, 2007 var Copy={ deep:function(object){ //création d'un nouveau objet var copy= new Object(); //passage des paramètres à l'objet for(var i in object){ //si le tsype du membre est object on rentre la récursivity if(object[i]=='[object Object]'){ copy[i]=this.deep(object[i]); } else { //autrement copie classique copy[i]= object[i]; } } //on retourne l'objet return copy; } } //gestion des evenements DOM 2 unifiée var Event={isIE:!!(window.attachEvent&&!window.opera),add:function(El,eventName,handler){if(typeof El=='string')El=document.getElementById(El);if(this.isIE){El.attachEvent('on'+eventName,handler);}else{El.addEventListener(eventName,handler,false);}},stopBubble:function(event){if(this.isIE){window.event.cancelBubble=true;}else{event.stopPropagation();}},stop:function(event){if(this.isIE){window.event.returnValue=false;}else{event.preventDefault();}},element:function(event){if(this.isIE){return window.event.srcElement;}else{return event.target;}}} //fin de destion des evenements DOM 2 unifiée //alias getElementById function $(El){ if(typeof El=='string'){ return document.getElementById(El); } return El; } function simplePreload(array) { var args = simplePreload.arguments; document.imageArray = new Array(args.length); for(var i=0; i