SPIP-Contrib

SPIP-Contrib

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

251 Plugins, 182 contribs sur SPIP-Zone, 37 visiteurs en ce moment

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

Une loupe pour vos vignettes

9 décembre 2005 – par mortimer – commentaires

3 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 :

Notes

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

Retour en haut de la page

4 Messages de forum

Voir toute la discussion

  • Répondre à ce message

    31 juillet 2009 16:16, par 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

  • Répondre à ce message

    30 décembre 2005 10:36, par 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.

  • Répondre à ce message

    19 décembre 2005 16:34, par 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.

  • Répondre à ce message

    19 décembre 2005 13:53, par geopraem

    Bonjour !

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

    Merci !
    Geoffroy

Répondre à cet article

Retour en haut de la page

Ça discute par ici

  • FancyBox

    25 mars 2009 – 115 commentaires

    Adaptation du script FancyBox pour jQuery en plugin SPIP. Liste des fonctionnalités reprise depuis le site original : ajoute un joli effet d’ombre portée sous la fenêtre possibilité de grouper les images pour naviguer dans les séries d’éléments (...)

  • Diapos

    10 mars – commentaires

    Comme son nom l’indique, c’est un (petit) plugin qui rappelle un peu le fonctionnement d’un projecteur de diapositives. Seules contraintes : il nous faut des images ayant la même largeur et il nous faut numéroter les images. Il suffit pour cela de (...)

  • CleverMail

    20 janvier – 59 commentaires

    CleverMail est un plugin permettant d’envoyer des lettres d’informations à des abonnés depuis SPIP. Issu au départ d’un développement libre complètement indépendant de SPIP, il a connu une première version pour SPIP 1.9 avant d’être complètement réécris (...)

  • Découper un texte en pages et/ou en onglets

    4 mai 2007 – 190 commentaires

    Un raccourcis typographique qui découpe le texte de vos rubriques ou de vos articles en plusieurs pages, ou crée pour vous des onglets... Rubis sur ongle ! Introduction Les articles de votre site sont parfois un peu longs et vous vous êtes (...)

  • Barre typographique multilingue

    13 août 2007 – 61 commentaires

    Des onglets pour gérer les balises multi.