Cloudzoom

le plugin propose une variante au modèle doc permettant de créer des vignettes zoomables dans vos articles

source

Il s’agit de la mise en plugin spip du plugin jquery cloud zoom disponible à cette adresse http://www.professorcloud.com/mainsite/cloud-zoom.htm

Le plugin jquery cloudzoom est publié sous licence MIT

Cloud Zoom, Copyright (c) 2010, R Cecco, www.professorcloud.com
Licensed under the MIT License

Installation

L’installation se fait de manière classique (voir guide d’installation sur spip.net).

Définition des paramètres d’affichage

Un formulaire vous permet de régler vos paramètres. Vous y accédez par l’icône CFG dans la liste des plugins.

Les paramètres sont les suivants :

  • zoomwidth : la largeur de la fenêtre du zoom (en l’absence de valeur définie, la largeur de la mimiature s’appliquera)
  • zoomheight : la hauteur de la fenêtre du zoom (en l’absence de valeur définie, la hauteur de la mimiature s’appliquera)
  • position : peut prendre 5 valeurs
    • gauche
    • droite
    • haut
    • bas
    • à’l’intérieur (dans ce cas le zoom s’affiche dans la miniature)
  • adjustx : décalage sur x de la fenêtre du zoom par rapport à la miniature
  • adjusty : décalage sur y de la fenêtre du zoom par rapport à la miniature
  • tint : lors du survol vous pouvez teinter la miniature de la couleur de votre choix. laissez vide si vous utilisez le softfocus
  • tint opacity : opacité de la teinte (0 transparent à 1 opaque)
  • lens opacity : opacité de la loupe (0 à 1)
  • softfocus : crée un flou sur la miniature au survol de la loupe (incompatible avec tint)
  • showtitle : affiche (ou non) le titre dans la fenêtre de zoom
  • title opacity : opacité du bloc titre (de 0 à 1)

utilisation

Un fois installé et paramétré, il vous suffit d’ajouter une image (celle de grande taille) à votre article, puis de passer celle-ci en mode document (ajouter au portfolio), lui joindre une vignette personnalisée (la miniature).

2 modèles sont utilisables

Un modèle pour une seule image

Pour insérer la miniature dans l’article utilisez

  1. <docXX|zoom>

variante de

  1. <docXX>

Bien sur vous pouvez lui passer en paramètre (left/right/center)

  1. <docXX|zoom|left>

Un modèle pour plusieurs images

Une galerie d’image zoomable peut être appelé par le modèle suivant

  1. <zoompanel|id=XX,YY,ZZ>

où XX YY ZZ est le numéro du document appelé. Ils doivent être séparés par des virgules.

limite

La largeur et la hauteur du bloc de zoom ne peut excéder la largeur et la hauteur du bloc conteneur.

Mise à jour

avril 2012 :
-  Le plugin a été mis à jour afin d’assurer la compatibilité avec spip 2 comme spip 3. Pour celà, il abandonne l’utilisation de CFG pour le paramétrage.
-  ajout d’un second modèle

Dernière modification de cette page le 13 février 2019

Discussion

3 discussions

  • 1

    Bonjour, je souhaite utiliser ce plugin mais l’appeler dans un squelette, sur une image logo et non une image dans un article.

    1. [(#LOGO_PRODUIT {id_produit} |image_reduire{500}) ]

    Est-ce faisable ?

    • Bonjour,
      Sans m’être vraiment penché, je pense pouvoir dire que c’est possible. Il suffit à mon avis d’adapter le code contenu dans le modèle doc_zoom avec une boucle adaptée à l’objet produit et débarrassée de paramètres inutiles (comme mode image ou doc).
      J’espère que cela orientera vos recherches

    Répondre à ce message

  • Bonjour à tous,

    J’espère que vous pourrez m’aider, je cherche à pouvoir intégrer le zoom sur un squelette, ici :

    1. [(#LOGO_PRODUIT {id_produit} |image_reduire{500}) ]

    J’ai bien téléchargé le plugin mais je n’arrive pas à l’adapter...
    Une piste ?

    Merci d’avance pour vos lanternes.

    Répondre à ce message

  • Bonjour,

    Est-il possible d’intégrer le zoom à une boucle dans un squelette ?

    Merci pour votre aide.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom