Aller au contenu

Utilisateur:Dr Brains/ZoomOnThumb.js

Une page de Wikipédia, l'encyclopédie libre.
Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;

Firefox (sur GNU/Linux) / Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.
// Permet de zoomer une image ("thumb" ou galerie) au survol de la souris ou au focus du clavier

// Documentation : [[Projet:JavaScript/Notices/ZoomOnThumb]]

// {{Catégorisation JS|ZoomOnThumb}}

//<source lang=javascript>
//<pre><nowiki>
////////////////////////////////////////////////////////////// VARIABLES PERSONNALISABLES //////////////////////////////////////////
 

////  Images thumb  ////
 
// délai avant zoom en millisecondes
if(typeof(ZoomOnThumb_Delay)=="undefined") var ZoomOnThumb_Delay = 200;
// délai entre deux étapes d'agrandissement en millisecondes
if(typeof(ZoomOnThumb_TimeOut)=="undefined") var ZoomOnThumb_TimeOut = 50;
// multiplicateur de grossissement max
if(typeof(ZoomOnThumb_MaxMultiplicator)=="undefined") var ZoomOnThumb_MaxMultiplicator = 3;  
 

////  Images galeries  //// 

// délai avant zoom en millisecondes
if(typeof(ZoomOnGallery_Delay)=="undefined") var ZoomOnGallery_Delay = 200;
// délai entre deux étapes d'agrandissement en millisecondes
if(typeof(ZoomOnGallery_TimeOut)=="undefined") var ZoomOnGallery_TimeOut = 50;
// pourcentage d'agrandissement entre deux étapes
if(typeof(ZoomOnGallery_ZoomFactor)=="undefined") var ZoomOnGallery_ZoomFactor = 4;
// multiplicateur de grossissement max
if(typeof(ZoomOnGallery_MaxMultiplicator)=="undefined") var ZoomOnGallery_MaxMultiplicator = 3;    


////////////////////////////////////////////////////////////// FONCTIONS //////////////////////////////////////////



// --------------------------------------------------- IMAGES THUMB -----------------------------------------------------------------
 
/* VARIABLES */
var ZoomOnThumb_LinkOnImage = [];                 // Liste des liens "image"
var ZoomOnThumb_LinkOnImageState = [];            // État de zoom : 1 = zoom avant, -1 = zoom arrière, 0 = taille normale
var ZoomOnThumb_LinkOnImageOriginalWidth = [];    // Largeur originale de l'image
var ZoomOnThumb_LinkOnImageOriginalHeight = [];   // Hauteur originale de l'image
var ZoomOnThumb_LinkOnImageOriginalTarget = [];   // Cible originale de l'image (basse résolution)
var ZoomOnThumb_LinkOnImageZoomedTarget = [];     // Cible zoomée de l'image (haute résolution)
 
 
/* ÉTABLISSEMENT DE LA LISTE DES LIENS "IMAGE" */
function ZoomOnThumb_CheckLinks(){
     var Divs = document.getElementsByTagName('div');
     for(var a=0;a<Divs.length;a++){
          if($(Divs[a]).hasClass("thumbinner")){
               var DivThumb = Divs[a];
               var Parent = DivThumb.parentNode;
               while(Parent){
                    if(Parent.className && (Parent.className.indexOf("infobox")!=-1 || Parent.className.indexOf("noZoom")!=-1)) break;
                    Parent = Parent.parentNode;
               }
               if(Parent) continue;
               $(DivThumb).addClass("nopopups");
               var Links = DivThumb.getElementsByTagName('a');
               var LinkOnImage = Links[0];
               if(LinkOnImage){
                    while(LinkOnImage.className != "image"){
                         LinkOnImage = LinkOnImage.nextSibling;
                         if(!LinkOnImage) break;
                    }
               }
               if(LinkOnImage){
                    var Extension = LinkOnImage.href.replace(/.*\./,"").toLowerCase();
                    if(['ogg','ogv','pdf','webm'].indexOf(Extension) == -1){
                         ZoomOnThumb_LinkOnImage.push(LinkOnImage); 
                    }
               }              
          }
     }
     ZoomOnThumb_ModifyLinks();
}
 
