// Permet de zoomer une image ("thumb" ou galerie) au survol de la souris ou au focus du clavier
// Documentation : [[Discussion utilisateur:Dr Brains/ZoomOnThumb.js]]
// [[Catégorie:MediaWiki:Fonction Monobook en JavaScript]]
//<source lang=javascript>
//<pre><nowiki>
////////////////////////////////////////////////////////////// VARIABLES PERSONNALISABLES //////////////////////////////////////////
//// Images thumb simples ////
// délai 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 en millisecondes
if(typeof(ZoomOnGallery_TimeOut)=="undefined") var ZoomOnGallery_TimeOut = 50;
// multiplicateur de grossissement max
if(typeof(ZoomOnGallery_MaxMultiplicator)=="undefined") var ZoomOnGallery_MaxMultiplicator = 3;
////////////////////////////////////////////////////////////// FONCTIONS //////////////////////////////////////////
// --------------------------------------------------- THUMB ----------------------------------------------------------------------
/* VARIABLES */
var ZoomOnThumb_LinkOnImage = new Array(); // Liste des liens "image"
var ZoomOnThumb_LinkOnImageState = new Array(); // État de zoom : 1 = zoom avant, -1 = zoom arrière, 0 = taille normale
var ZoomOnThumb_LinkOnImageOriginalWidth = new Array(); // Largeur originale de l'image
var ZoomOnThumb_LinkOnImageOriginalHeight = new Array(); // Hauteur originale de l'image
var ZoomOnThumb_LinkOnImageOriginalTarget = new Array(); // Cible originale de l'image (basse résolution)
var ZoomOnThumb_LinkOnImageZoomedTarget = new Array(); // Cible zoomée de l'image (haute résolution)
/* LANCEMENT */
$(ZoomOnThumb_CheckLinks);
/* É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 Links = DivThumb.getElementsByTagName('a');
var LinkOnImage = Links[0];
while(LinkOnImage.className != "image"){
LinkOnImage = LinkOnImage.nextSibling;
if(!LinkOnImage) break;
}
if(LinkOnImage) 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);
ZoomOnThumb_ZoomIn(ID);
}
ThisLink.onfocus = function(){
var ID = parseInt(this.id.split('ZoomLink_').join(''));
ZoomOnThumb_LinkOnImageState[ID] = 1;
ZoomOnThumb_ReplaceSrc(ID);
ZoomOnThumb_ZoomIn(ID);
}
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);
if(ImageWidth<(ZoomOnThumb_LinkOnImageOriginalWidth[ID]*ZoomOnThumb_MaxMultiplicator)){
var NewImageWidth = parseInt(ImageWidth * 1.05);
var NewImageHeight = parseInt(ImageHeight * 1.05);
if(NewImageWidth>(ZoomOnThumb_LinkOnImageOriginalWidth[ID]*ZoomOnThumb_MaxMultiplicator)) ZoomOnThumb_LinkOnImageState[ID] = 0;
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] + ':' + Link.href.split(mw.config.get('wgFormattedNamespaces')[6] + ':')[1];
var WikitextNewImage = '[['+Cible+'|thumb|'+(ZoomOnThumb_LinkOnImageOriginalWidth[ID]*ZoomOnThumb_MaxMultiplicator)+'px]]';
var AdresseRequete = mw.config.get('wgServer') + '/w/api.php?action=parse&text=' + WikitextNewImage;
var NouvelleRequete = sajax_init_object();
NouvelleRequete.open("GET", AdresseRequete, true);
NouvelleRequete.onreadystatechange = function() {
if(NouvelleRequete.readyState != 4 || NouvelleRequete.status != 200) return;
var ElementTraitement = document.createElement('div');
ElementTraitement.innerHTML = NouvelleRequete.responseText;
var Informations = ElementTraitement.getElementsByTagName('pre')[0];
var Link = Informations.getElementsByTagName('a')[0];
if(Link){
var NewSrcImage = Link.href.replace(/"$/g,"");
ZoomOnThumb_LinkOnImageZoomedTarget[ID] = NewSrcImage;
if(ZoomOnThumb_LinkOnImageState[ID]!= 1) return;
Image.src = NewSrcImage;
}
}
NouvelleRequete.send(null);
}
// --------------------------------------------------- GALERIES ----------------------------------------------------------------------
/* VARIABLES */
var ZoomOnGallery_LinkOnImage = new Array(); // Liste des liens "image"
var ZoomOnGallery_LinkOnImageState = new Array(); // État de zoom : 1 = zoom avant, -1 = zoom arrière, 0 = taille normale
var ZoomOnGallery_LinkOnImageOriginalWidth = new Array(); // Largeur originale de l'image
var ZoomOnGallery_LinkOnImageOriginalHeight = new Array(); // Hauteur originale de l'image
var ZoomOnGallery_LinkOnImageOriginalTarget = new Array(); // Cible originale de l'image (basse résolution)
var ZoomOnGallery_LinkOnImageZoomedTarget = new Array(); // Cible zoomée de l'image (haute résolution)
/* LANCEMENT */
$(ZoomOnGallery_CheckLinks);
/* ÉTABLISSEMENT DE LA LISTE DES LIENS "IMAGE" */
function ZoomOnGallery_CheckLinks(){
var Divs = document.getElementsByTagName('div');
for(var a=0;a<Divs.length;a++){
if(hasClass(Divs[a],"gallerybox")){
var DivGallery = Divs[a];
var Links = DivGallery.getElementsByTagName('a');
var LinkOnImage = Links[0];
while(LinkOnImage.className != "image"){
LinkOnImage = LinkOnImage.nextSibling;
if(!LinkOnImage) break;
}
if(LinkOnImage) 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);
ZoomOnGallery_ZoomIn(ID);
}
ThisLink.onfocus = function(){
var ID = parseInt(this.id.split('ZoomLink_').join(''));
ZoomOnGallery_LinkOnImageState[ID] = 1;
ZoomOnGallery_ReplaceSrc(ID);
ZoomOnGallery_ZoomIn(ID);
}
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 ThisDiv = ThisLink.parentNode;
ThisDiv.id = "ZoomDiv_" +(b+1000);
var ThisThumb = ThisDiv.parentNode;
ThisThumb.id = "ZoomThumb_" +(b+1000);
var ThisGalleryBox = ThisThumb.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 Div = document.getElementById('ZoomDiv_'+ID);
var Thumb = document.getElementById('ZoomThumb_'+ID);
var GalleryBox = document.getElementById('ZoomGalleryBox_'+ID);
if((!Image)||(!Div)||(!Thumb)||(!GalleryBox)) return;
var ImageWidth = parseInt(Image.width);
var ImageHeight = parseInt(Image.height);
var MaxWidth = (parseInt(ZoomOnGallery_LinkOnImageOriginalWidth[ID])*parseInt(ZoomOnGallery_MaxMultiplicator));
if(ImageWidth<MaxWidth){
var NewImageWidth = parseInt(ImageWidth * 1.05);
var NewImageHeight = parseInt(ImageHeight * 1.05);
if(NewImageWidth>MaxWidth) ZoomOnGallery_LinkOnImageState[ID] = 0;
Image.width = NewImageWidth;
Image.height = NewImageHeight;
Div.style.width = NewImageWidth + 'px';
Thumb.style.width = (NewImageWidth+30) + 'px';
GalleryBox.style.width = (NewImageWidth+35) + 'px';
setTimeout("ZoomOnGallery_ZoomIn("+ID+");", ZoomOnGallery_TimeOut);
}
}
/* ZOOM ARRIÈRE */
function ZoomOnGallery_ZoomOut(ID){
if(ZoomOnGallery_LinkOnImageState[ID]!= -1) return;
var Image = document.getElementById('ZoomImage_'+ID);
var Div = document.getElementById('ZoomDiv_'+ID);
var Thumb = document.getElementById('ZoomThumb_'+ID);
var GalleryBox = document.getElementById('ZoomGalleryBox_'+ID);
if((!Image)||(!Div)||(!Thumb)||(!GalleryBox)) return;
var ImageWidth = parseInt(Image.width);
var ImageHeight = parseInt(Image.height);
var MinWidth = ZoomOnGallery_LinkOnImageOriginalWidth[ID];
if(ImageWidth>MinWidth){
var NewImageWidth = parseInt(ImageWidth * 0.8);
var NewImageHeight = parseInt(ImageHeight * 0.8);
if(NewImageWidth<MinWidth){
NewImageWidth = ZoomOnGallery_LinkOnImageOriginalWidth[ID];
NewImageHeight = ZoomOnGallery_LinkOnImageOriginalHeight[ID];
Image.src = ZoomOnGallery_LinkOnImageOriginalTarget[ID];
ZoomOnGallery_LinkOnImageState[ID] = 0;
}
Image.width = NewImageWidth;
Image.height = NewImageHeight;
Div.style.width = NewImageWidth + 'px';
Thumb.style.width = (NewImageWidth+30) + 'px';
GalleryBox.style.width = (NewImageWidth+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] + ':' + Link.href.split(mw.config.get('wgFormattedNamespaces')[6] + ':')[1];
var WikitextNewImage = '[['+Cible+'|thumb|'+(ZoomOnGallery_LinkOnImageOriginalWidth[ID]*ZoomOnGallery_MaxMultiplicator)+'px]]';
var AdresseRequete = mw.config.get('wgServer') + '/w/api.php?action=parse&text=' + WikitextNewImage;
var NouvelleRequete = sajax_init_object();
NouvelleRequete.open("GET", AdresseRequete, true);
NouvelleRequete.onreadystatechange = function() {
if(NouvelleRequete.readyState != 4 || NouvelleRequete.status != 200) return;
var ElementTraitement = document.createElement('div');
ElementTraitement.innerHTML = NouvelleRequete.responseText;
var Informations = ElementTraitement.getElementsByTagName('pre')[0];
var Link = Informations.getElementsByTagName('a')[0];
if(Link){
var NewSrcImage = Link.href.replace(/"$/g,"");
ZoomOnGallery_LinkOnImageZoomedTarget[ID] = NewSrcImage;
if(ZoomOnGallery_LinkOnImageState[ID]!= 1) return;
Image.src = NewSrcImage;
}
}
NouvelleRequete.send(null);
}
//</nowiki></pre></source>