Plugin Zoombox pour Spip

Le plugin Zoombox vous permet d’ajout un effet de présentation agréable sur vos images et vos vidéos.

Présentation

Le plugin Zoombox pour Spip est une adaptation du plugin Jquery créé par un développeur devenu célèbre grâce à ses nombreux tutoriels gratuits : Grafikart.

Ce plugin rajoute la classe .zoombox sur les éléments que vous souhaitez affecter. Au clique sur ces éléments, une fenêtre javascript, que vous pouvez customiser grâce à de nombreux thèmes, s’ouvrira par dessus votre page pour laisser place à une présentation graphique très jolie de cet élément, que ce soit des photos, des vidéos ou même du contenu html.

Pour apprécier l’utilité de ce plugin, rendez vous ici : Démonstration de Zoombox.

Installation

  1. Téléchargez l’archive dans le dossier plugins de votre SPIP.
  2. Activez le plugin depuis l’espace privé.

Tous les éléments qui auront la class CSS .zoombox seront affectés par le plugin.

Il est primordiale d'ajouter la class zoombox sur les liens des élèments que vous souhaitez assigner au plugin pour qu'ils soient reconnus par celui-ci si vous n'utilisez pas le sélécteur du plugin CFG.

Le bon fonctionnement du plugin requière la présence de Jquery.

Documentation

Par défaut, le plugin est configuré avec certaines options que voici :

-  theme : définie le thème graphique de votre zoombox « zoombox » par défaut (les thèmes existants sont : zoombox, lightbox, prettyphoto, darkprettyphoto, simple).
-  opacity : définie le taux de transparence de la fenêtre 0.8 par défaut.
-  duration : définie la durée de l’animation d’ouverture de la fenêtre 800 ms par défaut.
-  animation : définie si vous souhaitez que la fenêtre s’affiche avec une animation ou non true par défaut.
-  width : définie la largeur des vidéos 600px par défaut.
-  height : définie la hauteur des vidéos 400px par défaut.
-  gallery : définie si vous souhaitez afficher certaines images sous forme de gallerie true par défaut.
-  autoplay : définie si les images sont présentées sous forme de disporama false par défaut.
-  overflow : définie si vous permettez l’affichage des images plus grandes que l’écran false par défaut.

En installant le plugin CFG vous pouvez configurer ces options et mettre en place vos propres sélecteurs. Par exemple #galerie a dans le champs « Sélecteurs » vous permettra d’affecter Zoombox uniquement sur les liens de la div #galerie.

Enfin, si vous souhaitez utiliser le mode galerie sur certaines images, dans vos squelettes, ajoutez simplement la classe CSS .zgalleryXXX (XXX étant le nom de votre galerie) aux liens entourant vos images.

Discussion

12 discussions

  • 1

    Bonjour
    Voilà un Diaporama très très sympa, mais qui me pose le soucis suivant :
    Comme les prédécesseurs ici ... cela ne fonctionnait pas.
    J’ai donc ajouté class=« zoombox » dans mon code « Inc-documents.html » comme ceci :

    <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>[
    	<a href="(#URL_DOCUMENT)" type="#MIME_TYPE" class="zoombox"  onclick="location.href='[(#URL_ARTICLE
    		|parametre_url{id_document,#ID_DOCUMENT} ...

    Ça fonctionne mais :

    -  L’image s’affiche (Nickel) mais ne reste « visible » que 1 à 2 secondes puis disparait, pour me ré-afficher la page ???
    -  Je n’ai pas de flèche qui permet de passer à l’image suivante ?

    Alors docteur : C’est où que j’ai mal ? Me serais-je enduit d’erreur quelque part ?

    Merci d’avance et aussi pour le beau travail

    Eric

    • Bonjour Éric,

      Le fait de devoir ajouter la class zoombox pour que sa fonctionne n’a rien d’un bug, c’est décrit dans l’article, soit il faut ajouter la class aux éléments, soit il faut cibler les éléments en configurant le plugin avec le plugin CFG.

      Ton problème ressemble étrangement à un autoplay, vérifie que l’option autoplay est à false dans le code du plugin (et dans la configuration CFG)

    Répondre à ce message

  • 1

    Bonjour

    Le plugin a l’air très intéressant mais je n’arrive pas à le faire fonctionner. Je ne comprends pas ceci ;

    « Tous les éléments qui auront la class CSS .zoombox seront affectés par le plugin. »

    C’est-à-dire ? Si j’ai une image dans un article au format png avec une balise de type , et que je veux que zoombox s’applique dessus, je fais comment ?

    Merci d’avance.

    • Bonjour bcolo,

      Par défaut, si tu n’installes pas le plugin CFG en plus du plugin Zoombox, tu ne peux pas gérer les préférences de cette Zoombox. C’est à dire que tu auras le thème par défaut, l’opacité par défaut, etc...

      En plus d’avoir ces paramètres par défaut, il faut dans tes squelettes, que tu ajoutes la classe « zoombox » sur les liens entourant tes images. Comme ceci :

      <a href="..." title="..." class="zoombox">
      	<img src="..." alt="..." />
      </a>

      Si tu as plusieurs images que tu veux afficher en mode « galerie », tu rajoutes la classe « zgallery-xxx » aux liens entourant ces images comme ceci :

      <a href="..." title="..." class="zoombox zgallery-1">
      	<img src="..." alt="..." />
      </a>
      <a href="..." title="..." class="zoombox zgallery-1">
      	<img src="..." alt="..." />
      </a>

      Avec le plugin CFG, tu n’es pas obligé d’aller ajouter manuellement la class « zoombox » dans tes squelettes. Tu peux simplement renseigner le sélecteur dans la configuration du plugin, comme tu le ferais en CSS pour pointer vers les liens de tes images.

      En conclusion, la classe « zoombox » est à ajouter sur les liens des images que tu veux voir apparaitre avec l’effet Zoombox. Dans le cas où tu utilises CFG, tu n’as même pas à ajouter cette classe, renseignes juste le sélecteur.

      En espérant t’avoir aidé, bon courage :)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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