SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs On SPIP-Zone, 182 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]

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) Mise à jour automatique des plugins

    5 octobre 2009 – 156 commentaires

    Une nouvelle lame du Couteau Suisse permet de visualiser les plugins nécessitant une mise à jour, tout comme SPIP lui-même ! Présentation Rendons à César ce qui est à César, voici un extrait de la présentation du Couteau Suisse pour sa lame « Mise (...)

  • (fr) Plugin Modèles media

    25 avril 2011 – 170 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • (fr) Refonte de l’identité graphique

    10 juillet – 68 commentaires

    Lors de la SPIP Party 2017 à Toulouse, un nouveau contributeur est venu nous présenter son travail sur une refonte du logo. Au delà de la refonte du logo, c’est une toute nouvelle identité graphique pour SPIP que Jordan nous propose. Voici une (...)

  • (fr) Mailsubscribers

    16 janvier 2013 – 306 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 (...)

  • (fr) Saisies

    27 mars 2010 – 490 commentaires

    Introduction Créer un formulaire est une tâche toujours un peu répétitive : les champs ont souvent les mêmes propriétés, le même accompagnement (message d’erreur, explication, ...) et la même structure HTML. Ce plugin est un outil pour les développeurs (...)

There they're spiping