Accueil du site > Affichage multimédia > Galeries et diaporamas > Zoombox > Plugin Zoombox pour Spip

Plugin Zoombox pour Spip

7 octobre 2011 – par DevAddict – 24

25 votes

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

Téléchargez l’archive dans le dossier plugins de votre SPIP.
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 .zgallery-xxx (xxx étant le nom de votre galerie) aux liens entourant vos images.

Vos commentaires

# Le 8 février à 10:35, par Casp En réponse à : Plugin Zoombox pour Spip

Bonjour, j’utilisais ce plugin pour mes sites, mais je viens de m’appercevoir que cela bug complètement avec IE7 et paraît il même avec IE8.
Voir cette discution : http://www.grafikart.fr/forum/topic/2073
Je vais donc devoir changer pour un autre javascript.

Répondre à ce message
# Le 2 janvier à 18:11, par alisssam En réponse à : Plugin Zoombox pour Spip

Bonjour,

J’utilise le plugin pour un de mes sites, merci d’ailleurs pour les réponses rapides à nos questionnements :)

Est-il possible de gérer la taille des miniatures dans les articles pour que les formats photos de format paysages et portraits puissent avoir la même taille automatiquement ??
ou est ce qu’il faut retailler toutes les photos ??? :-)

Merci d’avance pour la réponse,

Alice
- # ^ Le 3 janvier à 09:04, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  Merci pour ton message Alice.
  
  Oui il est tout a fait possible de gérer la dimention d’affichage des images, regardes du côté des filtres spip applicables aux images.
  
  DevAddict
- # ^ Le 3 janvier à 12:33, par alisssam En réponse à : Plugin Zoombox pour Spip
  
  Bonjour
  
  Merci pour ta réponse rapide, j’ai réussi :)
  
  Autre petite question (^^) comment afficher le titre du document joint en tant que légende ?? j’ai vu cela sur l’exemple donné mais je n’arrive pas à le reproduire...
  
  Merci pour tes réponses !!
- # ^ Le 3 janvier à 12:47, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  Il faut que tu ajoutes l’attribut title sur ton lien.
  
  DevAddict
Répondre à ce message
# Le 21 novembre 2011 à 19:44, par alisssam En réponse à : Plugin Zoombox pour Spip

Bonsoir,

Merci pour ce plugin, tout fonctionne chez moi mis à part la fonction gallerie : j’aimerai que toutes les image du même article soient liées entre elles. J’ai pourtant mis en config : mode gallerie : oui. Mais rien n’y fait.
Ai-je loupé une étape ? voici le lien de l’article : http://jeremierigaudeau.fr/spip/spip.php?article16
j’utilise jquery : Spip jQuery Cycle Plugin : sjcycle 0.1.1
SPIP 2.1.11
merci pour votre réponse,
AliSs
- # ^ Le 22 novembre 2011 à 10:47, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  Bonjour alisssam,
  
  Non tu n’as pas loupé d’étape, tu as juste oublié de lire la fin de l’article :).
  
  En fait, dans ton squelette qui affiche tes images d’article, il faut que tu ajoutes la class zgallery-#ID-ARTICLE sur les liens de tes images. Ainsi, tu auras sur tous les liens d’image d’un article, une class du genre : zgallery-1234 ce qui va permettre a zoombox de reconnaitre dans quelle galerie inclure les images.
  
  Voilà, j’espère avoir été clair, merci de ton intérêt pour le plugin et bon courage :)
- # ^ Le 3 décembre 2011 à 14:59, par Cécile En réponse à : Plugin Zoombox pour Spip
  
  Bonjour
  Ayant eu le même problème, il ne faut pas de tiret entre zgallery et #ID-ARTICLE :
  zgallery#ID-ARTICLE
Répondre à ce message
# Le 26 octobre 2011 à 14:29, par cola En réponse à : Plugin Zoombox pour Spip

Bonjour.
Pas moyen d’avoir quelque chose qui soit fonctionnel sur mon site. J’ai même été jusqu’à ajouter manuellement le lien vers le JS et la CSS dans le head, rien à faire. Et ce malgré des balises zoombox dans mes liens image et Iframe, idem avec des galeries zgalerie-1

A savoir, Zoombox ne fonctionnait pas dans le back-ffice sur les images de la médiathèque (plugin médiathèque)

Un indice ?
- # ^ Le 26 octobre 2011 à 14:43, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  Bonjour cola,
  
  Est ce que dans la balise <head> de ton site tu as bien #INSERT_HEAD ?
- # ^ Le 26 octobre 2011 à 17:02, par cola En réponse à : Plugin Zoombox pour Spip
  
  Le site ayant beaucoup d’autres plugin, Oui.
  En fait, j’ai Fancybox qui tourne dessus mais qui pose problème sur Iphone avec mes squelettes. D’ou l’idée de remplacer par zoombox, mais sans succès jusqu’à maintenant
