SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 149 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Traitement d’images > Image Zoom > Une Loupe pour les Vignettes

Une Loupe pour les Vignettes

5 octobre 2008 – par mortimer – commentaires

Toutes les versions de cet article : [English] [français]

1 vote

Le modèle d’insertion d’image par défaut de spip affiche seulement une vignette de l’image. Ce plugin offre un nouveau modèle qui ajoute une loupe sur la vignette de l’image pour voir les détails sans ouvrir une nouvelle fenêtre.

Ce plugin ajoute un modèle pour afficher une loupe sur une image et offrir un agrandissement localisé : <imgXX|zoom>.

Encore mieux, on peut utiliser une image de plus forte résolution pour l’agrandissement, mais laisser une petite vignette pour l’image de base.

La page de configuration permet de spécifier un style pour la loupe et des styles personnalisés peuvent être créés avec la notation détaillé à la fin de cet article.

Le code est basé sur TJPZoom par Jànos Tòth.

Le plugin ne marche qu’avec les squelettes utilisant la balise #INSERT_HEAD

Si vous utilisez SPIP 1.9.2, il faut télécharger la librairie javascript TJPZoom et placer le contenu de l’archive dans un répertoire tjpzoom dans votre répertoire squelettes. Si vous utilisez SPIP 2, cela sera fait automatiquement pour vous.

Utilisation de la Loupe

La loupe est activée dès que la souris entre sur la vignette de l’image. Si l’image d’origine est très grosse, alors un message « loading... » apparaît et la loupe utilise la vignette pour le grossissement en attendant d’avoir la version haute résolution.

En gardant le bouton gauche de la souris pressé sur l’image et en déplaçant la souris de haut en bas, on peut changer le niveau de grossissement de la loupe.

En gardant le bouton gauche de la souris pressé sur l’image et en déplaçant la souris de gauche à droite, on peut changer la taille de la loupe.

Options du Modèle

Le modèle <imgXX|zoom> peut être aligner à droite ou à gauche avec, respectivement, <imgXX|zoom|right> et <imgXX|zoom|left>. Attention, contrairement à l’alignement de la balise img de SPIP, ce modèle ne permet pas de faire « couler » le texte autour de l’image.

La largeur maximale de la vignette insérée dans le texte peut être définie globalement depuis la page de configuration ou avec le paramètre <imgXX|size=340>

Format des styles personnalisés

La configuration d’un style personnalisé se fait à travers d’un fichier de configuration en javascript. Ce fichier doit être nommé tjpzoom_config_XXXX.js et être placé dans votre répertoire squelettes.

Le fichier définit un certain nombre de variables :

Variables de Configuration
variableutilisation
var TJPzoomwidth=160; largeur initiale de la loupe
var TJPzoomheight=120; hauteur initiale de la loupe
var TJPzoomwindowlock=0; si la variable est égale à 1, la taille de la loupe est fixée
var TJPzoomoffsetx=.5; déplacement vertical de la loupe par rapport à la souris. 0.5 centre la loupe
var TJPzoomoffsety=.5; déplacement horizontal de la loupe par rapport à la souris. 0.5 centre la loupe
var TJPzoomamount=4; zoom initial de la loupe
var TJPzoomamountmax=12; zoom maximum de la loupe
var TJPzoomamountmin=1; zoom minimum de la loupe
var TJPborderthick=2; largeur de la bordure
var TJPbordercolor='#cccccc'; couleur de la bordure

En plus de ces paramètre, on peut spécifier une bordure autour de la loupe. Pour personnalisé cette bordure, il faut créer un répertoire XXXX dans le répertoire squelettes qui contient les images pour la bordure. Le répertoire doit contenir huit images png :
n.png, ne.png, e.png, se.png, s.png, sw.png, w.png, nw.png qui sont les coins et les bords.

Il faut aussi ajouter dans le fichier de configuration la moitié de la largeur des image : var TJPshadowthick=8;

Voir en ligne : http://plugins.spip.net/tjpzoom

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 18 février 2012 à 16:52, par benolaos En réponse à : Une Loupe pour les Vignettes

    Salut fd,
    bizarre quand même,
    premier « comment » depuis le dépôt du plugin (2008) et tout ça pour dire que ça ne marche pas.
    Ce plugin n’intéresse-t-il donc personne ;-)

    Répondre à ce message

  • Le 17 février 2012 à 16:08, par fd En réponse à : Une Loupe pour les Vignettes

    Dommage sur une 2.1.12 ça ne fonctionne pas ça me donne ce message d’erreur

    Impossible d’activer le plugin ../plugins/imagezoom

    Nécessite SPIP en version [1.9.0 ;2.0.99] minimum.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Escal-V3 et Escal-V4

    16 février 2012 – 317 commentaires

    Un jeu de squelettes proposant un affichage en 2 ou 3 colonnes avec un large choix de noisettes à insérer ou pas, fortement paramétrable depuis l’espace privé. Présentation A l’instar de sa petite soeur plugin Escal-V2 dont elle reprend toutes les (...)

  • Planning simple

    9 septembre 2015 – commentaires

    Ce plugin permet de créer et imprimer un emploi du temps de façon simple. Il dispose de deux méthodes, l’une est d’écrire une liste des évènements dans le corps de l’article, l’autre requiert le plugin agenda. Le plugin planning simple permet (...)

  • Réservation d’événements

    16 mars 2015 – 348 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification Facteur (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 201 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

  • Plugin Zoombox pour Spip

    7 octobre 2011 – 39 commentaires

    Le plugin Zoombox vous permet d’ajout un effet de présentation agréable sur vos images et vos vidéos. Présentation Le plugin Zoombox pour Spip est une adaptation du plugin Jquery créé par un développeur devenu célèbre grâce à ses nombreux tutoriels (...)