/* TRANSFORMATION DES LIENS, MISE A JOUR VARIABLES */
function ZoomOnThumb_ModifyLinks(){
     for(var b=0;b<ZoomOnThumb_LinkOnImage.length;b++){
          var ThisLink = ZoomOnThumb_LinkOnImage[b];
          ThisLink.id = "ZoomLink_" +b;
          ThisLink.onmouseover = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnThumb_LinkOnImageState[ID] = 1; 
               ZoomOnThumb_ReplaceSrc(ID);
               setTimeout("ZoomOnThumb_ZoomIn("+ID+");", ZoomOnThumb_Delay);
          }
          ThisLink.onfocus = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnThumb_LinkOnImageState[ID] = 1; 
               ZoomOnThumb_ReplaceSrc(ID);
               setTimeout("ZoomOnThumb_ZoomIn("+ID+");", ZoomOnThumb_Delay);
          }
          ThisLink.onmouseout = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnThumb_LinkOnImageState[ID] = -1; 
               ZoomOnThumb_ZoomOut(ID);
          }
          ThisLink.onblur = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnThumb_LinkOnImageState[ID] = -1; 
               ZoomOnThumb_ZoomOut(ID);
          }
          var ThisDiv = ThisLink.parentNode;
          ThisDiv.id = "ZoomDiv_" +b;
          var ThisImage = ThisLink.getElementsByTagName('img')[0];
          ThisImage.id = "ZoomImage_" +b;
          ZoomOnThumb_LinkOnImageOriginalWidth[b] = ThisImage.width;
          ZoomOnThumb_LinkOnImageOriginalHeight[b] = ThisImage.height;
          ZoomOnThumb_LinkOnImageOriginalTarget[b] = ThisImage.src;
          ZoomOnThumb_LinkOnImageState[b] = 0;
     }
}
 
/* ZOOM AVANT */
function ZoomOnThumb_ZoomIn(ID){
     if(ZoomOnThumb_LinkOnImageState[ID]!= 1) return;
 
     var Image = document.getElementById('ZoomImage_'+ID);
     var Div = document.getElementById('ZoomDiv_'+ID);
     if((!Image)||(!Div)) return; 
 
     var ImageWidth = parseInt(Image.width);
     var ImageHeight = parseInt(Image.height);
 
     var Content = document.getElementById("bodyContent");
     if(!Content) Content = document.getElementById("mw_contentholder");
     if(!Content) Content = document.getElementById("article");
     var ContentWidth = (parseInt(Content.offsetWidth) - 30);

     if(ImageWidth<(ZoomOnThumb_LinkOnImageOriginalWidth[ID]*ZoomOnThumb_MaxMultiplicator)){
          var NewImageWidth = parseInt(ImageWidth * 1.05);
          var NewImageHeight = parseInt(ImageHeight * 1.05);
          if(NewImageWidth>ContentWidth) return;
          Image.width = NewImageWidth;
          Image.height = NewImageHeight;
          Div.style.width = (2+NewImageWidth) + 'px';
          setTimeout("ZoomOnThumb_ZoomIn("+ID+");", ZoomOnThumb_TimeOut);
     }
}
 
/* ZOOM ARRIÈRE */
function ZoomOnThumb_ZoomOut(ID){
     if(ZoomOnThumb_LinkOnImageState[ID]!= -1) return;
 
     var Image = document.getElementById('ZoomImage_'+ID);
     var Div = document.getElementById('ZoomDiv_'+ID);
     if((!Image)||(!Div)) return;
 
     var ImageWidth = parseInt(Image.width);
     var ImageHeight = parseInt(Image.height);
 
     if(ImageWidth>ZoomOnThumb_LinkOnImageOriginalWidth[ID]){
          var NewImageWidth = parseInt(ImageWidth * 0.8);
          var NewImageHeight = parseInt(ImageHeight * 0.8);
          if(NewImageWidth<ZoomOnThumb_LinkOnImageOriginalWidth[ID]){
               NewImageWidth = ZoomOnThumb_LinkOnImageOriginalWidth[ID];
               NewImageHeight = ZoomOnThumb_LinkOnImageOriginalHeight[ID];
               Image.src = ZoomOnThumb_LinkOnImageOriginalTarget[ID];
               ZoomOnThumb_LinkOnImageState[ID] = 0;
          }
          Image.width = NewImageWidth;
          Image.height = NewImageHeight;
          Div.style.width = (2+NewImageWidth) + 'px';
          setTimeout("ZoomOnThumb_ZoomOut("+ID+");", ZoomOnThumb_TimeOut);
     }
}
 
/* RECHERCHE CIBLE DE L'IMAGE EN HAUTE RÉSOLUTION */
function ZoomOnThumb_ReplaceSrc(ID){
     var Image = document.getElementById('ZoomImage_'+ID);
     var Link = document.getElementById('ZoomLink_'+ID);
     if((!Image)||(!Link)) return; 
     if(ZoomOnThumb_LinkOnImageZoomedTarget[ID]){
          Image.src = ZoomOnThumb_LinkOnImageZoomedTarget[ID];
          return;
     }
     var Cible = mw.config.get('wgFormattedNamespaces')[6] + ':' + decodeURIComponent(Link.href).split('File:')[1].replace(/(&|\?)uselang=.*/, '');
     var queryopt = {
          action: 'query',
          prop: 'imageinfo',
          iiprop: 'url',
          iiurlwidth: (ZoomOnThumb_LinkOnImageOriginalWidth[ID]*ZoomOnThumb_MaxMultiplicator),
          titles: Cible
     }
     var api = new mw.Api();
     api.get( queryopt ).then( function ( data ) {
          var pages = data.query.pages;
          if ( pages ) {
               for(var index in pages){
                    if(!pages.hasOwnProperty(index)) continue;
                    var imageinfo = pages[index].imageinfo[0];
                    if(!imageinfo) continue;
                    var thumburl = imageinfo.thumburl;
                    ZoomOnThumb_LinkOnImageZoomedTarget[ID] = thumburl;
                    if(ZoomOnThumb_LinkOnImageState[ID]!= 1) return;
                    Image.src = thumburl;
		}
          }
     } );
}
 
/* LANCEMENT */
mw.loader.using( ['mediawiki.api'], function(){ $( document ).ready(ZoomOnThumb_CheckLinks) });

// --------------------------------------------------- IMAGES GALERIES ---------------------------------------------------------------
 
/* VARIABLES */
var ZoomOnGallery_LinkOnImage = [];                 // Liste des liens "image"
var ZoomOnGallery_LinkOnImageState = [];            // État de zoom : 1 = zoom avant, -1 = zoom arrière, 0 = taille normale
var ZoomOnGallery_LinkOnImageOriginalWidth = [];    // Largeur originale de l'image
var ZoomOnGallery_LinkOnImageOriginalHeight = [];   // Hauteur originale de l'image
var ZoomOnGallery_LinkOnImageOriginalTarget = [];   // Cible originale de l'image (basse résolution)
var ZoomOnGallery_LinkOnImageZoomedTarget = [];     // Cible zoomée de l'image (haute résolution)

 
/* ÉTABLISSEMENT DE LA LISTE DES LIENS "IMAGE" */
function ZoomOnGallery_CheckLinks(){
     var Divs = document.getElementsByTagName('li');
     for(var a=0;a<Divs.length;a++){
          if($(Divs[a]).hasClass("gallerybox")){
               var DivGallery = Divs[a];
               $(DivGallery).addClass("nopopups");
               var Links = DivGallery.getElementsByTagName('a');
               var LinkOnImage = Links[0];
               if(LinkOnImage){
                    while(LinkOnImage.className != "image"){
                         LinkOnImage = LinkOnImage.nextSibling;
                         if(!LinkOnImage) break;
                    }
               }
               if(LinkOnImage){
                    var Extension = LinkOnImage.href.replace(/.*\./,"").toLowerCase();
                    if(['ogg','ogv','pdf','webm'].indexOf(Extension) == -1){
                         ZoomOnGallery_LinkOnImage.push(LinkOnImage); 
                    }
               } 
          }
     }
     ZoomOnGallery_ModifyLinks();
}
 
