SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 103 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

  • Titre de logo v2

    23 mai 2014 – 22 commentaires

    La version 2 du plugin Titre de logo reprend les mêmes fonctions que la v1 mais étend le titre et le descriptif aux logos de tout objet éditorial de SPIP. Vous pouvez toujours vous référer à l’article de la version 1 pour retrouver les fonctions (...)

  • Plugin Figures

    10 octobre 2017 – commentaires

    Modèles d’insertion des documents en HTML5, avec figure et figcaption. Envie d’utiliser HTML5 sur tout votre site, y compris les modèles d’insertion des documents de SPIP ? Aussitôt installé, ce plugin utilise les éléments HTML5 figure et figcaption (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 21 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • cibloc : mettre en forme le texte d’articles avec des blocs

    9 juillet – 13 commentaires

    Le plugin CIBLOC permet de mettre en forme le texte d’articles avec des blocs. Il offre des blocs, des colonnes, des icônes et des boutons. Les objectifs de ce plugin Le plugin CIBLOC offre des blocs, des colonnes, des icônes et des boutons : (...)

  • PHANTOM (HTML5UP)

    18 juillet – 11 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)