SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs On SPIP-Zone, 108 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) SPIP chez « Free.fr »

    10 avril 2017 – 23 commentaires

    Spip sur free.fr c’est possible, mais compte-tenu des configurations serveurs très « serrées » (et du fait que tous les serveurs ne sont pas identiques semble-t-il), c’est à vos risques et périls que vous vous lancerez dans l’aventure. N’oubliez pas, par (...)

  • (fr) Agenda Fullcalendar facile

    29 octobre 2016 – 84 commentaires

    Dans un précédent article, nous expliquions comment afficher un agenda Fullcalendar sur son site avec le plugin agenda. Cependant, ceci nécessite des manipulation de squelettes, ce qui n’est pas toujours évident lorsqu’on débute. La présente (...)

  • (fr) Menus

    18 août 2009 – 998 commentaires

    Créez enfin vos menus facilement !

  • (fr) Bouquinerie V2

    6 octobre 2017 – 19 commentaires

    Voici la version pour SPIP 3.x du plugin Bouquinerie. Cette nouvelle version permet de gérer des livres et le ou les auteurs associés. Elle n’est pas compatible avec la précédente version. Cet article est une présentation générale et un guide pour (...)

  • (fr) oEmbed

    4 décembre 2013 – 148 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 (...)