SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs On SPIP-Zone, 106 visitors now

Home > Media > Pictures > Images processing > Image Zoom > A Magnifier for the Thumbnails

A Magnifier for the Thumbnails

5 October 2008 – by mortimer

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

0 vote

The default SPIP image insertion shortcut displays only a small version of the image. The imagezoom plugin adds a little zoom window to display details of the thumbnail by using the large version of the image for magnification.

This plugin provides a new model to display a magnifier on an image for localised zoom: <imgXX|zoom>.

The configuration page allows to choose a different style for the magnifier window or specify your own personal style. See the end of this article for styling options.

The code is based on the TJPZoom library by Jànos Tòth.

The plugin will only work with templates using the #INSERT_HEAD tag.

If you use SPIP 1.9.2, you need to download the javascript library from TJPZoom and put its content in a directory tjpzoom in the squelettes directory. If you use SPIP 2, this is done automatically.

Using the Magnifier

The magnifier is activated as soon as the mouse enters the thumbnails. If the original image is very large, a “loading...” message will appear while it loads.

By click and dragging up and down on the image, you can change the magnification level of the zoom.

By click and dragging left/right, you can change the size of the zoom window.

Model Option

The <imgXX|zoom> model can be aligned left and right with <imgXX|zoom|right> et <imgXX|zoom|left>. However, unlike the default img model, this does not float the text around the image.

The maximum width of the thumbnail can be specified globally from the configuration page or locally with the parameter: <imgXX|size=340>

Personalised Magnifier Style

The configuration of the style can be done through a javascript file named tjpzoom_config_XXXX.js and placed in the directory squelettes.

The file defines the following variables:

Configuration Variables
variableuse
var TJPzoomwidth=160; width of the zoom window.
var TJPzoomheight=120; height of the zoom window.
var TJPzoomwindowlock=0; if this variable is equal to 1, the window size is fixed.
var TJPzoomoffsetx=.5; horizontal offset of the zoom window to the mouse pointer. 0.5 puts the pointer in the center of the zoom window.
var TJPzoomoffsety=.5; vertical offset of the zoom window to the mouse pointer. 0.5 puts the pointer in the center of the zoom window.
var TJPzoomamount=4; initial zoom level.
var TJPzoomamountmax=12; maximum zoom level.
var TJPzoomamountmin=1; minimum zoom level.
var TJPborderthick=2; width of the zoom border.
var TJPbordercolor='#cccccc'; colour of the border.

In addition to these parameters, you can specify an image for the the border of the zoom window. To personalise this border, you have to create a directory
XXXX in the squelettes folder with eight png images for the border and corners:
n.png, ne.png, e.png, se.png, s.png, sw.png, w.png, nw.png.

You also have to add the configuration variable var TJPshadowthick=8; to specify the half width of the border.

updated on 13 June 2012

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) ORR v2

    21 mai 2013 – 108 commentaires

    ORR, le plugin d’Organisation des Réservations et des Ressources passe en version 2, avec quelques nouveautés attendues. Je ne reprendrai pas les explications données dans la version 1. Les nouveautés : 1. Gestion des autorisations Le principe (...)

  • (fr) Mailshot

    16 janvier 2013 – 309 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • (fr) Visualiser un PDF dans un article

    13 juin – commentaires

    SoyezCréateurs utilise un modèle pour afficher un PDF dans le corps d’un article Un peu d’histoire Avant, les navigateurs n’incluaient pas de lecteur PDF nativement ce qui avait conduit à la création du plugin Lecteur pdf javascript pdf.js. Mais, (...)

  • (fr) ScolaSPIP 4

    19 janvier 2016 – 346 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) Spipagram : Importer des images Instagram dans SPIP

    29 février 2016 – 10 commentaires

    Ce plugin permet d’importer des images Instagram comme articles SPIP dans la rubrique de votre choix avec le hashtag de votre choix. Installation Si vous n’avez pas déjà le dépôt externals dans votre SPIP, ajoutez le dépôt (...)