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

updated on 2 October 2019

Discussion

14 discussions

  • Je rectifie, fonctionne sous IE 9 à la condition d’utiliser le mode de compatibilité. C’est super! Merci encore.

    Reply to this message

  • 2

    Très sympa comme contrib,

    Dès que je suis dans la partie portfolio de mon site je teste :)

    Merci du boulot.

    • c’est plutot Raff Cecco de professorcloud qui est à remercier. je n’ai fais que mettre en plugin spip son travail

    • je suis d’accord :) Mais c’est toujours bien de partager ses trouvailles et de les adapter a spip :)

    Reply to this message

  • 4

    Bonjour,

    Epoustouflée par cette fonctionnalité, je viens de la tester, mais pas d’effet de loupe. J’ai désactivé la médiabox, mais pas plus d’effet au passage de la souris.

    La configuration :

    • spip 2.1.0 [15604]
    • ... et une liste de plugins assez longue !

    Cette contribution est récente et vous indiquez bien qu’elle est en chantier : peut-être n’avez-vous pas encore tout testé ? Si vous avez besoin de plus d’informations sur la config de test et que cela peut vous aider un tant soit peu, n’hésitez pas à demander.

    Cordialement,

    KMk

    • bonjour,

      je suis bien évidemment preneur d’informations sur votre configuration (liste de plugins)

      Une petite question tout de même : est-ce que rien n’apparait ou est-ce que vous n’avez que le cadre de la loupe dans la vignette ?

    • Bonjour,

      J’ai eu une petite idée en passant : je me suis dit que peut-être mon image était d’un format trop lourd, alors je l’ai réduite (700 px de haut). Mais non, cela ne vient pas de là. Apparaît bien, sous l’image, «zoomer sur l’image», mais au passage de la souris, rien, si ce n’est le texte alternatif du titre de l’image. J’ai publié l’article dans lequel j’ai fait le test en l’antidatant : Voir l’article

      La liste des plugins activées, en plus des squelettes :

      Acces Restreint

      Creer des Alias d’articles

      API de vérification

      Barre Typo V2 pour 1.9.2 et suivantes

      cfg : moteur de configuration

      cloudzoom

      Compositions

      Cooliris pour SPIP

      Corbeille

      Des jeux dans vos articles

      Didaspip

      Enluminures typographiques pour SPIP 2 & Porte plume

      Facteur

      Formidable, générateur de formulaires

      Formulaires&Tables (SPIP 2.0+)

      FreepapeR 2

      Intégration d’activités Freemind

      jFlipBook : Livre d’images avec effet de pages tournantes

      Mon squelette sous forme de plugin

      Le Couteau Suisse

      Lecteur Multimédia en Flash (MP3,flv)

      MediaBox

      Mediathèque

      Menus

      MultiViewer FULL pour SPIP 2.0

      Nuage

      Palette

      Panosalado Modele

      Portail Web pour PMB

      Prévisualisation pour les articles en cours de rédaction

      Saisies pour formulaires

      Secteurs Exclus

      SPIP Bonux

      SPIP-Listes

      SPIP-Surcharges

      SpiPDF

      Splickrbox

      SWFObject

      Tablesorter pour SPIP

      Thickbox v2

      WebFonts

      XSPF : Liste de documents XSPF et modèles de lecteurs multimédia

      YAML

      Je ne sais pas si cela va vous éclairer...

      Cordialement,

      KMk.

    • Re-

      Je me réponds à moi-même : j’ai fait un test avec une configuration du plugin dans cfg par défaut... et cela fonctionne. Bon, je vais me pencher sur la question...

      Bonne fin de journée !

      KMk.

    • bonjour,

      visiblement celà fonctionne chez vous. petite tentative d’explicatrion : comme je l’indique dans les limites, le bloc ne peut apparaitre que dans les limites du conteneur donc si votre vignette était aligné à gauche du bloc, et que cloudzoom était configuré pour afficher le zoom à gauche de la vignette. En apparence il ne se passait rien.
      pour une image contre le bord gauche, il faut paramétrer l’affichage à droite de la vignette pour qu’il puisse être visible

    Reply to this message

  • je viens de tester sur un SPIP 2.1.0 [15608] tout nu en local et pour moi ça fonctionne. Je suis d’autant plus preneur de votre config.

    Par contre, le test sur un SPIP 2.0.0 et 2.0.5 montre que le plugin est incompatible en l’état

    Reply to this message

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

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom