SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Images, Galeries > Images actives

Une loupe pour vos vignette

vendredi 9 décembre 2005, par mortimer. Dernier ajout dimanche 29 avril 2007


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.


Répondre à cet article

  • Une loupe pour vos vignette

    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

    Retour au début des forums

  • Dans un article

    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 à ce message

    • Dans un article 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

    Retour au début des forums



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net