/* TRANSFORMATION DES LIENS, MISE A JOUR VARIABLES */
function ZoomOnGallery_ModifyLinks(){
     for(var b=0;b<ZoomOnGallery_LinkOnImage.length;b++){
          var ThisLink = ZoomOnGallery_LinkOnImage[b];
          ThisLink.id = "ZoomLink_" +(b+1000); 
          ThisLink.onmouseover = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnGallery_LinkOnImageState[ID] = 1; 
               ZoomOnGallery_ReplaceSrc(ID);
               setTimeout("ZoomOnGallery_ZoomIn("+ID+");", ZoomOnGallery_Delay);
          }
          ThisLink.onfocus = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnGallery_LinkOnImageState[ID] = 1; 
               ZoomOnGallery_ReplaceSrc(ID);
               setTimeout("ZoomOnGallery_ZoomIn("+ID+");", ZoomOnGallery_Delay);
          }
          ThisLink.onmouseout = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnGallery_LinkOnImageState[ID] = -1; 
               ZoomOnGallery_ZoomOut(ID);
          }
          ThisLink.onblur = function(){
               var ID = parseInt(this.id.split('ZoomLink_').join(''));
               ZoomOnGallery_LinkOnImageState[ID] = -1; 
               ZoomOnGallery_ZoomOut(ID);
          } 
          var ThisDiv1 = ThisLink.parentNode;
          ThisDiv1.id = "ZoomDiv1_" +(b+1000);
          var ThisThumb = ThisDiv1.parentNode;
          ThisThumb.id = "ZoomThumb_" +(b+1000);
          var ThisDiv2 = ThisThumb.parentNode;
          ThisDiv2.id = "ZoomDiv2_" +(b+1000);
          var ThisGalleryBox = ThisDiv2.parentNode;
          ThisGalleryBox.id = "ZoomGalleryBox_" +(b+1000);
          var ThisImage = ThisLink.getElementsByTagName('img')[0];
          ThisImage.id = "ZoomImage_" +(b+1000);
          ZoomOnGallery_LinkOnImageOriginalWidth[(b+1000)] = ThisImage.width;
          ZoomOnGallery_LinkOnImageOriginalHeight[(b+1000)] = ThisImage.height;
          ZoomOnGallery_LinkOnImageOriginalTarget[(b+1000)] = ThisImage.src;
          ZoomOnGallery_LinkOnImageState[(b+1000)] = 0;
     }
}
 
/* ZOOM AVANT */
function ZoomOnGallery_ZoomIn(ID){
     if(ZoomOnGallery_LinkOnImageState[ID]!= 1) return;
 
     var Image = document.getElementById('ZoomImage_'+ID);
     var Div1 = document.getElementById('ZoomDiv1_'+ID);
     var Thumb = document.getElementById('ZoomThumb_'+ID);
     var Div2 = document.getElementById('ZoomDiv2_'+ID);
     var GalleryBox = document.getElementById('ZoomGalleryBox_'+ID);
     if((!Image)||(!Div1)||(!Thumb)||(!Div2)||(!GalleryBox)) return;
 
     var ImageWidth = parseInt(Image.width);
     var ImageHeight = parseInt(Image.height);

     var Content = document.getElementById("bodyContent");
     if(!Content) Content = document.getElementById("mw_contentholder");
     if(!Content) Content = document.getElementById("article");
     var ContentWidth = (parseInt(Content.offsetWidth) - 30);
     var Factor = (100+ZoomOnGallery_ZoomFactor)/100;

     var MaxWidth = (parseInt(ZoomOnGallery_LinkOnImageOriginalWidth[ID])*parseInt(ZoomOnGallery_MaxMultiplicator));
     if(ImageWidth<MaxWidth){
          var NewImageWidth = parseInt(ImageWidth * Factor);
          var NewImageHeight = parseInt(ImageHeight * Factor);
          if(NewImageWidth>ContentWidth) return;
          var MaxSize = NewImageWidth;
          if(ImageHeight>NewImageWidth) MaxSize = NewImageHeight;
          Image.width = NewImageWidth;
          Image.height = NewImageHeight;
          Div1.style.width = NewImageWidth + 'px';
          Thumb.style.width = Math.floor( MaxSize+30 ) + 'px';
          Thumb.style.height = Math.floor( MaxSize+30 ) + 'px';
          Div2.style.width = Math.floor( MaxSize+35 ) + 'px';
          GalleryBox.style.width = Math.floor( MaxSize+35 ) + 'px';
          setTimeout("ZoomOnGallery_ZoomIn("+ID+");", ZoomOnGallery_TimeOut);
     }
}
 
function ZoomOnGallery_GetWidth(Node){
     return parseInt(Node.style.width.split("px").join(""));
}
function ZoomOnGallery_GetHeight(Node){
     return parseInt(Node.style.height.split("px").join(""));
}

