SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 344 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

  • Champs Extras 3

    16 janvier 2012 – 552 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Partageur

    29 janvier 2011 – 40 commentaires

    Permet de recopier facilement des articles d’un site SPIP partageur à l’autre. Ce plugin est encore en version beta. Les retours et critiques sont les bienvenus ... Présentation Ce plugin est né d’un besoin de partager des articles entre sites (...)

  • Formulaire de participation

    5 juin 2014 – 22 commentaires

    Formulaire de participation permet d’indiquer lors des traitements d’un formulaire construit avec le plugin Formidable si l’on doit traiter une inscription d’un participant à un évènement. Installation Ce plugin nécessite le plugin Formidable et (...)

  • Plugin Duplicator

    3 janvier 2010 – 79 commentaires

    Duplication de rubrique et de ses contenus, et duplication d’articles pour SPIP Fonctionnement Ce plugin permet de dupliquer une rubrique et son contenu depuis l’espace privé en ajoutant un bouton dans la navigation de gauche dans l’espace privé (...)

  • Albums 3

    8 août 2014 – 218 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)