Projet:Scripts et gadgets/Notices/ZoomOnThumb

PROJET SCRIPTS ET GADGETS

Centraliser les fonctions JavaScript et CSS pour éviter la dispersion du code.

MediaWiki:Gadget-ZoomOnThumb.js est un code javaScript permettant de zoomer sur une image au survol de la souris ou au focus du clavier. Sur les navigateurs compatibles, il permet également d'agrandir les vidéos.

Fonctions

Zoom sur images

Le zoom sur les images (de classe « thumb » ou en galeries) s'active après un court délai au survol de la souris.

Testé avec succès sur :

Firefox 3.5
Internet Explorer 8
Opera 10
Google Chrome 4
Safari 4.0.5

Zoom sur vidéos

Le zoom des vidéos (« thumb » et galeries) est possible également via deux liens (+) et (-) disponibles après le premier clic sur le bouton de lecture. Cette fonction, désactivée par défaut, ne fonctionne pas avec tous les navigateurs et peut ne pas marcher avec tous les lecteurs de vidéo.

Testé avec succès sur :

Firefox 3.5
Google Chrome 4

Ne fonctionne pas (encore) sur :

Internet Explorer 8
Safari 4.0.5

Non testé sur :

Opera 10

Installation sur Wikipedia en français

Pour bénéficier de ce gadget, deux solutions :

1. Sélectionner le gadget dans Spécial:Préférences > Gadgets > Gadgets généraux > ZoomOnThumb

Cette solution a l'avantage de la simplicité mais ne permet par de personnalisation, ni l'activation du zoom pour les vidéos.

2. ajouter à votre page personnelle .js le code suivant :

obtenir('ZoomOnThumb');

Cette solution permet de personnaliser certains paramètres.

Installation sur un autre wiki

Ajouter à votre page personnelle .js (sur commons il s'agit par défaut de User:MACHIN/vector.js) le code suivant :

importScriptURI('//fr.wikipedia.org/w/index.php?title='
              +'MediaWiki:Gadget-ZoomOnThumb.js'
              +'&action=raw&ctype=text/javascript');

Paramètres

Des paramètres peuvent être définis concernant :

Le délai avant le début du zoom, en milisecondes (200 millisecondes par défaut, pour les images seulement)
La vitesse du zoom (avant et arrière), ou plus exactement le délai entre deux "crans" de zoom, en millisecondes;
La taille maximale (multiplicateur de la taille originale, 3 par défaut)

Le comportement sur les « thumb » et sur les galeries sont définis séparément, ainsi que celui des images et des vidéos. Pour ces dernières, le zoom s'effectue grâce à deux liens (+) et (-) ajoutés sous la vidéo après le clic sur le bouton de lecture.

L'activation du zoom sur les vidéos se fait à l'aide d'un paramètre supplémentaire et un autre permet de lancer le zoom automatiquement après le clic sur le bouton de lecture (désactivé par défaut).

Exemple de personnalisation sur Wikipedia en français

////  Images thumb
window.ZoomOnThumb_Delay = 300;            // délai avant zoom en millisecondes
window.ZoomOnThumb_TimeOut = 60;           // délai entre deux étapes d'agrandissement en millisecondes
window.ZoomOnThumb_MaxMultiplicator = 3.5; // multiplicateur de grossissement max

////  Images galeries
window.ZoomOnGallery_Delay = 300;            // délai avant zoom en millisecondes
window.ZoomOnGallery_TimeOut = 100;          // délai entre deux étapes d'agrandissement en millisecondes
window.ZoomOnGallery_MaxMultiplicator = 2.5; // multiplicateur de grossissement max

////  Vidéos thumb
window.ZoomOnVideoThumb_Activated = true;       // Activation
window.ZoomOnVideoThumb_TimeOut = 60;           // délai entre deux étapes d'agrandissement en millisecondes
window.ZoomOnVideoThumb_MaxMultiplicator = 3.5; // multiplicateur de grossissement max
window.ZoomOnVideoThumb_AutoZoom = true;        // Zoom automatique

////  Vidéos galeries
window.ZoomOnVideoGallery_Activated = true;       // Activation
window.ZoomOnVideoGallery_TimeOut = 100;          // délai entre deux étapes d'agrandissement en millisecondes
window.ZoomOnVideoGallery_MaxMultiplicator = 2.5; // multiplicateur de grossissement max
window.ZoomOnVideoGallery_AutoZoom = true;        // Zoom automatique

obtenir('ZoomOnThumb');

Exemple de personnalisation sur un autre wiki

////  Images thumb
window.ZoomOnThumb_Delay = 300;            // délai avant zoom en millisecondes
window.ZoomOnThumb_TimeOut = 60;           // délai entre deux étapes d'agrandissement en millisecondes
window.ZoomOnThumb_MaxMultiplicator = 3.5; // multiplicateur de grossissement max

////  Images galeries
window.ZoomOnGallery_Delay = 300;            // délai avant zoom en millisecondes
window.ZoomOnGallery_TimeOut = 100;          // délai entre deux étapes d'agrandissement en millisecondes
window.ZoomOnGallery_MaxMultiplicator = 2.5; // multiplicateur de grossissement max

////  Vidéos thumb
window.ZoomOnVideoThumb_Activated = true;       // Activation
window.ZoomOnVideoThumb_TimeOut = 60;           // entre deux étapes d'agrandissement en millisecondes
window.ZoomOnVideoThumb_MaxMultiplicator = 3.5; // multiplicateur de grossissement max
window.ZoomOnVideoThumb_AutoZoom = true;        // Zoom automatique

////  Vidéos galeries
window.ZoomOnVideoGallery_Activated = true;       // Activation
window.ZoomOnVideoGallery_TimeOut = 100;          // entre deux étapes d'agrandissement en millisecondes
window.ZoomOnVideoGallery_MaxMultiplicator = 2.5; // multiplicateur de grossissement max
window.ZoomOnVideoGallery_AutoZoom = true;        // Zoom automatique


importScript( 'MediaWiki:Gadget-ZoomOnThumb.js' );