SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 254 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 ?
  • [Se connecter]

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

  • Adaptive Images

    15 novembre 2013 – 66 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là