/* ZOOM ARRIÈRE */
function ZoomOnGallery_ZoomOut(ID){
     if(ZoomOnGallery_LinkOnImageState[ID]!= -1) return;
 
     var Image = document.getElementById('ZoomImage_'+ID);
     var Div1 = document.getElementById('ZoomDiv1_'+ID);
     var Thumb = document.getElementById('ZoomThumb_'+ID);
     var Div2 = document.getElementById('ZoomDiv2_'+ID);
     var GalleryBox = document.getElementById('ZoomGalleryBox_'+ID);
     if((!Image)||(!Div1)||(!Thumb)||(!Div2)||(!GalleryBox)) return;
 
     var ImageWidth = parseInt(Image.width);
     var ImageHeight = parseInt(Image.height);
     var MinWidth = ZoomOnGallery_LinkOnImageOriginalWidth[ID];
     var Factor = 0.8;
     if(ImageWidth>MinWidth){
          var NewImageWidth = parseInt(ImageWidth * Factor);
          var NewImageHeight = parseInt(ImageHeight * Factor);
          if(NewImageWidth<MinWidth){
               Factor = 0.9;
               NewImageWidth = parseInt(ImageWidth * Factor);
               NewImageHeight = parseInt(ImageHeight * Factor);
               if(NewImageWidth<MinWidth){
                    Factor = 0.95;
                    NewImageWidth = parseInt(ImageWidth * Factor);
                    NewImageHeight = parseInt(ImageHeight * Factor);
                    if(NewImageWidth<MinWidth){
                         NewImageWidth = ZoomOnGallery_LinkOnImageOriginalWidth[ID];
                         NewImageHeight = ZoomOnGallery_LinkOnImageOriginalHeight[ID];
                         Image.src = ZoomOnGallery_LinkOnImageOriginalTarget[ID];
                         ZoomOnGallery_LinkOnImageState[ID] = 0;
                         return;
                    }
               }
          }
          var MaxSize = NewImageWidth;
          if(ImageHeight>NewImageWidth) MaxSize = NewImageHeight;
          Image.width = NewImageWidth;
          Image.height = NewImageHeight;
          Image.width = NewImageWidth;
          Image.height = NewImageHeight;
          Div1.style.width = NewImageWidth + 'px';
          Thumb.style.width = (MaxSize+30) + 'px';
          Thumb.style.height = (MaxSize+30) + 'px';
          Div2.style.width = (MaxSize+35) + 'px';
          GalleryBox.style.width = (MaxSize+35) + 'px';
          setTimeout("ZoomOnGallery_ZoomOut("+ID+");", ZoomOnGallery_TimeOut);
     }
}
 
/* RECHERCHE CIBLE DE L'IMAGE EN HAUTE RÉSOLUTION */
function ZoomOnGallery_ReplaceSrc(ID){
     var Image = document.getElementById('ZoomImage_'+ID);
     var Link = document.getElementById('ZoomLink_'+ID);
     if((!Image)||(!Link)) return;
     if(ZoomOnGallery_LinkOnImageZoomedTarget[ID]){
          Image.src = ZoomOnGallery_LinkOnImageZoomedTarget[ID];
          return;
     }
     var Cible = mw.config.get('wgFormattedNamespaces')[6] + ':' + decodeURIComponent(Link.href).split('File:')[1].replace(/(&|\?)uselang=.*/, '');
     var queryopt = {
          action: 'query',
          prop: 'imageinfo',
          iiprop: 'url',
          iiurlwidth: (ZoomOnGallery_LinkOnImageOriginalWidth[ID]*ZoomOnGallery_MaxMultiplicator),
          titles: Cible
     }
     var api = new mw.Api();
     api.get( queryopt ).then( function ( data ) {
          var pages = data.query.pages;
          if ( pages ) {
               for(var index in pages){
                    if(!pages.hasOwnProperty(index)) continue;
                    var imageinfo = pages[index].imageinfo[0];
                    if(!imageinfo) continue;
                    var thumburl = imageinfo.thumburl;
                    ZoomOnGallery_LinkOnImageZoomedTarget[ID] = thumburl;
                    if(ZoomOnGallery_LinkOnImageState[ID] != 1) return;
                    Image.src = thumburl;
		}
          }
     } );
}


/* LANCEMENT */
mw.loader.using( ['mediawiki.api'], function(){ $( document ).ready(ZoomOnGallery_CheckLinks) });


//</nowiki></pre>
//</source>
Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Utilisateur:Dr_Brains/ZoomOnThumb.js&oldid=113610008 ».