MediaBox

Publié le : 10 mai 2010 – Dernière modification le 21 décembre 2021 – par Cerdic – 600 commentaires

Español, français
1
2
3
4
5
121 votes

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;
}

Notes

[1] Au sein du répertoire plugins-dist, qui contient les plugins verrouillés.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

227 discussions

  • Bonjour,

    Le bouton « Voir » du porte plume me donne une page blanche quand le plugin Mediabox est actif.

    MediaBox 0.6.8
    SPIP 2.1.8 [16966]

    Une idée ?
    Merci

    Répondre à ce message

  • 1
    yvon

    Bonjour, et merci pour cet excellent outil.
    Je m’en sert (entre autre) pour afficher des événements du calendrier à l’aide d’une boite modale avec le code ci-dessous (je n’ai pas les squelettes Zpip, d’où ce code) :

    <a class="small_plus" 
href="spip.php?page=evenement&amp;id_evenement=#ID_EVENEMENT" 
rel="nofollow" target="_blank" 
onclick="if (jQuery.modalbox) {jQuery.modalbox('spip.php?page=inc-evenement&amp;id_evenement=#ID_EVENEMENT');return false;}" 
title="#TITRE">#TITRE</a>

    La boite fonctionne parfaitement, sauf que si dans mon événement, j’ai à remplir un formulaire de participation, après validation, le retour se fait dans une fenêtre ordinaire.
    Comment faire pour que le retour s’affiche dans la boite modale ?

    • Yvon

      Je me réponds (voir aussi mon post sur la liste spip@rezo).

      Dans mon fichier inc_evenement, il faut encadrer la balise #FORMULAIRE_PARTICIPER_EVENEMENT#ID_EVENEMENT par une div de classe « ajax ».

      Par contre pour utiliser l’effet médiabox avec le fichier de connexion login.html, ça a l’air plus délicat ; si on écrit dans ce fichier :

      <div class="ajax">
