SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 81 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Images réactives > Une loupe pour vos vignettes

Une loupe pour vos vignettes

9 décembre 2005 – par mortimer – commentaires

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 :

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

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 :

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

Notes

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

Dernière modification de cette page le 8 septembre 2018

Retour en haut de la page

Vos commentaires

  • Le 9 mai 2017 à 01:39, par Lucie En réponse à : Une loupe pour vos vignettes

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

    • Le 9 mai 2017 à 10:51, par Maïeul En réponse à : Une loupe pour vos vignettes

      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

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

      par

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

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

    Répondre à ce message

  • Le 22 février 2017 à 16:06, par DD En réponse à : Une loupe pour vos vignettes

    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

    Répondre à ce message

  • Le 31 juillet 2009 à 16:16, par Philippe En réponse à : Une loupe pour vos vignette

    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

    Répondre à ce message

  • Le 30 décembre 2005 à 10:36, par druith En réponse à : Une loupe pour vos vignette

    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.

    Répondre à ce message

  • Le 19 décembre 2005 à 13:53, par geopraem En réponse à : Dans un article

    Bonjour !

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

    Merci !
    Geoffroy

    • Le 19 décembre 2005 à 16:34, par mortimer En réponse à : Dans un article

      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.

    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

  • Convertir un site SPIP 3 en utf-8 avec le plugin Grenier

    8 janvier 2014 – 24 commentaires

    SPIP 3 fonctionne nativement avec l’encodage universel unicode utf-8. Sur certains sites (par exemple sur une mise à jour), on peut avoir un site qui est resté en iso-latin ce qui n’est pas conseillé (source de bugs, d’incompatibilité, ...) . (...)

  • Hébergeurs payants

    24 janvier 2009 – 34 commentaires

    Cet article en encore à réorganiser / scinder en deux selon le type (mutualisé ou pro). À priori, SPIP fonctionnera sur tout hébergeur payant traditionnel (qui propose PHP et MySQL). Merci de ne pas mettre des remarques du genre « l’hébergeur truc (...)

  • MediaBox

    10 mai 2010 – 539 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • DocumentationFormsTables

    9 décembre 2006 – commentaires

    Article publié : ces notes et d’autres sont désormais publiées sur SPIP-Contrib ici Forms & tables - carnet de notes, donc il faut mieux y aller pour tout complément Différence entre un formulaire et une table un formulaire est dédié a la saisie (...)

  • GIS 4

    11 août 2012 – 1495 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)