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

  • Globy

    Bonjour,
    J’aimerai rajouter un lien « Fermer » en haut de la boite en plus de celui du bas.
    Je ne vois pas comment utiliser la fonction modalboxclose() ; pour que lorsque je clique sur « fermer » la boite se ferme. J’ai essayé pas mal de trucs mais rien ne colle...
    J’appelle la boite avec ... href=« spip.php ?rubrique1 » class=’mediabox boxIframe boxWidth-95% boxHeight-95%’
    Merci par avance pour le coup de pouce !!

    Répondre à ce message

  • 2
    Manu

    Afficher le descriptif
    Une question semble revenir fréquemment : en plus de l’affichage du titre de l’image, peut-on obtenir l’affichage du descriptif ? Quelqu’un a-t-il pu trouver une solution ? Mon petit doigt me dit que ça rendrait service à beaucoup de monde !
    Merci d’avance.

    • Maïeul

      le risque c’est de faire long. Il suffit de surcharger le modèle d’insertion d’image pour compléter l’attribut title sur le lien.

    • Manu

      Merci de ta réponse. Je ne comprends toutefois pas très bien ce que tu veux dire par « compléter l’attribut title sur le lien » .
      Ma question portait sur la présence dans la boite multimédia du contenu du champ descriptif de l’image, à la suite du titre. Du coup, il y a un truc qui m’échappe dans ta réponse et je me demande si on parle de la même chose ?

    Répondre à ce message

  • 2
    dede

    Bonjour
    je teste actuellement un site associatif sur la nouvelle version de spip 3.0.2
    la boite de dialogue de mediabox est bien paramétrable dans l’espace privé,
    dans l’espace publique les image s’affichent correctement , mais impossible de faire fonctionner le diaporama .

    merci +++ a celui qui me dépatouille
    dede

    • mirobolus

      Même problème pour moi, au clic sur une vignette du portfolio, la boite s’ouvre bien mais l’image ne se charge pas : petite icône d’attente indéfiniment.

      Ma config :

      spip 3.0.3
      Accès Restreint - 3.6.2 - stable
      Javascript Scroller - 1.44.1 - stable
      Menu babbibel - 3.0 - stable
      Menus - 1.2.3 - dev
      Saisies pour formulaires - 1.26.1 - test
      Squelette par mot clef - 3.1.0 - stable

      Merci d’avance

    • mirobolus

      Résolu : J’ai repris le modèle inclure/documents.html de la dist et ajouté ’mediabox’ dans la classe du lien de la 1re boucle :

      <a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
