SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs On SPIP-Zone, 202 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) Le plugin ZotSpip

    28 mai 2012 – 138 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • (fr) ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • (fr) MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • (fr) Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • (fr) La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)