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 .zgalleryXXX (XXX étant le nom de votre galerie) aux liens entourant vos images.
Discussions par date d’activité
12 discussions
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 :
Ç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
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 :
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 :
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 :
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.
Suivre les commentaires : |