|url_absolue
|parametre_url{id_document,#ID_DOCUMENT}
|ancre_url{documents_portfolio})]';
return false;"[ class="(#EXPOSER) mediabox"][ title="(#TITRE|attribut_html|couper{80})"]>

    Répondre à ce message

  • 2
    garulfo2

    Bonjour à tous !
    Je viens de migrer un site en version 2 vers la version 3.0.3. Tout s’est super bien passé et j’en suis ravi.
    Maintenant que Mediabox est installé par défaut j’ai prévu de l’utiliser. Ça marche très bien à un détail près : l’alignement vertical de la fenêtre modale est beaucoup trop basse et descend à chaque clic vers la photo suivante (ou précédente). Si la page est grande, la photo peut même s’ouvrir complète en dehors de l’écran, en bas.

    Est-ce que quelqu’un a déjà eu ce problème ?

    Pour l’usage que j’en ai fait le plus simple pour moi à été de mettre automatiquement en galerie toutes les photos de la page courante en choisissant comme selection dans la configuration du plugin ceci :
    a[type=’image/jpeg’],a[type=’image/png’], a[type=’image/gif’]

    Le code généré qui cause problème est celui-là :

    <« div style="padding-bottom : 20px ; padding-right : 0px ; display : block ; position : absolute ; width : 597px ; height : 401px ; left : 653px ; opacity : 1 ; top : 697px ;" id="colorbox" class="box_mediabox box_modalbox cboxSlideshow_off"> »

    Ici, l’attribut "top : 697px" est faux. On peut voir le résultat ici

    Merci d’avance à ceux qui trouveront d’où peut venir le problème...

    • sirom

      Bonjour,
      Effectivement curieux et désagréable...
      Normalement, je n’ai eu aucun soucis de ce genre avec ce plugin...
      Difficile de résoudre ton problème, le code que tu cites étant un element.style
      Tu peux essayer de surcharger le #colorbox en mettant un top:0px !important;
      dans ta feuille de style perso... mais je ne suis pas convaincu.
      Tiens nous au courant.
      Cordialement.

    • Effectivement, c’est une idée qui améliore le résultat, merci.
      C’est pas encore parfait car si la page est un peu longue on est obligé de scroller tout en haut pour voir l’image.
      J’ai quand-même de la peine à comprendre comment j’arrive à ce problème
      Mais merci pour ce tuyau c’est déjà mieux.

    Répondre à ce message

  • 1
    Cllet

    Bonjour,

    Quelle balise utiliser en lien pour un logo d’article svp ?

    <a class="mediabox" href="???">[(#LOGO_ARTICLE)]</a>

    #URL_LOGO_ARTICLE, #URL_FICHIER, #LOGO_ARTICLE, etc, rien ne marche...

    Merci !

    • sirom

      bonjour,

      il faut rajouter un filtre extraire_attribut ce qui donne

      <a class="mediabox" href="[(#LOGO_ARTICLE||extraire_attribut{src})]">[(#LOGO_ARTICLE)]</a>

      Cordialement.

    Répondre à ce message

  • 4
    William Fourche

    comment configurer mediabox pour afficher une div non affichée comme avec thickbox
    une idée ? car apres 3h00 de recherches je n’ai pas trouvé une seule piste

    • ttseo

      Bonjour
      Même question pour moi. Je suis allé la poser sur le forum tickbox à tout hasard mais on m’a renvoyé ici.
      Merci à celui (ou celle) qui aurait l’astuce de nous la communiquer
      Cordialement

    • Frank

      Bonjour,

      je fus dans ce cas la également et voila la réponse (à partir d’un lien) :

      <a href="#" rel="nofollow" target="_blank" onclick='if (jQuery.colorbox) { jQuery.colorbox({html:"<p>Voila du texte<p>"});return false;}' >Un lien</a>

      ou bien

      <a href="#" rel="nofollow" target="_blank" onclick='if (jQuery.colorbox) { jQuery.colorbox({html:$("#mabox").html()});return false;}' >Un lien</a>

<div id="mabox" style="display:none">
  <p>Voila du texte<p>
</div>

    • ca y est j’ai repris le temps de remettre en ligne un spip 3.0
      la manip marche bien seul bemol la gestion des sauts de lignes (liée sansdoute au javascript est différente) pas grave ca marche

    • William Fourché

      ceux qui ne code pas trouveront ci dessous la syntaxe a ajouter pour gérer la taille de la fenetre

      < a href="#" rel="nofollow" target="_blank" onclick = ’if (jQuery.colorbox) width :"600",height :"520", jQuery.colorbox(html :$("#mabox").html()) ;return false ;’ >Un lien< /a >

    Répondre à ce message

  • Toto

    pif paf ouf et là ?

    Répondre à ce message

  • Sébastien

    Bonjour,

    J’utilise MediaBox avec beaucoup de satisfaction mais je me heurte depuis peu au problème suivant.

    J’essaie de joindre à un article un document distant stocké sur GoogleDocs (ou Drive maintenant). Cela marche parfaitement dans spip 2.1 : l’image (un jpeg) est reconnue, la miniature est créée lorsque j’appelle le modèle doc ou img dans le corps de l’article et un clic sur la miniature me renvoie bien sur l’image originale.
    Tout se complique avec Media Box : un clic sur la miniature ouvre la Box mais
    -  Sous Chrome, des caractères incompréhensibles apparaissent au lieu de l’image..
    -  Sous Firefox et IE, le contenu reste indéfiniment en chargement..
    Un cilc droit pour ouvrir dans une nouvelle fenêtre fonctionne correctement.

    Je suppose que cela vient du fait que l’url du document joint est codée :
    https://lh6.googleusercontent.com/DaZLEHP9AlWw3c94kmSZGGJsFz6yDCdTNYf6XeIGfWHomc8JHNwZbYori2jrCuyETDsHevPQSWM
    (pas d’extension jpg).

    Peut être qu’une modification du javascript de colorbox apporterait une solution mais je ne le comprends pas suffisamment...Quelqu’un aurait-il résolu le problème ?

    Merci
    Sébastien

    PS : j’ai fait une page de test pour illustrer le problème :
    http://www.cahier2texte.net/spip.php?article16

    Répondre à ce message

  • 7
    Denis

    Bonjour,
    je suis sur spip 2.1.12 et le pluging mediabox n’affiche pas les titres. Ni ceux que je mets dans le lien, ni ceux de l’image (les titres étant gérer par le plugin médiathèque.
    Quelqu’un a-t-il une idée du pourquoi. Ce qui est bizarre, c’est que sur un autre site, cela marche. J’ai comparer les réglages et je ne vois pas de différence.
    Merci d’avance pour vos idées.

    • Maïeul

      comment insére tu tes documents dans les 2 cas ? est le même squelette sur les 2 sites ?

    • Denis

      Bonjour,
      et merci de vous intéresser à mon problème.
      Dans le site où ça marche, j’introduis dans l’article :

      <a href="IMG/imag_asso/grand/voyage_venise1.jpg" class="mediabox" rel="venise" title="Venise : un canal"><img src="IMG/imag_asso/voyage/voyage_venise1.jpg" width="150" height="200" /> </a>

      Et dans le squelette, j’ai :

      [(#TEXTE|image_reduire500,0)]

      Dans celui où cela ne fonctionne pas, j’introduis le code dans l’article :

      <a href="IMG/jpg/tigre.jpg" class="mediabox" rel="exemple" title="Tigresse et son petit">  <img38|right> </a>

      et dans le squelette, j’ai

      [div class="#EDIT{texte} texte entry-content">(#TEXTE|image_reduire{300,0}) /div>]

      PS. J’ai supprimé les < des balises pour afficher le code, sinon, ç’est interprété
      Voila. Si vous avez une idée. Merci d’avance.

    • Maïeul

      1) pour insérer du code, utilise la balise code.
      2) utilise systématiquement les modèles doc ou img pour insérer tes images, tu facilitera l’export vers d’autres formats que le html
      3) pour un lien vers l’image original : [<imgxx>->imgxxx]
      4) peut tu envoyer l’adresse des sites en questions ?
      5) quel est le réglage par rapport à la génération automatique des vignettes ? tes images sont-elles dans le portfolio ou non ?

    • Denis

      Celui où ça fonctionne : http://www.3atp.org/-voyages- (la page ou c’est utilisé)
      Celui où ça ne fonctionne pas : http://www.inaden.net/Brune

      Sinon oui, j’utilise dans les deux le plugin médiathèque.
      Pour les vignettes :
      - dans le site ou ça ne fonctionne pas, dans configuration du site >> fonction avancé >> méthode de fabrication des vignettes je suis en gd2
      - dans celui où cela marche je n’ai rien sélectionné

      En tout cas, encore merci pour ton aide.

    • Denis

      J’utilise le plugon médiathèque dans les deux sites.
      Pour les vignette, dans le site où cela marche, dans les fonctions avancé, je n’ai pas sélectionné de réglage particulier, dans l’autre j’ai utilisé gd2
      Le site ou ça fonctionne : http://www.3atp.org/-voyages-
      Celui ou ça ne fonctionne pas : http://www.inaden.net/Brune

      En tout cas merci pour ton aide

    • Denis

      Celui où ça fonctionne : http://www.3atp.org/-voyages- (la page ou c’est utilisé)
      Celui où ça ne fonctionne pas : http://www.inaden.net/Brune
      Sinon oui, j’utilise dans les deux le plugin médiathèque.
      Pour les vignettes :
      -  dans le site ou ça ne fonctionne pas, dans configuration du site >> fonction avancé >> méthode de fabrication des vignettes je suis en gd2
      -  dans celui où cela marche je n’ai rien sélectionné
      En tout cas, encore merci pour ton aide.

    • Denis

      Désolé pour la multiplicité des message, il se passait un truc bizarre.
      Sinon, je reviendrais demain matin.
      Encore merci

    Répondre à ce message

  • René

    Bonjour,

    je souhaite que la Médiabox s’ouvre automatiquement en Iframe lorsque j’affiche une page rubrique. J’ai vu qu’il y avait la Splash box mais c’est pour déposer un cookie et cela concerne la page sommaire. Est-ce que quelqu’un connaît la solution ?

    Merci pour votre aide :)

    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