[(#FORMULAIRE_LOGIN{#ENV{url}|sinon{#URL_ECRIRE{accueil}}})]
</div>

      je reviens bien dans la boite si je fais une erreur de login, mais j’en sors si je sélectionne une langue ou si je clique sur le bouton « oubli du mot de passe ».

    Répondre à ce message

  • 2
    filnug

    Hello,

    Apparemment, l’affichage du titre dans la mediabox est limité à 80 caractères. Comment puis-je modifier cette limite svp ?

    • yvon

      La limitation, elle est dans inc-document.html, pas dans mediabox ; tu n’as qu’à modifier ça dans ce squelette.
      Mais les boites mediabox supportent mal des chaines trop longues (superpositions).

    • filnug

      Merci bcp pour les infos yvon !

    Répondre à ce message

  • 1
    filnug

    Encore moi ! (désolé)

    J’ai des grosses difficultés à intégrer une vidéo au format flv (d’env. 5M) dans la mediabox. Voici le ma boucle :

    <BOUCLE_video_vignette(DOCUMENTS){id_article}{doublons}{extension IN swf,flash,flv,mov,avi,rar}{par date}>
	<a href="[(#URL_DOCUMENT)]" type="#MIME_TYPE" class="mediabox">[(#LOGO_DOCUMENT||image_reduire{160,0}|image_recadre{140,82})]</a>              
 </BOUCLE_video_vignette>

    En fait, la mediabox s’ouvre, mais tourne indéfiniment jusqu’à planter le navigateur !
    Pouvez-vous svp m’aider ?

    • filnug

      Hello,

      Je vais m’auto répondre, car j’ai trouvé une solution.

      Ma boucle document pointe vers une page html, plutôt qu’une vidéo :

      <a href="#URL_PAGE{video}" class="mediabox>

      Du coup, la page video.html affiche la vidéo souhaitée. Plus de problème de non affichage. Mediabox affiche très bien une page html.

    Répondre à ce message

  • 1
    marabbeh

    Bonjour,

    Je bloque sur un truc bête : le commanditaire du site, qui est photographe, veut aboslument bloquer le clic droit. Je voudrais le faire uniquement sur les images mediabox en grande taille, que j’ai repérées <img id=« cboxPhoto »... />, en y ajoutant un oncontextmenu=« return false ». Malheureusement je n’arrive pas à ajouter cette propriété via Javascript... Une idée ?

    • A ma connaissance, il n’y a aucune vraie solution efficace pour bloquer le clic droit. Le mieux est de mettre un « tampon » en opacité sur chaque photo ou prendre le risque du clic droit sur une image compressé

    Répondre à ce message

  • 2
    KMk

    Bonjour,

    Je suis passée à la version 2.1.8. Mediabox ne fonctionne plus (snif...).
    Voyez ici.

    Une petite lueur ?
    Cordialement,
    KMk

    • b_b

      Salut, tu as deux erreurs javascript dans ta page, le problème doit venir de là. Les erreurs semblent venir du plugin boutons_texte, vérifié qu’il est bien à jour et activé. Je te conseille aussi de faire une mise à jour de tous tes plugins, c’est bien de le faire après une mise à jour de SPIP.

      ++

    • KMk

      Bonjour, b_b,

      J’ai retiré les deux appels javascript dans le head de l’article, vu que je n’utilise pas le plugin sur ce site.

      J’ai téléchargé et installé la dernière version de médiabox  : et cela marche !

      Sauf un petit bémol : les boxs sont décalées vers le bas et sortent donc de l’écran. Une petite lueur sur l’origine de ce phénomène ? (voir toujours ici.)

      Merci pour vos conseils qui m’ont déjà permis d’avancer,

      Cordialement,
      KMk.

    Répondre à ce message

  • 2
    kristoff23

    Pour utiliser ce plugins , il ne suffit apparemment pas de le charger et de l’activer . Je suis sous Spip 2.1.8 et SarkaSpip 3 .

    J’active le plugin et il ne se passe rien . Quand on lit l’article , on voit qu’il faut rajouter du code , où ? Est-ce dans l’article que l’on rédige ou faut-il aller modifier le squelette utilisé ?

    Je suis d’autre part surpris que mon gravatar ne soit pas toujours reconnu .

    Merci pour vos lumières ...

    • Kristoff23

      C’est toujours le même !

      J’ai fait un essai en écrivant le code directement dans le corps de l’article :

      <a href="IMG/IMG_4230.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 1</a>
<a href="IMG/IMG_4237.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 2</a>
<a href="IMG/IMG_4253.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 3</a>

      J’obtiens un affichage que je ne peux laisser en ligne pour l’instant , un texte cliquable aboutit à une fenêtre dans laquelle rien ne s’affiche . pourtant les images concernées sont bien dans le portfolio .

      Pour l’instant , je suis très loin de ce que j’espérais : un outil plus performant que thickbox ou Nyrocéros .

      Tiens , je m’aperçois que le gravatar ne fonctionne qu’avec une adresse mail sur les deux valides !

    • Kristoff23

      J’aimerais que mon portfolio n’ait plus l’aspect que l’on peut voir ici comme avec pas mal de sites sous SarkaSpip .

      Merci pour vos éclaircissements .

    Répondre à ce message

  • 1
    marabbeh

    Je n’arrive pas à faire fonctionner ce plugin et je ne comprends pas pourquoi. J’ai utilisé le code par défaut, et d’autres codes suggérés dans les commentaires. Mais il ne se passe rien, ou plutôt les images s’affichent les unes à la suite des autres, comme si le plugin n’avait aucun effet.
    Je n’utilise, pour l’instant, aucun autre plugin, à part les extensions par défaut de la version spip 2.1.6.
    J’ai essayé Firefox 4 béta et Google Chrome. Le résultat est le même...
    C’est pour un site de photographe... Ce plugin est essentiel au site.

    Répondre à ce message

  • 9
    filnug

    Personnellement, lorsque j’ajoute dans le champ titre d’un article le code suivant :

    [<imgXX|left>->imgXX]

    l’image apparaît normalement sur le site et génère, dans le code source le code :

    <p>
<span class="spip_document_4 spip_documents spip_documents_left" style="float: left; width: 566px;">
<a class="spip_in" href="IMG/gif/xyz.gif">
<img width="566" height="480" title="mon titre" alt="descritptif" src="IMG/gif/xyz.gif"/>
</a>
</span>
</p>

    Mais lorsque je clique dessus, la media box s’ouvre, tourne dans le vide, se ferme et l’image apparaît toute seule dans mon navigateur.

    Je n’ai donc tjs pas compris comment intégrer une image correctement. Pourtant, ma div contant #texte a bien id « documents_portfolio » et une class « mediabox ».
    Bref, pourquoi ça marche pas ? :-p

    MERCI

    • Cerdic

      Quel navigateur utilise-tu (et dans quelle version ?). Quelle version de SPIP as tu ?
      Il faudrait que je vois ta page où le bug se produit pour analyser d’où vient le problème. C’est visible en ligne ?

    • filnug

      Merci pour la réponse.

      J’utilise en autre FF 3.6 et le site est sous spip 2.1.0.

      Est ce que tu es sur le canal irc pour que je puisse te montrer une version svp ? Je m’y trouve généralement sous le même pseudo. Et toi, es-tu b_b ?

      Merci

    • filnug

      hhmm,

      j’ai toujours le meme problème et je n’arrive pas à trouver de solution pour le résoudre. Est il possible de se retrouver sur le canal irc svp pour transmettre une url ?

      Merci

    • Bonjour j’utilise la mediabox depuis plusieurs mois et elle fonctionne vraiment au poil, c’est un système tres souple et je remercie vivement le createur ce plugin spip.

      aujourd’hui j’aimerais qu’une fenetre mediabox s’ouvre au chargement de ma page

      avez vous un bout de script pour faire cela ?

      je suppose que cela passe par un onload mais j’ai du mal a mettre les mains dans le paté :)

    • Cerdic

      Avec jQuery, le lancement d’actions au chargement de la page se fait par

      jQuery('document').ready(function() {
ici code pour lancer la mediabox
});

    • je me répond à moi même (ci dessus )

      <script type="text/javascript">
	$(document).ready(function() {
		$.fn.colorbox({href:"thankyou.html", open:true});
	});
</script>

      fonctionne a merveille, il ne manque que le cookie pour que cela n’apparaisse qu’une fois et c’est au top :)

      merci bcp ... il est trop fort ce cedric !!!

    • Cerdic

      Ah mais si c’est pour faire une splashbox qui n’apparait qu’une fois, il y a encore mieux. La dernière version du plugin prévoit déjà cela, et il suffit de mettre dans le panneau de configuration l’url de la page a afficher dans la splashbox ! Il faut complèter la doc sur ce point d’ailleurs.

    • DD

      Bonjour,

      Je mets l’url http://www.site/IMG/swf/carteflash.swf (c’est de saison) en utilisant la fonction splash de base du plugin mais le document ne s’affiche pas. A la place la roue tourne.

      j’ai essayé avec l’URL d’un article mais cela ne fonctionne pas non plus : page complètement blanche

      merci

    • DD

      Bon, je pense que c’est le même problème que Gérald ci-dessous : incompatibilité avec le couteau suisse.

    Répondre à ce message

  • gmeunier

    Hello,

    bug avec la lame #INSERT_HEAD du couteau suisse
    Si une page est appelée avec la mediabox, celle-ci ne s’affiche pas.

    Couteau suisse 1.8.29.00
    Mediabox 0.6.8
    SPIP 2.1.2 [16017]

    Gerald

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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