Avertissement
Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0 [1]. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1.
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 :
<a href="IMG/mabelleimage.jpg" class='mediabox'>Voir l'image</a>
<a href="IMG/mabelleimage.jpg" type="image/jpeg" title="Ma belle image">Voir l'image</a>
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 :
<a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>
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 :
<a href="IMG/mabelleimage1.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 1</a>
<a href="IMG/mabelleimage2.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 2</a>
<a href="IMG/mabelleimage3.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 3</a>
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 :
$("a.mediabox").mediabox(options);
ou de l’ouvrir par un appel direct sans sélection :
$.fn.mediabox(options);
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 :
$("a[rel='example']").mediabox({title: function(){
var url = $(this).attr('href');
return '<a href="'+url+'" target="_blank">Ouvrir dans une nouvelle fenêtre</a>';
}});
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 :
$.modalboxload(href,options);
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) :
<a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]"
rel="nofollow" target="_blank"
onclick="if (jQuery.modalbox) {jQuery.modalbox('[(#URL_PAGE{login}|parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]');return false;}" ><:lien_connecter:></a>
Le lien chargé dans la boîte modale utilise ici les possibilités ajax de Zpip V1.
Note : pour Zpip V2, il faut utiliser {parametre_url{var_zajax,content}}
.
Fermeture de la boîte modale
La boîte peut être fermée par un appel javascript avec la fonction
$.modalboxclose();
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.
Pipelines
Le pipeline mediabox_config
permet d’agir sur la configuration de la mediabox.
Par exemple, pour qu’un plugin désactive la mediabox, il suffira de déclarer ce pipeline dans son fichier paquet.xml
<pipeline nom="mediabox_config" inclure="monplugin_pipelines.php" />
et de le définir ensuite, dans le fichier monplugin_pipelines.php
:
/**
* Désactiver la mediabox
*
* @pipeline mediabox_config
* @return array Données du pipeline
*/
function monplugin_mediabox_config($config) {
$config['active'] = 'non';
return $config;
}
Discussions par date d’activité
227 discussions
Bonjour,
comment faire pour charger du contenu html dans la mediabox ?
Exemple que je souhaiterais faire marcher :
quand je clique sur
la div suivante s’affiche :
Cela est-t-il possible avec mediabox ? Via quelle astuce ?
Merci beaucoup pour votre aide !
Cordialement,
Novispip
Répondre à ce message
Affichage du descriptif
Il y a un truc un peu frustrant dans Mediabox c’est que seul le titre est affiché... Comment faire pour que le descriptif le soit aussi ? Quelqu’un a-t-il fait des modifications répondant à ce besoin ? Cela pourrait rendre service à pas mal de monde sans doute.
Merci ***beaucoup*** d’avance
Répondre à ce message
Bonjour,
J’utilise l’option « Indiquez l’url du média à afficher automatiquement dans une boîte lors de la première visite sur le site public. » et je souhaiterez que tout les 24 heures le media ce réaffichent sur les navigateurs sur les quels il c’est déjà affiché.
Pouvez vous m’indiqué ce qu’il faudrait faire, si quelqu’un a une piste, merci
Répondre à ce message
Hello,
je cherche à afficher une longdesk en plus du title déjà présent. Les deux sur une ligne différente. Je pense aussi ajouter le crédit photographique présent dans la médiathèque.
Serait-il judicieux de le proposer en commit ?
Répondre à ce message
Bonjour,
j’ai un site sous spip 2.1.2 et j’aimerais ajouter des galeries photos pour certains de mes articles.
J’ai télécharger mediabox que j’ai installer au niveau de la partie administration . Mais je ne comprends pas comment il faut faire pour que les images que j’ai mis dans le porto folio de mes articles s’affichent en médiathèque.
Merci de m’expliquer ce que je dois faire pour que mes images puissent s’afficher.
Répondre à ce message
Bonjour,
Je suis débutant dans l’utilisation de spip, et de mediabox ! Je n’arrive pas du tout à le faire fonctionner comme je veux.
Je voudrais faire une page avec des vignettes des photos qui sont dans mon portefolio, et que lorsque l’on clique sur une photo on on ouvre un diaporama.
Je ne sais juste pas ce que je doit placer dans l’article, pour que cela soit fonctionnel.
Merci d’avance
Bonne journée
Bonjour, J’ai fait ça ici
Tu peux t’inspirer du code
A ta disposition si tu le souhaites.
Bon courage
Répondre à ce message
Bonjour, En effet, ici, il n’est pas question de mediabox, mais de fancybox. Mais j’ai déjà aidé quelqu’un à installer un plugin diapo avec sarkaspip.
Ça devrait pouvoir se faire avec mediabox ?
Bonne journée
Rebonjour,
Merci de votre aide. Je viens de désactiver Médiabox et d’activer Fancybox conformément à votre lien (je n’avais effectivement pas remarqué qu’il fallait configurer le plugin avec les valeurs nécessaires à Sarka. Mais, hélas, cela ne change rien ! Il doit y avoir autre chose que je ne vois pas !
Cordialement
Bonne journée aussi
Je me réponds à moi-même !
Ça marche !
Bizarrement, j’ai mis en place le plugin Nyroceros, puis appliqué dans album, article et rubrique l’effet Thickbox ! ! !
J’ai aussi redimensionné les photos peu être un peu lourdes.
En espérant que cela pourra aider
Cordialement
M. BOURLIER
Répondre à ce message
Bonjour,
Je suis un novice ; je fonctionne sous spip 2.1.8, sarka 3.0.4 et je cherche à utiliser médiabox en galerie, mais ne comprends où et comment doit se faire la configuration. Par exemple, j’ai un album comportant 40 images dans le portfolio (Majorelle1.jpg, Majorelle2.jpg) ou docXX.jpg et je voudrais qu’elle s’affichent sous forme médiabox dans l’article 15 faisant apparaître cet album.
La galerie est active, mais sans effet particulier. Je ne vois pas comment faire. Est-ce que quelqu’un peut m’aider ? Merci.
Voici le lien de mon site
Bonjour, C’est dans la configuration de sarkaspip que ça se passe, me semble t il. Bonne chance
Bonjour Patrick,
Très gentil à toi de me répondre, mais ainsi, cela ne m’avance guère. Merci quand même.
Michel
Je me réponds à moi-même !
Ça marche !
Bizarrement, j’ai mis en place le plugin Nyroceros, puis appliqué dans album, article et rubrique l’effet Thickbox ! ! !
J’ai aussi redimensionné les photos peu être un peu lourdes.
En espérant que cela pourra aider
Cordialement
M. BOURLIER
Répondre à ce message
Bonjour
Comment faire pour ajouter un descriptif à la photo ?
Merci
RP
bonjour
tout marche en partie privé mais ne s’affiche pas en partie publique ???
Modifie le fichier inc_head.html en décommentant #INSERT_HEAD
décommenter #INSERT_HEAD ça veut dire quoi ?
j’ai essayé de supprimer ce qui était entre les 2 #INSERT_HEAD dans le code de la page inc_head.html mais ça n’a rien changé
je n’ai rien trouvé non plus dans la config du site ?
Par défaut : inc_head.html contient
[(#REM) Balise permettant aux plugins d’inserer des appels javascript ;
C’est ici que SPIP va inserer l’appel de la librairie jQuery
Et appeler a la fin compacte_head pour agreger et compacter tout le head dans des fichiers statiques
si l’option est cochee dans Configuration
#INSERT_HEAD]
la balise #INSERT_HEAD est donc dans les commentaires, donc inactive.
Quand je dis « décommenter », ça signifie la sortir des commentaires, par ex :
[(#REM) Balise permettant aux plugins d’inserer des appels javascript ;
C’est ici que SPIP va inserer l’appel de la librairie jQuery
Et appeler a la fin compacte_head pour agreger et compacter tout le head dans des fichiers statiques
si l’option est cochee dans Configuration
]#INSERT_HEAD
Répondre à ce message
Bonjour,
J’ai une petite question concernant le portfolio. J’aimerais connaître la manip à faire pour rendre distinct deux galeries qui apparaissent sur la même page. Mon squelette de page fait intervenir deux articles distincts et donc deux galeries d’image. Au clic d’une des vignettes , le diaporama est lancé correctement mais additionne tout les documents de la page..
Quelqu’un à une idée ?
re,
Je tiens à préciser que l’indication de la balise Rel ne change rien, j’ai toujours l’ouverture d’un galerie unique lors que je souhaite en avoir deux distinctes. Je suis en 2.1.8 pour spip.
Si quelqu’un à une idée car je ne vois pas...
Merci
Re,
J’ai trouvé un truc mais je ne sais pas si c’est une bonne idéé, en tout cas cela fonctionne.
Dans le fichier spip.mediabox.js j’ai remplacé la ligne 26
par
Ainsi rel est pris en charge, ce qui n’était pas le cas avant. Je ne pense que cela soit un fonctionnement normal, alors si le concepteur du plugins (ou quelqu’un de bon) pouvait m’aider à résoudre ce bug ce serait super sympa.
Merci par avance.
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 : |