- # ^ Le 26 octobre 2011 à 17:13, par DevAddict En réponse à : Plugin Zoombox pour Spip
  Lorsque tu regardes le code source de la page dans un navigateur, est-ce que les scripts propres à Zoombox sont présents dans le <head>, par là j’entends que tu dois avoir :
  
  Le css : <link rel="stylesheet" href=".../plugins/auto/zoombox/zoombox.css" type="text/css" media="all">
  
  Le JS :
  
  <script src=".../plugins/auto/zoombox/zoombox.js" type="text/javascript"></script>
  
  <script type="text/javascript">
  
  jQuery(function($){
  
  $(".zoombox").addClass("zoombox");
  
  $(".zoombox").zoombox({
  
  theme : "prettyphoto",
  
  opacity : 0.8,
  
  duration : 800,
  
  animation : true,
  
  width : 600,
  
  height : 400,
  
  gallery : true,
  
  autoplay : false,
  
  overflow : false
  
  });
  
  });
  
  </script>
  
  Télécharger
- # ^ Le 10 novembre 2011 à 23:23, par cola En réponse à : Plugin Zoombox pour Spip
  
  Bonjour. Oui, c’était bien présent.
  Cependant, finalement, j’ai installé zoombox à partir des sources directement dans mon dossier squelettes.
  Le résultat est OK, même si j’ai pas l’interface de config.
Répondre à ce message
# Le 11 octobre 2011 à 20:50, par bcolo En réponse à : Plugin Zoombox pour Spip

J’ai CFG d’installé, avec .zoombox affiché par défaut dans le champ du sélecteur, mais ça ne déclenche rien de particulier. Quand je clique dans une image ayant une balise de type doc, il ne se passe rien. Plus précisément l’image s’ouvre dans une autre fenêtre, mais sans aucun des effets annoncés. Il doit me manquer encore autre chose...
- # ^ Le 12 octobre 2011 à 07:53, par DevAddict En réponse à : Plugin Zoombox pour Spip
  Oui, dans ton squelette tu dois ajouter la classe .zoombox aux liens de tes images. Sinon, tu peux pointer directement vers tes liens dans le champs sélecteur, comme ceci par exemple :
  
  ".spip_documents a"
  
  Et la classe .zoombox s’ajoutera automatiquement sur tes liens.
  
  Cette fois c’est le bonne ;)
- # ^ Le 23 octobre 2011 à 00:54, par François En réponse à : Plugin Zoombox pour Spip
  
  Bonjour
  Moi non plus je ne réussis pas à le faire fonctionner. Il me semble que j’ai tout, le CFG, le jquery, les liens avec la classe zoombox, etc ...
  Si j’ai bien compris il suffit d’ajouter la classe zoombox au lien d’une image pour enclencher la présentation. Dans mon cas, ça ne fait rien, jsute ouvrir une nouvelle fenêtre...
  Il doit effectivement manquer quelque chose... J’espère trouver quoi parce que ça a l’air vraiment bien comme plugin.
  Merci pour vos feedbacks si quelqu’un a réussi à l’installer. (j’ai les dernières versions de spip et du plugin)
- # ^ Le 23 octobre 2011 à 16:55, par DevAddict En réponse à : Plugin Zoombox pour Spip
  Bonjour François,
  
  Première chose à vérifier, il faut insérer la balise #INSERT_HEAD entre la balise
  
  <head>
  
  de ton squelette.
  
  Ensuite, il faudrait vérifier que ton Jquery est bien présent sur la page en question, puis regarder dans le code source si le script JS qui assigne zoombox aux éléments est présent (dans la balise
  
  <head>
  
  )
  
  Voilà, j’attend ton retour, bon courage ;)
- # ^ Le 27 octobre 2011 à 21:04, par François En réponse à : Plugin Zoombox pour Spip
  
  Merci pour ton aide, mais je confirme que ça ne fonctionne toujours pas. j’ai bien tous les scripts, le #INSERT_HEAD, le jquery, etc ...
  je vais décortiquer les scripts et voir plus en détails ce qui cloche. Je te tiendrai au courant.
- # ^ Le 28 octobre 2011 à 12:18, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  Aide toi peu-être de Firebug pour voir si tu as des erreurs JS en quelque part ?
- # ^ Le 9 novembre 2011 à 12:42, par François En réponse à : Plugin Zoombox pour Spip
  
  Finalement comme j’ai adapté le style css et le js à mes besoins, j’ai installé directement le module zoombox sans passer par le plugin. Et ça fonctionne très bien. Je ne sais toujours pas pourquoi le plugin ne fonctionnait pas dans mon cas. En tout cas merci pour ta disponibilité et pour m’avoir fait découvrir ce module.
Répondre à ce message
# Le 31 octobre 2011 à 15:31, par Eric02 En réponse à : Plugin Zoombox pour Spip
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} ...

Télécharger

Ç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
- # ^ Le 31 octobre 2011 à 15:44, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  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
# Le 10 octobre 2011 à 21:03, par bcolo En réponse à : Plugin Zoombox pour Spip

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.
- # ^ Le 11 octobre 2011 à 13:00, par DevAddict En réponse à : Plugin Zoombox pour Spip
  
  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

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Plugin Zoombox pour Spip

Présentation

Installation

Documentation

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

Introduction à la création d’un livre

Escal-V3

SPIP 1.9.2n, 2.0.17, 2.1.12 disponibles

Table des Matières

Navigation AJAX

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN