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.

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

Discussion

12 discussions

  • Bonsoir
    Est ce que y aurai une mise a jour de ce plugin pour la nouvelle version spip svp

    Répondre à ce message

  • 1

    Bonjour

    Es-que cette technique de Zoombox peut causer un problème a niveaux du référencement (notament google)de mon site ??

    Merci

    • Bonjour,

      A ma connaissance il n’y a aucun impact au niveau du référencement suite à un affiche d’une image en javascript.

      Cordialement.

    Répondre à ce message

  • 1

    Bonjour,

    j’utilise ce plugin qui me satisfait totalement depuis 1 an. j’ai cependant une petite remarque d’utilisation et j’aimerai savoir comment puis-je faire pour modifier ce paramètre.

    Les photos qui sont sur mon site passent du format paysage à portrait et l’utilisateur est obligé de viser sur les flèches gauche droite pour visionner la galerie. Serait il possible d’ajouter une fonction : si je clic sur la photo la galerie passe à la photo suivante.

    Pas mal de galeries sont faites ainsi et je trouve cela plus pratique...

    Merci d’avance pour votre réponse

    AliSs

    Répondre à ce message

  • 5

    Bonjour,

    j’ai installé le plugin et rajouté la classe dans le fichier inc-document mais rien ne se passe
    je ne comprends pas ce qu’il me manque.
    Dans mon head j’ai bien le css et le javascript de zoombox

    Merci d’avance

    • j’ai installé le plugin CFG et maintenant la fenêtre s’ouvre mais il me dit que l’adresse n’est pas bonne pourtant l’image est bien dans le dossier IMG. Je voudrais savoir aussi si c’est possible d’utiliser zoombox pour des vidéos dailymotion. je n’ai pas réussi.

    • Bonjour Timmy, oui on peut tout à fait afficher une vidéo Dailymotion via zoombox. Tu dis que le système te dis que l’adresse n’est pas bonne mais tu parles de quelle adresse exactement ?

    • Au lieu de m’afficher l’image, il me dit objet non trouvé et me donne une erreur 404

      pour les vidéos dailymotion
      j’ai mis iframe comme sélecteur mais ça ne fonctionne pas j’essaie de mettre la classe zoombox dans la balise iframe mais sans plus de résultats

      merci pour la réponse rapide en tout cas

    • Je pense que tu t’y prend mal, essaye ceci :

      <a href="url_vers_la_video" class="zoombox">Ta vidéo Dailymotion</a>

    • Merci c’était ça
      c’est exactement ce que je voulais
      Merci encore pour ces réponses rapides
      bonne continuation

    Répondre à ce message

  • 2
    Julian_IAD

    Hello,
    J’ai implanté le plugin et tout fonctionne, le seul hic, en mode galerie je me retrouve avec deux fois la dernière image...Une idée les gens ?

    • Aurais-tu un lien où l’on peut visualiser ton problème ?

      DevAddict

    • Julian_IAD

      En faite j’ai réussi a corriger mon problème :
      J’appelais la galerie dans un tag et non

    Répondre à ce message

  • 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

  • 3

    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

    • 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

    • 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 !!

    • Il faut que tu ajoutes l’attribut title sur ton lien.

      DevAddict

    Répondre à ce message

  • 2

    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

    • 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 :)

    • 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

  • 4

    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 ?

    • Bonjour cola,

      Est ce que dans la balise <head> de ton site tu as bien #INSERT_HEAD ?

    • 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

    • 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>
    • 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

  • 6

    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...

    • 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 :

      1. ".spip_documents a"

      Et la classe .zoombox s’ajoutera automatiquement sur tes liens.

      Cette fois c’est le bonne ;)

    • François

      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)

    • Bonjour François,

      Première chose à vérifier, il faut insérer la balise #INSERT_HEAD entre la balise

      1. <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

      1. <head>

      )

      Voilà, j’attend ton retour, bon courage ;)

    • François

      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.

    • Aide toi peu-être de Firebug pour voir si tu as des erreurs JS en quelque part ?

    • François

      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

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