/** * imZoom * ============================================================================= * charger les liens vers des images dans un diaporama * * @author Erwan Lefèvre * @copyright Erwan Lefèvre 2009 * @license Creative Commons - Paternité 2.0 France - http://creativecommons.org/licenses/by/2.0/fr/ * @version 3.0 2010-06-26 * @see http://www.webbricks.org/bricks/imZoom/ * @compatible au 26 juin 2010, compatibilité assurée pour : * Firefox, Internet Explorer 5.5+, Opéra, Safari, Chrome */ /* exemples d'utilisation : - mettre en place sur un lien : var target = document.getElementById('target'); imZoom.applyTo(target); - mettre en place sur une liste de liens : var targets = document.getElementById('container').getElementsByTagName('a'); imZoom.applyTo(targets); // comme pour un seul lien - mettre en place sur tous les liens éligibles de la page : imZoom.autoApplyInto(); - mettre en place sur tous les liens éligibles d'un élément donné : var container = document.getElementById('container'); imZoom.autoApplyInto(container); - pour passer des options : - avec imZoom.applyTo() : var options = { opt1 : val1, optn : valn } imZoom.applyTo(target, options); (options en second paramètre) - avec imZoom.autoApplyInto() : var options = { opt1 : val1, optn : valn } imZoom.autoApplyInto(options, container); (options en premier paramètre) */ /** * transfer * ============================================================================= * retourne un objet contenant les propriétés et méthodes de l'objet /dest/, * complétées et/ou écrasées par celles de l'objet /source/ * * @param source {object} l'objet source * @param dest {object} l'objet de destination * @return {object} * */ function transfer (source, dest) { var prop, transfered={}; for ( prop in dest ) { transfered[prop] = dest[prop]; } for ( prop in source ) { transfered[prop] = source[prop]; } return transfered; } /** * addElem v1.01 * raccourci pour [HTMLElement].appendChild(document.createElement([tagName])) * * @param {HTMLElement} container (optionnel) l'élément dans lequel en créer un nouveau (par défaut : ) * @param {string} tagName le type d'élement à créer (div|p|a|table, etc.) * * @returns {HTMLElement} * * ============================================================================= */ function addElem(tagName,container){ container = container || document.getElementsByTagName("body")[0]; return container.appendChild(document.createElement(tagName)); } /** * addEvent() * * ajoute la fonction /fn/ à la pile de résolution de l'événement /evenType/ de * l'objet /obj/ * * merci à : http://www.scottandrew.com/weblog/articles/cbs-events * * @param {Mixed} obj window, ou document, ou un élément HTML * @param {String} evType type d'event (click, mouseover, mouseout, etc.…) * @param {String} fn la fonction à ajouter * @param {Boolean} useCapture "useCapture un booléen : true pour la phase de capture, ou false pour la phase de bouillonnement et la cible. On utilise quasiment toujours la valeur false." (cf : http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html) * * @returns void * * ============================================================================= */ function addEvent (obj, evType, fn, useCapture){ if (obj.addEventListener) { obj.addEventListener(evType, fn, useCapture); } else { obj.attachEvent("on"+evType, fn); } } /** * byId() * raccourci pour document.getElementById() * retourne l'élément html dont l'attribut id vaut /id/ * * @param id {String} L'attribut id de l'élément recherché * * @returns {HTMLElement} * * ============================================================================= */ function byId(id) { return document.getElementById(id) ; } /** * byTN() * * raccourci pour [element].getElementsByTagName() * retourne l'élément html de type /tagName/ * * @param tagName {String} Le type d'éléments recherché * * @returns {HTMLCollection} * * ============================================================================= */ function byTN(tagName,container) { return (container||document).getElementsByTagName(tagName) ; } /** * easeInOut v1.1 / 2010-06-26 * * calcule des étapes d'animation douces * * @param startValue {Float} valeur de départ (peut être inférieure à celle de fin) * @param endValue {Float} valeur de fin (peut être supérieure à celle de fin) * @param totalSteps {Integer} nombre total d'étapes dans l'animation * @param actualStep {Integer} étapes actuelle de l'animation * @param powr {Float} "puissance" de la courbe. 1=linéaire et ease-out<1 h ) { h = dE.clientHeight; } if ( dE.clientWidth > w ) { w = dE.clientWidth; } // last for safari if ( dB.scrollHeight > h ) { h = dB.scrollHeight; } if ( dB.scrollWidth > w ) { w = dB.scrollWidth; } return {'w':w, 'h':h} ; } /** * preventDefault() * * permet d'annuler l'effet normal d'un événement sur un élément html * (revient à faire un "return false" pour cet événement, en passant par le event-handeler) * * v1.0 - 2010-05-30 * * @returns void * * ============================================================================= */ function preventDefault(e){ e = e||event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } /** * redimArea v1.2 / 2010-06-26 * * retourne les mesures /{w,h}/ de /src_w/ et /scr_h/, après redimentionnement homotétique * d'après les critères /mesures{max_w, min_w, max_h, max_h}/ * * @param {Integer} src_w largeur de la surface à redimentionner * @param {Integer} src_h hauteur de la surface à redimentionner * @param {Object} mesures mesures maximales et/ou minimales pour * la largeur et/ou la hauteur * * @returns {Object} * * ============================================================================= */ function redimArea (src_w, src_h, options) { // initialisations var max_w, min_w, max_h, min_h, // contraintes données en options round, // option indiquant d'arrondir les dimensions obtenues wh, hw, // rapports de proportion de la surface height, width; // dimensions finales de la surface // mesures souhaitées options = options || {}; max_w = options.max_w; min_w = options.min_w; max_h = options.max_h; min_h = options.max_h; // autres options round = options.round===undefined ? 1 : options.round; // pour rétrocompatibilité : undefined=>true // calcul du rapport largeur/hauteur de la source wh = src_w / src_h ; hw = src_h / src_w ; // par défaut, garder les mesures initiales height = src_h ; width = src_w ; // redimentionnements // agrandissement largeur if ( width < min_w ) { width = min_w; height = width * hw ; } // agrandissement hauteur if ( height < min_h ) { height = min_h; width = height * wh ; } // réduction largeur if ( max_w && (width > max_w) ) { width = max_w; height = width * hw ; } // réduction hauteur if ( max_h && (height > max_h) ) { height = max_h; width = height * wh ; } // valeurs négatives interdites width = width<0 ? 0 : width; height = height<0 ? 0 : height; return { w : round ? Math.round(width) : width, h : round ? Math.round(height) : height }; } /** * remEvent() * * retire la fonction /fn/ de la pile de résolution de l'événement /evenType/ de * l'objet /obj/ * * merci à : http://www.scottandrew.com/weblog/articles/cbs-events * * @param {Mixed} obj window, ou document, ou un élément HTML * @param {string} evType type d'event (click, mouseover, mouseout, etc.…) * @param {string} fn la fonction à supprimer * @param {boolean} useCapture "useCapture un booléen : true pour la phase de capture, ou false pour la phase de bouillonnement et la cible. On utilise quasiment toujours la valeur false." (cf : http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html) * * @returns void * * ============================================================================= */ function remEvent(obj, evType, fn, useCapture){ if (obj.removeEventListener) { obj.removeEventListener(evType, fn, useCapture); } else { obj.detachEvent("on"+evType, fn); } } /** scrolled() * ============================================================================= * retoune les valeurs (horizontale et verticale) de défilement de la fenêtre * (en tenant compte du navigateur) * * @return Object {'x','y'} */ function scrolled () { var x,y, w = window, d = document, de = d.documentElement, db = d.body; // vrais navigateurs if ( w.pageXOffset!==undefined) { x = w.pageXOffset; y = w.pageYOffset; } // ie else { x = de.scrollLeft ? de.scrollLeft : (db.scrollLeft?db.scrollLeft:0) ; y = de.scrollTop ? de.scrollTop : (db.scrollTop?db.scrollTop:0) ; } return {'x':x, 'y':y}; } /** * setOpacity * ============================================================================= * règle l'opacité d'un élément * * @param elem {element} l'élément à traiter * @param value {float} valeur souhaitée (0=transparent, 1=opaque) * @return string * */ function setOpacity(elem, value) { value = (value == 1)?0.99999:value; elem.style.opacity = value; elem.style.filter = 'alpha(opacity=' + value*100 + ')'; elem.style.MozOpacity = value; elem.style.KhtmlOpacity = value; } /** * setStyle() * ----------------------------------------------------------------------------- * Modifie l'attribut style de l'élément /element/, selon le tableau associatif /styles/. * * @param elem {HTMLElement} l'élément dont on veut modifier les styles * @param styles {Object} définition (javascript) des styles à appliquer à l'élément * @return void */ function setStyle(elem,styles){ // 58 octets var prop; for (prop in styles) { elem.style[prop] = styles[prop]; } } /** * winDim() * ----------------------------------------------------------------------------- * retourne les dimentions intérieurs de la fenêtre * * @return {Object} */ function winDim() { var w,h, i = window, d = document, de = d.documentElement, db = d.body; if ( i.innerWidth ) { // autres que IE w = i.innerWidth; h = i.innerHeight; } else if ( de.clientWidth ) { // IE8 w = de.clientWidth; h = de.clientHeight; } else { // IE6 w = db.clientWidth; h = db.clientHeight; } return {'w':w, 'h':h} ; } /** * Animate v1.1 / 2010-06-26 * ============================================================================= * permet d'animer un objet * * @requires transfer http://sitesweb.abondance.free.fr/copyleft/admin/billet-fiche.php?idBillet=21 * @requires easeInOut http://sitesweb.abondance.free.fr/copyleft/admin/billet-fiche.php?idBillet=23 * @requires setOpacity (uniquement pour les animation de la propriété 'opacity' sur des navigateur anciens) * @requires sharp2rgb (uniquement pour les animation de couleurs) * @requires rgbString2Array (uniquement pour les animation de couleurs) * * @param options {object} les options d'animation (voir détail dans le code source, à la déclaration de this.defSettings) * @param autoStart {mixed} indique s'il faut lancer l'animation dès l'instanciation de la classe. * (si autostart est un objet, il sera considéré comme une liste d'options) * */ function Animate (defSettings, autoStart) { // options par défaut this.defSettings = { elem : document.body, // element - élement DOM qui sera animé from : {}, // object - propriétés de style initiales - exemple : {width:'300px', color:'#faa'} to : {}, // object - propriétés de style finales - exemple : {fontSize:'2em', backgroundColor:'rgb(200,55,0)'} restart : false, // boolean - si l'animation vient à âtre relancée avant la fin, faut-il la reprendre à zéro ease : 1, // float - régularité de l'anim. 1=linéaire, et ease-out<1iz.gal.length-1 ? 0 : (n<0?iz.gal.length-1:n); // boucler en cas de dépassement du nb d'images iz.active = n; iz.go(iz.gal[n]); }, /** * prev() * ------------------------------------------------------------------------- * lancer le chargement de l'image précédente */ prev : function () { imZoom.goTo(imZoom.active-1); }, /** * next() * ------------------------------------------------------------------------- * lancer le chargement de l'image suivante */ next : function () { imZoom.goTo(imZoom.active+1); }, /** * progImg() * ------------------------------------------------------------------------- * programme le chargement d'une image * * @param integer imgNb (facultatif) le numéro de l'image à charger (par défaut : la suivante) */ progImg : function (imgNb) { var iz = imZoom; imgNb = imgNb===undefined ? iz.active+1 : imgNb; iz.prog = setTimeout( function(){ iz.goTo(imgNb); }, iz.options.slideDelay ); }, /** * play() * ------------------------------------------------------------------------- * lance un diaporama, à partir de l'image active */ play : function () { if (!imZoom.prog) { this.progImg(); byId('izPlay').style.display = 'none'; byId('izPause').style.display = ''; } }, /** * pause() * ------------------------------------------------------------------------- * interromp le diaporama */ pause : function () { clearTimeout(imZoom.prog); imZoom.prog = 0; byId('izPause').style.display = 'none'; byId('izPlay').style.display = ''; }, /** * callback() * ------------------------------------------------------------------------- * appelle une des fonctions callback passées en options */ callback : function (functionName) { var func = imZoom.options[functionName]; if (func && byId('izImg')) { func(); } }, /** * change() * ------------------------------------------------------------------------- * lance l'animation de changement d'image */ change : function () { var iz = imZoom, anim; anim = iz.options.anim; function onAppear(){ iz.callback('onChange'); if (iz.prog) { clearTimeout(iz.prog); iz.prog=0; iz.progImg(); } } function onDisappear(){ var img = byId('izImg'); if (img) { // une condition (pour l'anim), des fois qu'on ait fermé imZoom entre temps img.onload = function() { iz.setPos(); // pour ajuster la barre de nav à l'image var izTitle = byId('izTitle'); if (izTitle && iz.options.showTitle) { izTitle.innerHTML = iz.gal[iz.active].title; } if (anim) { iz.animGlob.go({ to:{opacity:1}, onFinish:onAppear }); } else { onAppear(); } }; // changer l'image source img.src = iz.gal[iz.active].href; } } if (anim) { iz.animGlob.go({ to:{opacity:0}, // disparition en fondu onFinish:onDisappear // puis changement d'image, et réapparition }); } else { onDisappear(); } }, /** * go() * ------------------------------------------------------------------------- * charge l'image voulue, après avoir ouvert imZoom s'il ne l'était déjà */ go : function (actionner, options) { var iz = this, i=0,opt, // pointeurs, dans des boucles area, // la zone occupée par le lien loading = byId('izLoading'), // image de preloader (peut valoir undefined) loadingArea, // zone dans laquelle centrer le preloader loadingPos; // position le la zone où centrer le preloader // attention aux réouvertures alors qu'un préchargement a lieu if (loading) { iz.close(); } // réservé à l'ouverture initiale : if(!iz.isOpen) { // lecture des options et mise en place des options par défaut options = options || {}; for (opt in iz.defaultOpt ) { if (typeof options[opt]==='undefined') { options[opt]=iz.defaultOpt[opt]; } } iz.options = options; // mémorisation // relever le n° de l'image qu'on est en train d'ouvrir while (iz.gal[i]!==actionner && i'; } if (opt.showNav && iz.gal.length>1) { izMeta.innerHTML += '' + '' + ' '+opt.prevTxt+'' + ' '+opt.playTxt+'' + ' ' + ' '+opt.nextTxt+'' + ''; } // actions de clics sur les différents élements izScreen.onclick = izGlob.onclick = iz.close; izCont.onclick=function(e){ // éviter qu'un clic sur la zone de design ne ferme imZoom e = e||event; if (e.stopPropagation) { e.stopPropagation(); } e.cancelBubble = true; }; // prépartion des (non-)animations // relevé de mesures préalabke if ( (opt.showNav||opt.showTitle)) { izMeta.style.display = ''; } iz.setPos(); imgMes = getPos(izImg); // mesures finales pour les différents éléments screenStyle = { opacity : opt.screenOpacity }; globStyle = { opacity : 1 }; animOpenMes = iz.getAnimOpenMes(); // actions à effectuer à la fin des (non-)animations onOpen = function () { if (iz.options.autoPlay) {iz.play();} addEvent(document, 'keydown', iz.keyNav); // keydown est le seul qui accepte "enter" et "escape" sous ie, mais il n'accepte pas le prevent default iz.callback('onOpen'); iz.remove('izTmp'); }; // ouverture, avec animation if (opt.anim) { // encore quelques préparatifs // régler le fondu du conteneur global iz.animGlob = new Animate({elem:izGlob,duration:opt.animDuration/2,ease:opt.animEase,frameRate:opt.animRate}); // faire en sorte que l'image ne soit pas déformée (surtout en cas de liens textuels) izTmpFrom = redimArea(izTmp.offsetWidth, izTmp.offsetHeight, { max_w : areaWidth, max_h : areaHeight }); // faire en sorte que l'image ne soit centrée dans son actionneur izTmpFrom.l = (areaWidth - izTmpFrom.w)/2 + areaPos.l; izTmpFrom.t = (areaHeight - izTmpFrom.h)/2 + areaPos.t; // et on y va ! // affichage de l'écran modal animScreen = new Animate({elem:izScreen,to:screenStyle,from:{opacity:0},duration:opt.animDuration,ease:opt.animEase,frameRate:opt.animRate},1); // effet de zoom sur l'image (suivi de l'apparition du conteneur global, en fondu) iz.animOpen = new Animate({ elem : izTmp, duration : opt.animDuration, ease : opt.animEase, frameRate : opt.animRate, from : { width : izTmpFrom.w+'px', height : izTmpFrom.h+'px', top : izTmpFrom.t+'px', // pour faire l'économie du centrage : "top : areaPos.t+'px'," left : izTmpFrom.l+'px' // pour faire l'économie du centrage : "left : areaPos.l+'px'" }, to : animOpenMes.to, onStart : function() { // réafficher izTmp avant de l'animer izTmp.style.zIndex=opt.zIndex+1; setTimeout(function(){izTmp.style.visibility='';},50); }, onFinish : function() { iz.setPos(); iz.animGlob.go({ from : { opacity : 0 }, to : globStyle, onFinish : onOpen }); } },1); } // ouverture, sans animation else { setStyle(izScreen, screenStyle); setStyle(izTmp, animOpenMes.to); setStyle(izGlob, globStyle); onOpen(); } } } }; // en cas de scroll ou redimentionnement de la fenêtre, repositionner l'agrandissement addEvent(window, 'resize', imZoom.setPos); addEvent(window, 'scroll', imZoom.setPos); window.imZoom = imZoom; })(window,addElem,addEvent,byId,byTN,getPos,pageDim,redimArea,remEvent,scrolled,setStyle,winDim,Animate);