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,
j’ai un bug d’affichage sur mon mobile samsung galaxy S2 (android version 2.3.5, gingerbread.bukj3).
En cliquant les vignettes du portfolio, la box s’ouvre avec toutes ses fonctionnalites mais rien ne s’affiche, à part une image sur 5, qui est en .jpg egalement comme les autres. Même bug avec un mobile htc.
Faut-il passer en html5 ? j’utilise spip 3.0.17
Je precise que la mediabox et toutes les images s’affichent parfaitement sur tous les navigateurs que j’ai teste sous windows et de même sur la version mobile de firefox sur mon samsung ! (mais donc pas d’images sur les versions natives des mobiles qui pourtant redimensionnent le cadre à la taille de l’image mais ne l’affichent pas)
J’ai effectue une recherche « filtree » sur le forum et n’ai trouve qu’un post sur le responsive web design le 19 janvier 2014, , interessant pour resizer mais qui ne parle pas de ce bug.
L’overlay blanc ou noir avec opacite selon les versions en dessous des photos reste aussi colle en haut de la page sur les mobiles, je ne sais pas pourquoi.
Quelqu’un a t-il djà rencontre un problème de compatibilite ou d’absence d’affichage de photos avec les navigateurs « natifs » android et htc ?
Merci de vos retours d’experience.
- reu,
je m’auto-réponds :
mes images étaient bien en .jpg mais en mode (CMJN) car venant d’une graphiste qui avait bossé du « print » avec, une plaquette en l’occurence... Je l’ai ai passées en mode (rvb) avec toshop et maintenant elles s’affichent nickel... vraiment la petite bête quoi... Mais bon, si ça peut servir à d’autres...
Biz
Répondre à ce message
Bonjour,
Je cherche à ouvrir dans une boite Mediabox une image qui n’est PAS dans un portfolio (par exemple une image qui est dans le fil du texte ou juste dans la médiathèque).
Je peux le faire à partir d’un lien hypertextuel comme cela :
[ouvrir l'image XX->docXX]
Si j’applique le même principe à une image qui parait dans le fil du texte, par exemple
[<imgZZ|center>->docZZ]
cela ouvre l’image dans une nouvelle page !Quel squelette faut-il surcharger et comment ? (je suis sous Zpip)
Accessoirement, je voudrais aussi que dans la boite figure le titre de l’image.
Merci de vos lumières.
Répondre à ce message
Pas une petite piste depuis 1 mois !!
C’est dommage car cette petite fonction serait un plus pour les utilisateurs de scroll.
Merci quand même aux développeurs pour ce plugin.
bonjour ! c’est peut être aussi que ta question n’est pas très claire, deux scrolls ?
c’est quoi ton code, qu’as tu dans le contenu appelé, un lien ?
as tu regardé la doc de colorbox ? il y a une option scrolling:false....
Bonjour j’utilise le popup de mirobus qui ouvre une page popup.html dans laquelle je met une brève
dans un premier temps le script java de la page sommaire pour empêcher l’ouverture systématique du pop up ne fonctionne pas chez moi ? et je ne comprend pas pourquoi
ensuite j’aimerai que lorsque popup.html ne contient pas de brève le pop up ne s’ouvre pas mais je ne sais pas comment faire
quelqu’un peut m’aiguiller svp
merci
dans le head du sommaire :
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('splash=true') === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+7); // +7 = 7 jours
document.cookie = "splash=true; expires="+expires.toUTCString();
$.fn.colorbox({
href:'[(#URL_PAGE{popup}|parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]',
iframe:true,
width:600,
height:400});
}
});
</script>
"
dans le body :
onload="if (jQuery.modalbox)
jQuery.modalbox(’[(#URL_PAGEpopup
|parametre_urlurl,#SELF
|parametre_urlvar_zajax,#TEXTE)]’,iframe:true,width :’600px’,height :’400px’,trans :’elastic’,speed :’500’) ;
return false ;« > »
dans popup.html :
[(#LOGO_SITE|image_reduire100,*)]
#TEXTE
attention, ton message n’est pas dans le bon thread...
si tu utilises ce script qui pose un cookie, il faut retirer l’attribut onload de mirobolus, ce script remplace celui de mirobus pour n’ouvrir la popup qu’une seule fois...
pour ne l’activer que s’il y a une brève tu fais une boucle brève englobante et hop...
Merci de ta réponse ultra rapide Pir !!
mais je n’ai pas tout compris
tu veux dire que je dois uniquement utilisé ton script et l’englober d’une boucle mais je suis dans la partie HEAD non ?
Lorsque je supprime la partie du body je n’ai plus rien, j’ai certainement loupé un épisode
_
Répondre à ce message
Bonjour,
J’adore la mediabox, c’est vraiment un super plugin, très élégant.
J’ai un petit problème sur un site : les images s’ouvrent bien comme elles le doivent, mais il n’y a pas le défilement des images.
Les images sont dans le portfolio, et je n’ai pas changé les paramètres par défaut sur la page d’options. Si j’ai bien lu, ça devrait s’afficher automatiquement comme galerie, mais non.
Si quelqu’un a une idée ?
Merci beaucoup.
Répondre à ce message
Bonjour,
Malgré un encodage réglé à 480x270 (16/9) en format flv, je n’obtiens que du 320x240 (4/3).
Dans la configuration de la Boîte multimédia : Largeur Mini = 480px et Hauteur Mini = 270.
Comment obtenir du 16/9e ? je pense avoir tout essayé mais y aurait-il quelque chose que j’aurais oublié ou négligé ?
Répondre à ce message
Bonjour,
Je suis tout surpris de ne pas trouver le plugin dans :
http://plugins.spip.net/depots/principal.xml
Dommage, c’est rassurant pour les mises à jour !
Il faut que je change de lunettes, ou il y a une raison ?
la médiabox fait partie des plugins-dist (installé en standard avec SPIP et non désactivable via l’espace privé). Elle ne relève pas de la mise à jour par SVP. J’imagine que c’est la raison de son absence dans ce .xml ;-).
D’abord merci pour la rapidité de réponse.
Effectivement, du coup je l’avais installé à la main dans /spip/plugins et j’obtiens :
Je vais voir de plus près ...
ce qui est correct... si vous avez installé une version plus rapide, apparement SVP désactive la version plus anciennes, même dans plugins-dist.
Ok, je comprend, et je ne pensais plus à ces plugins-dist. Du coup je désactive, puis je désinstalle la version manuelle, et je retrouve bien l’ancienne version dans la liste des plugins verrouillés, mais ...
Et je ne vois pas la petite roue qui permet les mises à jour ?!?
Je préfèrererais faire tout ça proprement plutôt que de faire une double install.
je ne comprend pas ce que vous voulez : la version 0.8.11 ou la version 0.8.5 ?
je pense que le fait que vous ayiez installé manuellement la version 0.8.11 a fait que SVP a enregistré dans sa base (interne à votre site) que 0.8.11 était disponible... d’où l’info « obsolète ».
Ce que je vous conseille si vous voulez la 0.8.11 : mettez la dans plugin-dist à la place de l’ancien. la prochaine mise à jour de SPIP écrasera l’ancienne version et il n’y aura pas de souci...
Je n’avais juste pas vu que j’avais déjà ce plugin d’installé, c’est seulement pour a que je l’ai mis..
Je sais comment mettre à jour maintenant ;-) Merci
Je retourne donc voir comment je peux m’en servir dans mon squelette basé sur SPIPr.
problème assez courant. J’ai mis un message d’avertissement en début d’article.
Merci, mise à jour effectuée ; après une hésitations : j’avais renommé l’ancien *_old, et c’est lui qui apparaissait toujpours -> il a fallu que je le vire vraiment.
Bon maintenant, l’utilisation dans les squelettes.
D’origine, dans SPIPr, je ne vois pas la médiabox. J’interprète (mal sans doute) « la boîte peut être activée simplement par l’ajout de classes sur les liens » et je corrige la boucle portfolio en ajoutant la class sur le lien. Ben ... y’a un truc que j’ai pas du comprendre encore :-(
Vérificaton faite, j’ai bien #INSERT_HEAD_CSS
et #INSERT_HEAD dans mes entêtes.
Répondre à ce message
Bonjour
Je suis passé de spip 1.9.2 à spip 3.0.14
Maintenant du code s’affiche au dessus des images imgXXX|left et imgXXX|right
et pas de problème avec imgXXX|centrer docXXX|left et docXXX|right
Le lien : http://jean-charles-hachet.fr/spip.php?article18
Quelqu’un a t’ il une idée ?
Répondre à ce message
Pour la boucle Brève ça marche parfaitement
reste la partie pour ne pas avoir de réouverture à chaque fois que l’on retourne sur la page d’accueil
là je ne comprend pas Pir le script je n’arrive pas à le faire fonctionner
si je peux encore abuser de ton temps merci beaucoup
le script est bien placé entre
de la page squelettes/sommaire.html ?
le onload=« ... » a bien été retiré ? vidé le cache de spip et du navigateur ?
ps : Attention à rester dans le fil de discussion svp, merci
désolé je pensais que je devais mettre ma question hors du fil de discussion de mirobolus !
donc si je laisse le script dans le HEAD rien ne fonctionne, ni dans le BODY d’ailleurs
par contre le java dans le body fonctionne mais s’ouvre à chaque passage sur la page d’accueil
BOUCLE_ReActu(BREVES) tous par date inverse 0,1
onload="if (jQuery.modalbox)
jQuery.modalbox(’[(#URL_PAGEpopup
|parametre_urlurl,#SELF
|parametre_urlvar_zajax,contenu)]’,iframe:true,width :’600px’,height :’400px’,trans :’elastic’,speed :’200’) ;
return false ;"
/BOUCLE_ReActu
Répondre à ce message
La splashbox de la config de mediabox ouvre un media
Pour ouvrir une page html spip splash.html, placer le code suivant dans le head de la page sommaire :
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('splash=true') === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+7); // +7 = 7 jours
document.cookie = "splash=true; expires="+expires.toUTCString();
$.fn.colorbox({
href:'[(#URL_PAGE{splash})]',
iframe:true,
width:450,
height:500});
}
});
</script>
options : http://www.jacklmoore.com/colorbox/
Répondre à ce message
Bonjour Cédric,
Je cherche à mettre en place une splashbox ou une fenêtre pop-up avec Mediabox, de préférence, pour les besoins d’un client. Il souhaite y mettre ponctuellement un article (donc un contenu éditable à volonté) pour annoncer des événements.
L’idée de n’ouvrir la fenêtre qu’une fois me plait, mais je n’arrive pas à charger le contenu de l’article ou n’importe quelle url d’ailleurs, dans la boite multimedia. Elle s’affiche bien, mais elle est vide.
Comment dois-je procéder ?
Merci beaucoup ;
Je reviens sur ma question pour y apporter quelques précisions.
Lorsque j’utilise le champ Splashbox de la page de config du plugin avec une url vers une image, la mediabox s’ouvre et fonctionne parfaitement.
Si j’y mets une url vers une page html (en l’occurrence je voudrais appeler mon article n°67), la fenêtre s’ouvre, reste vide et ne peut plus être fermée.
J’aimerais autant que possible utiliser cette fonction de cookie pour que la fenêtre s’ouvre une seule fois. Mais je reste ouverte à un onload sur la page d’accueil aussi. Et là, je ne sais pas comment écrire ça.
A cela, j’ajoute que j’aimerais bien l’option elastic... Bref, le beurre et l’argent du beurre.
(spip 3.0.10)
Grand merci pour l’aide.
La solution :
Il semble impératif d’indiquer une largeur et une hauteur + le paramètre
|parametre_url{var_zajax,contenu}
Pff...
Reste un truc : quand l’article contient des liens, les pages se chargent dans la mediabox (logique).
Sauf que moi, je voudrais qu’au clic sur le lien, la box se ferme et que le contenu-cible se charge dans la fenêtre initiale. C’est possible çà ? Ou faut-il que mes liens soient dans le squelette et dans ce cas, comment ça s’écrit ? :-(
Résolu : grâce à Zapilou sur spip@rezo.net :
On crée un filtre, à écrire dans le fichier mes_fonctions.php :
Puis dans le squelette :
(#TEXTE|liens_parent)
On supprime la class spip_out pour que les liens saisis dans le corps de l’article de type
[lien->spip.php?page=contact]
aient le même comportement que les liens « internes » à savoir fermer la mediabox + charger la cible dans la fenêtre parente.Super boulot, merci Zapilou !
bonjour, oui mais tu ouvres une popup à chaque passage sur la page sommaire ?
Avec un cookie, à placer dans le head de ta page sommaire
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('splash=true') === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+7); // +7 = 7 jours
document.cookie = "splash=true; expires="+expires.toUTCString();
$.fn.colorbox({
href:'[(#URL_PAGE{popup}|parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]',
iframe:true,
width:450,
height:500});
}
});
</script>
pour tes liens <base target="_parent" > dans popup.html
pour les options : http://www.jacklmoore.com/colorbox/
L’ajout du cookie est top, ça marche parfaitement, merci Pi r !
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 : |