SPIP-Contrib

SPIP-Contrib

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

274 Plugins, 192 contribs On SPIP-Zone, 81 visitors now

Home > Media > Pictures > Images réactives > Vignettes et images de survol > Thumbnails and rollover

Thumbnails and rollover

27 October 2006 – by vinzmich

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

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

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) Calendrier Mini 2.0

    19 mai – commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)

  • (fr) SPIP Zen Garden

    12 novembre 2009 – 135 commentaires

    Le plugin Zen Garden, ou Jardin Zen, vous permet de gérer une galerie de thèmes pour votre site, et de changer très facilement de thèmes parmi les thèmes disponibles. Pré-requis Le jardin Zen nécessite d’utiliser un squelette comme le squelette Zpip (...)

  • (fr) Le Couteau Suisse

    4 mai 2007 – 1363 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • (fr) Pagination_simple

    5 août 2009 – commentaires

    Un modèle de pagination ultra simple pour vos éléments SPIP.

  • (fr) Plugin GMap : géolocalisation et cartographie paramétrable

    16 octobre 2011 – 56 commentaires

    À quoi sert ce plugin ? Compatibilité et installation Configuration Géolocalisation Cartographie Boucles, balises et modèles Extensions et personnalisations [introhttp://www.spip-contrib.net/Mediatheque] pour avoir accès à l’interface de (...)