Aperçu
La MediaBox est une Boîte multimédia polyvalente et personnalisable. Le plugin est basé sur la librairie moderne ColorBox, qui a été enrichie et adaptée pour SPIP.
Par défaut, mediabox propose 5 habillages. Il est assez facile d’en créer de nouveau assortis à chaque site. Mediabox est également multilingue.
Sur le site public, la boîte peut être activée simplement par l’ajout de classes sur les liens (avec la possibilité de préciser le fonctionnement en iframe, la largeur et la hauteur pour chaque lien).
Pour des besoins plus complexes, mediabox peut aussi être appelée directement en javascript avec plein d’options de fonctionnement.
Configuration
La page de configuration de mediabox est accessible depuis le menu homonyme.
Le panneau de configuration vous permet de modifier les sélecteurs CSS utilisés pour cibler les liens sur lesquels activer la boîte.
Il est par ailleurs possible de changer l’apparence de la boîte en sélectionnant l’habillage, l’animation en transition entre deux photos, et la hauteur et la largeur maximales.
Ces réglages affectent le fonctionnement sur le site public (mais pas dans l’espace privé).
Utilisation simple
Activation de la boîte
Par défaut, la boîte est active sur les liens pourvus de la classe mediabox, ainsi que les liens dotés d’un attribut html type ayant pour valeur image/jpeg, image/png, ou image/gif. Cet attribut type est renseigné automatiquement par SPIP dans les images du portfolio.
Exemples :
Ouverture en iFrame
Pour que la boîte ouvre la cible du lien dans une iFrame, il suffit d’ajouter la classe boxIframe et des pseudo-classes servant à spécifier les dimensions :
Exemple :
Paramétrage des dimensions
Il est possible de préciser les dimensions de la boîte au cas par cas.
Il suffit d’ajouter une classe au lien concerné, par exemple : boxWidth-200px pour fixer la largeur à 200px, boxHeight-300px pour fixer la hauteur à 300px.
Remarquez que la classe est donc constituée de la valeur souhaitée. Cette valeur s’exprime dans les unités CSS valides (px, em, pt ...). Cas particulier, les ’%’ sont notés pc (le caractère ’%’ n’étant pas autorisé pour les noms de classe).
Constitution d’une galerie
Pour constituer une galerie de vignettes clicables et reconnues comme faisant partie d’un même ensemble, il faut leur indiquer un attribut rel commun.
Les liens possédant la même valeur d’attribut rel sont associés ensemble. Il est donc possible d’avoir plusieurs galeries dans la même page.
La mediabox permet de naviguer au sein d’une galerie en la feuilletant, ou en activant le diaporama automatique.
Exemple :
Les liens ciblés par le « sélecteur de galerie » (renseigné dans le panneau de configuration) sont associés automatiquement par un attribut rel="galerieauto". N’utilisez donc pas cette valeur pour vos galeries.
Utilisation avancée en javascript
Il est possible d’activer la boîte en javascript, sur une liste d’objets :
ou de l’ouvrir par un appel direct sans sélection :
options
une liste de propriétés optionnelles sous la forme {prop:valeur,...} :
- href : (chaîne) une ancre dans la page ou une url externe pour un chargement ajax. Dans ce cas il est possible d’utiliser la syntaxe de jQuery et de spécifier un selecteur dans la page chargée
$.fn.mediabox({href:"spip.php?page=sommaire #contenu"}); - overlayClose : (booléen, true par défaut) permet de fermer la boîte lorsque l’utilisateur clique en dehors si true
- iframe : (booléen, false par défaut) ouvre la boîte dans une iframe si true
- title : (chaîne, attribut title du lien par défaut) pour fournir un titre ou une légende détaillée
- height : (chaîne) hauteur de la boîte, au format CSS
- width : (chaîne) largeur de la boîte, au format CSS
- minHeight : (chaîne) hauteur minimale de la boîte, au format CSS
- minWidth : (chaîne) largeur minimale de la boîte, au format CSS
- maxHeight : (chaîne) hauteur maximale de la boîte, au format CSS
- maxWidth : (chaîne) largeur maximale de la boîte, au format CSS
- autoResize : (booléen, false par défaut) redimensionne la boîte lorsque la fenêtre change de taille. Attention aux effets indésirables éventuels
- onOpen : (function, null par défaut) fonction callback appelée à l’ouverture de la boîte
- onShow : (function, null par défaut) fonction callback appelée à l’affichage de la boîte
- onClose : (function, null par défaut) fonction callback appelée à la fermeture de la boîte
À noter que chaque argument peut être fourni sous forme de fonction :
API modalbox
La mediabox peut également être utilisée sous forme de boîte modale, avec une API spécifique.
L’API modalbox est par exemple utilisée dans l’interface privée de SPIP par le plugin médiathèque. Si vous l’utilisez conjointement avec la mediabox, alors les fenêtres pop-in d’édition de document seront affichées dans une mediabox, plus conviviale que la modalbox utilisée par défaut dans le plugin.
Ouverture d’une boîte modale
L’ouverture se fait par l’appel :
href correspond a une url ou une ancre, comme pour l’option href de la mediabox. Elle est ici indiquée en premier argument pour alléger l’écriture la plus courante où ce sera le seul argument utilisé.
Les options de modalboxload sont les mêmes que pour mediabox vues ci-dessus, mais avec la valeur false par défaut pour
overlayClose (un clic en dehors de la boîte ne la fait pas disparaitre) qui correspond à l’usage d’une boîte modale de dialogue.
Cet appel est particulièrement adapté pour écrire un lien vers une page complète, qui sera chargé avec une url différente dans une boîte modale si on dispose de javascript et de la boîte modale. Par exemple, pour charger le formulaire de login dans une boîte modale (et garder le lien vers la page complète en l’absence de javascript) :
Le lien chargé dans la boîte modale utilise ici les possibilités ajax de Zpip.
Fermeture de la boîte modale
La boîte peut être fermée par un appel javascript avec la fonction
Si des traitements sont nécessaires après fermeture il faut dans ce cas ajouter une fonction callback sur l’événement onClose au moment de l’ouverture de la boîte.
Plugin MediaBox
Vos commentaires
# Le 8 février à 17:53, par rdubois76
En réponse à : MediaBox
bonjour,
je gere un site d’établissement scolaire, et je dois faire un article ou défileraient les productions de l’atelier photo, et faire diffuser des photos du lycée.
Première question :
J’ai bien utilisé mediabox pour diffuser les photos de rentrée(15), mais il s’agit maintenant de diffuser plus de 100 photos ! je n’imagine pas le temps de chargement dans le portfolio...
Y a-t-il une méthode plus rapide ?
seconde question, peut on insérer un diaporama (plus court : 5/10 photos) dans le bandeau ? quelles modifications doit on apporter sur le code de quel fichier ?
Merci
Répondre à ce message
# Le 20 janvier à 23:13, par yanouil
En réponse à : MediaBox
je ne comprend pas, ni le titre, ni la description n’apparait dans la fenêtre...
Que faire ?
# Le 26 janvier à 10:00, par ?
En réponse à : MediaBox
Slt,
Je suis desolé de polluer ta demande mais si tu crois que quelqu’un va te répondre, je pense quie tu peux attendre LONGTEMPS (cf posts ci desous)
cordialemnt
Desbutes
# Le 30 janvier à 11:16, par benoloas
En réponse à : MediaBox
Bonjour Yanouil,
Si cela peut aider, en voici une.
Voici le code pour une galerie images (simple et propre, au centrage « grossier » mais rapide et efficace) qui prendrait tous les documents JPG du website). Cela donne :
... si je ne me trompe pas ;-)
Répondre à ce message
# Le 16 janvier à 15:08, par desbutes
En réponse à : MediaBox
Bonjour,
Quelq’un pourrait-il prendre 5 secondes et me dire dans quelle page on insert le script pour boite modale, juste 5 secondes
Merci
Cordialement
Desbutes
Répondre à ce message
# Le 14 janvier à 20:20, par ?
En réponse à : MediaBox
jai placé ce code
<a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})];return false;" rel="nofollow" class="mediabox boxIframe boxWidth-480px boxHeight-600px"><:lien_connecter:></a>Ou encore celui mentionné dans l’article mais une fois connecté la boite ne se ferme pas et une page 404 saffiche :(
Je voudrais que la boite se ferme et que la page en cours se recharge...comment faire ???
Répondre à ce message
# Le 12 janvier à 19:03, par desbutes
En réponse à : MediaBox
Bonjour,
D’autres ont deja posé les questions , sans réponse, donc j’ai cherché, essayé de comprendre mais je n’arrive à rien
1/Si je veux utiliser jquery et ce code $("a.mediabox").mediabox(options) ;
Quelqu’un peut m’aider en me disant
D’autre part ,je voudrais que le cookie de la boite modale expire à la fermeture du navigateur : j’ai bricolé un truc , dans index.php avec la fonction setcookie, mais ca marche pas terrible.En plus en regardant en detail la fonction PHP de setcookie, j’ai vu que le temps s’exprimait en secondes et lorsque je lis le code du cookie dans la fonction jquery de splash_mediabox.js
var set_cookie = function()
$.cookie("modalsplash", box_settings.splash_url, expires : 7 ) ;
le 7 correspond à 7 jours !!!!!
Je ne comprends pas ca devrait être 7 secondes ou 7 7millisecondees ? non ? bref
surtout j’aimerais apprendre comment faire pour que ce cookie s’efface à la fermeture du navigateur ?
merci beaucoup
cordialement
Desbutes
Répondre à ce message
# Le 10 janvier à 13:41, par Phil
En réponse à : MediaBox
Bonjour,
Je n’arrive pas non-plus à avoir les flèches suivant/précédent...
par exemple : http://www.tiuin.com/Concerts
Précisions : le problème est d’abord apparu lors du passage de spip 1.9.xx à spip 2.1.11 J’utilisais thickbox, et ce problème est apparu...
ça fait plusieurs jours que je cherche sans résultat, et je suppose que le problème vient d’ailleurs... Un fichier de config ?
Dans l’onglet configuration/fonctions avancées, j’ai par ailleurs une ’Error 500 - Internal server error’
Merci
Phil
# Le 10 janvier à 23:05, par Phil
En réponse à : MediaBox
Bon, autoréponse.
j’ai trouvé une solution, mais ça m’énerve de ne pas comprendre...
en ajoutant le rel="mediabox" dans le lien, ça marche.
Y’a un truc que j’ai pas pigé...
Répondre à ce message
# Le 25 octobre 2011 à 11:03, par balou
En réponse à : MediaBox
Bonjour,
j’essaie depuis plusieurs jours d’ouvrir une fenêtre modal sur la page login de mon site. La fenêtre s’ouvre bien mais la page login n’apparait jamais (Petite roue Mediabox qui tourne tourne tourne ...). J’avoue y perdre mon html, php et autre !
Quelqu’un a t’il une idée. Je suis sous SPIP : 2.1.11 et la dernière version de Mediabox.
Le site est ici, le lien pour la connexion est en bas de page.
Le code utilisé est ci-dessous.
Merci d’avance pour votre aide.
Cordialement
# Le 1er novembre 2011 à 01:41, par DD
En réponse à : MediaBox
je te donne ce qui marche pour moi sur un site sans ZPIP (j’ai bien galéré avant de trouver) :
<a href="[(#URL_PAGE{login}|parametre_url{var_zajax,contenu})];return false;" title="[(#NOM|attribut_html)]" rel="nofollow" class="mediabox boxIframe boxWidth-480px boxHeight-600px"><img src="#CHEMIN{help.png}" alt="[(#NOM|attribut_html)]" /></a>.. à adapter
dd
# Le 9 janvier à 17:58, par fd
En réponse à : MediaBox
jai placé ce code
Mais une fois connecté la boite ne se ferme pas et une page 404 saffiche :(
Je voudrais que la boite se ferme et que la page en cours se recharge...comment faire ???
Répondre à ce message
# Le 26 août 2011 à 16:02, par Ysabeau
En réponse à : MediaBox
Comment on fait pour avoir le titre de l’image sus les photos et non cet odieux « png-123ko » ? Mon squelette est sous Escal.
Merci.
NB : s’il y a des lignes de code à copier, merci de me préciser où exactement, parce que sinon, je ne saurais pas faire. J’ai vu une indication sur le plugin Fancybox, mais comme je ne sais pas où le code doit être inséré, j’ai essayé, mais sans avoir le résultat escompté.
# Le 26 août 2011 à 16:14, par Ysabeau
En réponse à : MediaBox
Je me réponds à moi-même, j’ai trouvé l’info dans les discussions à ce niveau là :
_ http://www.spip-contrib.net/MediaBox#forum436086http://www.spip-contrib.net/MediaBox#forum436086
Il faut changer un petit bout de code dans le fichier doc.html de prive/modeles.
# Le 2 janvier à 14:14, par HerveB
En réponse à : MediaBox
A noter que lorsqu’on a également activé le plugin Médiathèque, c’est dans le dossier Modèles de ce dernier qu’il faudra modifié doc.html. (Médiathèque surchargeant lui aussi quelques modèles du dossier privé)
Répondre à ce message
# Le 29 décembre 2011 à 16:30, par Beru
En réponse à : MediaBox
Bjr,
Comment éviter que les vidéos (wmv ou mp4 par ex) ne s’ouvre dans un lecteur à part pltort que dans la mediabox ?
Beru
Répondre à ce message
# Le 5 décembre 2011 à 12:56, par tetue
En réponse à : MediaBox
Je ne sais pas si ça a déjà été évoqué, mais comment désactiver la MediaBox sur les petits écrans tactiles ?
Quand je consulte, par exemple, l’Herbier de SPIP sur iPhone, c’est pas terrible : la mediabox s’étale et difficile de revenir en arrière... Idéalement, dans ces cas-là, elle ne devrait pas s’ouvrir par dessus la page, mais pointer sur page dédiée. Y’a déjà une astuce pour ça ? Ou est-ce une amélioration à apporter au plugin actuel ?
# Le 9 décembre 2011 à 17:15, par RastaPopoulos
En réponse à : MediaBox
Je pense que c’est une amélioration à apporter au script d’appel, ya sûrement un test possible à faire lors de l’activation au tout début, pour ne pas l’appliquer sur tel ou tel client (ou suivant la taille du navigateur, je ne sais pas).
Et si on corrige, faut reporter en SPIP 3 (ou l’inverse).
# Le 9 décembre 2011 à 17:32, par RastaPopoulos
En réponse à : MediaBox
Là à priori : http://zone.spip.org/trac/spip-zone/browser/_plugins_/mediabox/mediabox_pipelines.php#L66
Répondre à ce message