SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs On SPIP-Zone, 118 visitors now

Home > Media > Pictures > Images réactives > Thumbnails and rollover > Thumbnails and rollover

Thumbnails and rollover

27 October 2006 – by vinzmich

All the versions of this article: [English] [français]

0 vote

This script was inspired by La miniature et son popup, by pym.

Introduction:

When the thumbnail option is activated, a picture inserted into the article as a document has a link that opens the original full-size picture into a blank window.

This script allows to open the original picture by a rollover effect : the thumbnail changes to its full-size picture. The rest of the article is unchanged, excepted the page setup which is adapted to the size of the active picture.

How to install?

  • unzip one of the files attached to the French version of this article depending of the SPIP version you are using, then open survol.php3 [1] in a text editor
  • copy/paste the function “survol”:
    • either into mes_fonctions.php3 which is located at the root directory of your site (SPIP 1.8)
    • or into mes_fonctions.php which is located in the /squelettes directory (SPIP 1.9)

How to use it?

Apply the filter “survol” to the text in the article template (article.html): replace #TEXTE by [(#TEXTE|survol)].

Example:

Have a look at this page, where you can notice the behaviour of pictures inserted as documents with their thumbnails.

How does it work?

The script searches for every thumbnail, which comprises of an img tag preceded by a link to another picture (jpg, png or gif type): <a href=""><img src=""></a>. It replaces this string by a single img tag (<img src="" onmouseout="" onmouseover="">) which includes a rollover: the thumbnail is used as “onmouseout” picture whereas full-size picture is used as “onmouseover”.

Limitations:

-  tested for SPIP 1.8.2, 1.9.1 and 1.9.2
-  only applies to pictures that were inserted in the article as documents, by the mean of a doc tag (example: <doc123|center>)

Footnotes

[1or survol.php for SPIP 1.9

updated on 31 March 2008

Back to top

Comment on this article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Add a document

Back to top

Here they're talking

  • (fr) Champs Extras 3

    16 janvier 2012 – 619 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • (fr) Lecteur pdf javascript pdf.js

    20 février 2012 – 165 commentaires

    Ce plugin est basé sur le projet pdf.js qui permet une lecture en ligne des pdfs depuis le navigateur. Ce plugin est expérimental et les contributions sur la zone sont les bienvenues. Avantages Open source Ne requiert pas flash et donc (...)

  • (fr) oEmbed

    4 décembre 2013 – 132 commentaires

    C’est quoi ce truc ? oEmbed est un protocole ouvert qui permet d’insérer le contenu d’une page web dans une autre page. Le contenu inséré peut être de plusieurs types : photo, vidéo, URL ou extrait HTML. L’échange d’information a lieu entre un site (...)

  • (fr) Mailsubscribers

    16 janvier 2013 – 337 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • (fr) Configurer Sparkpost

    25 avril 2016 – 23 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)