SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 290 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Images réactives > Vignettes et images de survol > Vignettes et images de survol

Vignettes et images de survol

27 octobre 2006 – par vinzmich – 15 commentaires

Toutes les versions de cet article : [English] [français]

4 votes

Cette contrib est inspirée de La miniature et son popup, par pym [1].

Présentation :

Lorsqu’on utilise la génération d’images miniatures (vignettes), une image insérée en tant que document a un lien permettant l’ouverture de l’image originale en taille réelle. Ce lien ouvre cette dernière à la place du contenu, dans une page blanche.

Avec cette contribution, l’image originale s’ouvre à la place de la vignette, à son survol. Le reste de l’article est inchangé, à l’exception de la mise en page qui se décale du fait de la différence de taille entre les 2 images.

Installation :

  • décompresser l’une des archives jointes en fonction de votre version de SPIP puis ouvrir survol.php3 [2] dans un éditeur de texte
  • copier/coller la fonction « survol » :
    • soit dans le fichier mes_fonctions.php3 qui se trouve à la racine du site (SPIP 1.8)
    • soit dans le fichier mes_fonctions.php qui se trouve dans le dossier squelettes (SPIP 1.9)

Utilisation :

Dans le squelette de l’article (article.html), appliquer le filtre « survol » au texte, c’est à dire remplacer #TEXTE par [(#TEXTE|survol)].

Exemple :
Voir cette page, sur laquelle on voit bien le résultat du traitement des images insérées comme documents sous forme de vignettes. Les autres images restent inchangées.

Principe de fonctionnement :

Le script recherche toutes les occurrences de vignettes, c’est à dire une balise image précédée d’un lien vers une image de type jpg, png ou gif : <a href=""><img src=""></a>. Il les remplace par une balise image avec survol (<img src="" onmouseout="" onmouseover="">) : l’image de la vignette est utilisée comme argument de « onmouseout » alors que l’image originale est utilisée comme argument de « onmouseover ».

Limitations :

-  testé sur SPIP 1.8.2, 1.9.1 et 1.9.2
-  ne fonctionne que pour des images insérées dans l’article en tant que documents, donc par une balise du type doc (exemple : <doc123|center>)

Notes

[1merci à lui pour ses conseils

[2ou survol.php dans le cas de SPIP 1.9

Dernière modification de cette page le 31 mars 2008

Retour en haut de la page

Vos commentaires

  • Le 7 mars 2007 à 22:37, par Stéf En réponse à : Vignettes et images de survol

    Je débute avec SPIP, j’ai téléchargé 1.9.1 mais je ne vois pas de dossier squelettes, faut-il le créer ? et où se trouve le fichier mes_fonctions.php

    Merci de votre aide

    Répondre à ce message

  • Le 17 mars 2007 à 14:05, par Ben33 En réponse à : Vignettes et images de survol

    Comment faire pour mettre en valeur un code(script) en couleurs, gras, comme un peu plus bas dans cette page !?

    • Le 17 mars 2007 à 15:03, par ? En réponse à : Vignettes et images de survol

      Pour du code, il me semble qu’il faut mettre le script entre [code] et [/code] (remplacer [] par <>). Pour le gras, utiliser les raccourcis typographiques proposés par l’interface ou mettre le texte entre doubles accolades.

    Répondre à ce message

  • Le 29 octobre 2006 à 19:42, par DD En réponse à : Très prometteur mais j’y arrive pas

    J’essaie d’implémenter cette fonction sur un site en 1.9.1 mais le résultat n’est pas au rendez-vous :

    je mets le fichier mes_fonctions.php dans le dossier squelettes (et pas à la racine) et le fitre (#TEXTE sur le squelette ARTICLE

    et je me retrouve avec cette erreur pour les articles :
    Fatal error : Call to undefined function : survol() in /home/www/monsite/www/ecrire/public/composer.php(48) : eval()’d code on line 887

    je crois qu’il y a un problème de chemin.

    Si je mets mes_fonctions.php à la racine ca ne marche pas non plus -> pas de fonction SURVOL connue
    (là je crois que c’est normal).

    catherine

    • Le 30 octobre 2006 à 10:18, par vinzmich En réponse à : Très prometteur mais j’y arrive pas

      Bonjour,

      C’est effectivement dans le dossier squelettes qu’il faut mettre mes_fonctions.php pour SPIP 1.9 => je vais modifier l’article pour apporter cette correction.

      Pour l’instant je ne comprends pas pourquoi ça ne fonctionne pas chez toi. Dans un 1er temps (ça parait idiot mais on ne sait jamais) vérifie bien l’orthographe de la fonction survol à la fois dans le squelette article.html et dans mes_fonctions.php. Et aussi la syntaxe de ce fichier php (les balises, les accolades de la fonction, etc.) et de l’article ([(#TEXTE|survol)]).
      Si tu le souhaites, envoie-moi un message en utilisant ce lien pour qu’on puisse éventuellement échanger des fichiers par courriel.

    • Le 30 octobre 2006 à 20:52, par DD En réponse à : Très prometteur mais j’y arrive pas... finalement si

      Ca y est j’ai réussi. Je pense que je n’avais pas bien copié/collé le code de mes_fonctions.php,

      C’est très bien comme résultat (trouve-je) : http://www.stadeleonardkreisker.fr/spip.php?article20

      merci
      dd

    • Le 31 octobre 2006 à 18:14, par DD En réponse à : Très prometteur mais j’y arrive pas... suite

      j’ai parlé trop vite, le survol marche très bien sur Firefox mais avec Explorer 6 l’image « saute » et décale toute la mise en page. (testé sur Linux et Win XP)

      catherine

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là