Une loupe pour vos vignettes

Published : 9 December 2005 – updated on 21 December 2021 – by mortimer – 8 commentaires

1
2
3
4
5
6 Votes
Voici un petit exemple de comment utiliser un javascript pour ajouter une loupe sur vos vignettes de documents.

Le javascript offert par http://valid.tjp.hu/zoom/ permet de facilement ajouter une loupe sur une image [1].

En ajoutant un simple script, on voit apparaitre sur son image une petite boîte qui offre un agrandissement localisé. Avec 4 raccourcis clavier pour personnaliser la loupe:

  • droite et gauche changent la taille de la loupe,
  • haut et bas changent le niveau d’agrandissement.

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.

On va donner ici un code qui permet d’utiliser ce script en combinaison avec le système de vignettes de SPIP. Ce code pourra alors être utilisé avec n’importe quelle boucle de galerie pour afficher vos photos avec un petit plus.

Il faut tout d’abord insérer le code javascript dans l’entète de votre page, remplacez:

<head>

par:

<script type="text/javascript" src="http://valid.tjp.hu/zoom/tjpzoom.js"></script>
</head>

Ensuite, là où normalement, dans votre boucle de galerie, vous trouvez #LOGO_DOCUMENT, ou tout autre insertion de l’image, mettez:

[<div style="float:left"
onmouseover="zoom_on(event,[(#FICHIER|reduire_image{200}|largeur)],[(#FICHIER|reduire_image{200}|hauteur)],'[(#FICHIER|reduire_image{200}|extraire_attribut{src})]', '#URL_DOCUMENT');"
onmousemove="zoom_move(event);"
onmouseout="zoom_off();">
(#FICHIER|reduire_image{200}|inserer_attribut{'alt',#TITRE})
</div>
<div style="clear:both;"></div>]

Avec ce code, on crée des vignettes de 200px maximum de côté, mais vous pouvez ajuster cette taille.

Par exemple, pour afficher 5 vignettes au hazard:

<BOUCLE_doc(DOCUMENTS) {par hasard} {extension=jpg} {0,5} {mode=document} {"<hr>"}>
[<div style="float:left" onmouseover="zoom_on(event,[(#FICHIER|reduire_image{200}|largeur)],[(#FICHIER|reduire_image{200}|hauteur)],'[(#FICHIER|reduire_image{200}|extraire_attribut{src})]', '#URL_DOCUMENT');" onmousemove="zoom_move(event);" onmouseout="zoom_off();">
(#FICHIER|reduire_image{200}|inserer_attribut{'alt',#TITRE})
</div>
<div style="clear:both;"></div>]
</BOUCLE_doc>

Footnotes

[1] pour voir une démo, allez sur le site de l’auteur du script.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

5 discussions

  • 1
    Lucie

    Bonjour !
    Ce plugin est-il compatible avec SPIP 3.1 ? il semble que non... mais sait-on jamais !

    • Maïeul

      Bonjour,

      ce plugin n’a pas été testé pour SPIP 3.1. Cela ne veut pas dire qu’il n’est pas compatible 3.1, mais qu’on ne sait pas.

      Tu peux faire toi même les tests et nous faire un retour.

      Dans le fichier plugin.xml, remplacer

      <necessite id="SPIP" version="[1.9.2;2.0.99]" />

      par

      <necessite id="SPIP" version="[1.9.2;3.1.99]" />

      Cela te permettra d’activer le plugin, et de faire des tests.

    Reply to this message

  • 1
    DD

    Je signale que le lien vers la source du javascript est cassé (http://valid.tjp.hu/zoom/)

    Mais bon apparemment ce plugin n’est pas compatible SPIP 3.1

    Reply to this message

  • Philippe

    Bonjour,

    J’ai un site sous Spip 2 avec une page des sponsors de mon Club. Voulant augmenter la taille des vignettes au survol de la souris, j’ai eu l’idée d’utiliser ce Plugin. Je me demande comment le configurer de telle sorte que la loupe prenne une taille plus grande a l’arrivée sur l’image, si c’est possible.

    Par ailleurs, l’augmentation du zoom ou de la taille de la loupe marche bien en gardant le bouton gauche enfoncé.

    Lien vers la page en question

    Ci dessous mon fichier de configuration perso.

    // TJPzoom 3 configuration file * János Pál Tóth
// 2007.04.28
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/

// DEFAULT
// a bit of a border (2px)
// and a bit of a drop shadow

var TJPzoomwidth=800;              //zoom window size
var TJPzoomheight=600; 
var TJPzoomwindowlock=0;           //set to 1 to lock window size

var TJPzoomoffsetx=.5;
var TJPzoomoffsety=.5;

var TJPzoomamount=1.2;
var TJPzoomamountmax=2;
var TJPzoomamountmin=1;

var TJPborderthick=2;              //border thickness, SET 0 to no borders
var TJPbordercolor='#cccccc';      //border color

var TJPshadowthick=0;              //shadow image size/2, SET 0 to have no shadows (saves cpu)
var TJPshadow='dropshadow/';       // <>: n, ne, e, se, s, sw, w, nw - TJPshadow+'nw.png'

// TJPzoom 3 configuration file * János Pál Tóth
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/

    Merci pour le support.

    Philippe

    Reply to this message

  • druith

    C’est juste pour signaler que ça n’a pas l’air de fonctionner sous Internet Explorer mais sinon, l’effet est vraiment bon sous firefox.

    C’est d’ailleurs étrange que ça ne fonctionne pas sous IE parce que l’exemple “officiel” avec le type déguisé en chien marche bien, lui, sous IE... à voir.

    Reply to this message

  • 1
    geopraem

    Bonjour!

    Est-il possible de n’utiliser ce javascript que pour une seule image d’un seul article?

    Merci!
    Geoffroy

    • mortimer

      He bien, à priori il n’y a pas de problème je pense, mais il faut mettre le html à la main dans le texte de l’article, pour:
      1- importer la librairie javascript
      2- mettre le code html correct avec les bons noms de fichier.

      Voir le code original sur le site du gars qui a fait la librairie.

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom