SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 196 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > MediaBox > MediaBox

MediaBox

10 mai 2010 – par Cerdic – 518 commentaires

Toutes les versions de cet article : [Español] [français]

114 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 :

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

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.

Voir en ligne : http://plugins.spip.net/mediabox

Notes

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

Dernière modification de cette page le 19 octobre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 8 août à 15:01, par Ramina En réponse à : MediaBox

    Bonjour,

    Sur un site proprement installé en 3.1.6 le portfolio ne fonctionne pas. Au clic sur une image, il n’affiche que cette image en pleine page, SANS la boite MediaBox qui permet de la voir en diaporama. En comparant avec le code produit par un autre site en 3.1.1 qui fonctionne parfaitement, on voit qu’il manque onclick class=​"cboxElement hasbox"​

    J’ai d’abord pensé que mes squelettes en étaient la cause, je les ai désactivés et même avec les squelettes par défaut cela ne marche pas. Mes réglages sur le plugin sont les mêmes que sur mes autres sites. Je vois que la version de MediaBox installée par défaut est maintenant 1.0.3 (auparavant c’était 1.0.2). Est-ce que cette version, qui est arrivée avec la mise à jour de sécurité Spip 3.1.6 en juin, est vraiment fonctionnelle ?

    Merci de vos éclaircissements
    Ramina

    • Le 9 août à 14:29, par b_b En réponse à : MediaBox

      Salut, le sujet a été abordé dans ce post de forum.spip et on y donne la solution a appliquer en attendant la prochaine version de SPIP :

      http://forum.spip.net/fr_267527.html#forum267588

    • Le 9 août à 16:36, par Ramina En réponse à : MediaBox

      Super, ça marche bien !

      Grand merci
      Ramina

    Répondre à ce message

  • Le 1er août à 14:02, par tintinux En réponse à : MediaBox

    Bonjour

    Je ne suis pas un grand habitué de SPIP, et je ne comprends pas ce qu’il faut faire pour avoir un diaporama.

    Si je fais cecidans un squelette article, en m’inspirant de l’exemple

    <BOUCLE_docs(DOCUMENTS){id_article}{vu=non}{par titre}>
    [<a href="(#FICHIER)" class='mediabox' rel='galerie'>document</a><br />]
    </BOUCLE_docs>  

    J’affiche (logiquement) une liste de liens et je n’accède au diaporama qu’en cliquant sur un des liens. C’est très laid.

    Ne peut on pas plutôt afficher la première image ou toutes les images en miniatures pour accéder au diaporama en cliquant dessus ?

    Et aussi, est-ce qu’on peut afficher le titre et le descriptif de chaque document dans le diaporama ? Un peu comme ça, dans le principe (cliquez sur « Suite »).

    Merci pour votre aide !

    Répondre à ce message

  • Le 26 juillet à 18:59, par Manu En réponse à : MediaBox

    L’attribut rel est utilisé pour avoir plusieurs galeries (= les images qui ont le même attribut rel sont regroupées dans la même galerie). OK. Ça fonctionne bien sauf que du coup ça passe pas au validateur w3c qui demande, si j’ai bien compris, qu’on passe par un attribut data-*

    Pas bien grave, mais, juste pour la beauté du truc, on pourrait pas faire évoluer le plugin pour qu’il passe la validation tout en gardant la réalisation de galeries ?

    Répondre à ce message

  • Le 17 juillet à 23:34, par ludo En réponse à : MediaBox

    bonsoir

    j’utilise ce plugin avec le squelette/thème maparaan et l’image déposée dans le portfolio ne s’ouvre pas sous forme de diapo (mais dans sa taille dans le navigateur)

    ai-je omis une option ? merci

    Répondre à ce message

  • Le 9 juillet à 01:24, par Cécile En réponse à : MediaBox

    Bonsoir

    J’ai un problème avec mediabox que je n’arrive pas à résoudre.
    Pour comprendre :
    -  un site à jour (spip 3.1.6 / mediabox 1.03) : http://dev.gite-cabane-ali-nais.com/spip.php?article2
    Après avoir navigué dans la mediabox, quand on ferme la dernière image visualisée, elle se met automatiquement à jour dans le slider. Si on clique ensuite sur la navigation vignette, aucune image ne correspond.

    -  le même site non à jour (spip 3.0.17 / mediabox 0.8.5) : http://www.gite-cabane-ali-nais.com/Votre-suite
    Après navigation dans mediabox, à la fermeture, l’image du slider n’est pas actualisée et la navigation vignette fonctionne.

    J’ai un autre site avec le même problème (spip 3.1.0 / mediabox 1.0.1) mais avec un slider différent.

    Je pense que mon problème vient de l’actualisation de l’image dans le slider quand mediabox se ferme mais j’ai eu beau chercher dans le plugin et du coté de Colorbox, je ne trouve pas...

    Si vous avez une idée, une piste, une solution... un grand merci d’avance.

    Répondre à ce message

  • Le 13 janvier à 14:52, par rubenxela En réponse à : MediaBox

    Bonjour ,
    j’ai un petit soucis avec mediabox en ce qui concerne la fenêtre modal que l’on peut ouvrir une fois lors de la première visite du site.
    Celle-ci s’affiche correctement partout sur le site, mais pas sur l’accueil (sommaire.html) . j’ai beau scruter le code, supprimer du js annexe ... je ne vois pas ce qui peut perturber l’affichage.
    merci de votre aide.
    url > www.navettelyonaeroport.com

    Répondre à ce message

  • Le 9 novembre 2016 à 22:56, par danou83000 En réponse à : MediaBox

    bonjour,

    le code fournit par aymeric et d’autres sur internet ne fonctionne pas chez moi. pas d’effet, je vais prendre Magnific popup qui est super et responsive
    en plus il est fait pour les portables avec effet swip (avec le doigt) ...

    Répondre à ce message

  • Le 4 octobre 2016 à 14:28, par stephenking999 En réponse à : MediaBox

    Bonjour,
    C’est étonnant mon mediabox ne fonctionne pas.
    Pourtant #INSERT HEAD est activé et le plugin également.
    Exemple lorque je clique sur les images de l’article elles apparaissent dans une nouvelle page avec un fond blanc et plus de site : http://www.edition999.info/Pocketbook-Inkpad.html
    Merci de votre aide.
    J’utilise Boostrap pour mes squelette au cas où cela aurait de l’importance.

    • Le 5 octobre 2016 à 07:55, par Manu En réponse à : MediaBox

      Il y a un souci avec les appels jquery (voir ci-dessous)

      TypeError : element is null sequence.js:30:9
      TypeError : $.browser is undefined 00fb61a995822dd2477f45cb73a42f86.js:59:1
      TypeError : jQuery(...).parents(...).formulaire_dyn_ajax is not a function ajaxCallback.js:1006:2
      TypeError : jQuery.spip is undefined ajaxCallback.js:21:3

      #INSERT_HEAD est-il inséré correctement ? Au bon endroit ?

      PS : le design du site est sympa. Quel squelette utilisez-vous ?

    • Le 5 octobre 2016 à 11:53, par stephenking999 En réponse à : MediaBox

      Merci de votre réponse.
      Je vais regarder pourquoi ces erreurs. J’avoue que cela ne me dit irne à première vue.
      Le #INSERT_HEAD est inséré par le couteau suisse, peut-être une piste ?
      Pour le squelette c’est un gratuit boostrap ecommerce trouvé là et ajusté pour Spip - Dailyshop

    Répondre à ce message

  • Le 14 décembre 2013 à 22:52, par Mann75 En réponse à : MediaBox

    Bonjour
    je pensais pouvoir utiliser cette fonctionnalité directement

    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.

    très utile quand plusieurs articles sont affichés sur la même page. J’ai ajouté l’attribu rel=’articleXXX’ à chaque document de l’article n°XXX afin d’avoir une gallerie par article.
    Las, lorsque je lance la mediabox, la galerie reprend tous les documents de la page sélectionnés pour mediabox.
    Ai-je mal compris quelque chose ?
    SPIP3 avec spipclear, couteausuisse, spip-lettres (entre autres)

    • Le 24 décembre 2013 à 17:00, par Mann75 En réponse à : MediaBox

      Je me réponds :
      pour que ça fonctionne, j’ai dû modifier le code dans jquery.colorbox.js (ligne 272) :

      if (settings.rel !== 'nofollow') {
              $related = $('.' + boxElement).filter(function () {
                      return (this.rel === element.rel);
              });
    • Le 29 septembre 2014 à 23:59, par popojcb En réponse à : MediaBox

      Bonjour Mann75,

      En fait cela fait plusieurs jour que je gratte de ci de là des infos pour parvenir à ce résultat.

      Lorsque j’ai lu votre post je me suis dis que c’était bon, mais en fait cela ne fonctionne pas chez moi ?

      est-ce biens toutes les lignes depuis la 272 à la 282 :

      if (settings.rel !== ’nofollow’)
      $related = $(’.’ + boxElement).filter(function ()
      var data = $.data(this, colorbox),
      relRelated ;

      if (data)
      relRelated = $(this).data(’rel’) || data.rel || this.rel ;

      return (relRelated === settings.rel) ;
      ) ;

      Merci de ton aide …et vive spip !!

      bien à tous.

    • Le 1er octobre 2014 à 10:13, par Mann75 En réponse à : MediaBox

      Bonjour

      oui, j’ai remplacé

      if (settings.rel !== 'nofollow') {
              $related = $('.' + boxElement).filter(function () {
                      var data = $.data(this, colorbox), relRelated;
                                              if (data) {
                                                      relRelated =  $(this).data('rel') || data.rel ||this.rel;
                                              }
                                              return (relRelated === settings.rel);
                      });

      par

      if (settings.rel !== 'nofollow') {
          $related = $('.' + boxElement).filter(function () {
                      return (this.rel === element.rel);
           });

      La boucle document donne ceci en html :

      <dl class='spip_document_5245 spip_documents spip_documents_left'style='float:left;'>
              <dt><a href="IMG/jpg/mon_jpeg.jpg"
                     
                      title='titre'
                      rel='article765'
                      type="image/jpeg"
                   >
                   <img src='//static-contrib.spip.net/local/cache-vignettes/L200xH200/mon_jpeg-adc08.jpg' width='200' height='200' alt='JPEG - 106.8&#160;ko' />
                   </a>
              </dt>

      Je n’ai plus le squelette sous la main, mais je reviendrai mettre la boucle que j’utilise.

    • Le 23 janvier 2016 à 16:30, par Mann75 En réponse à : MediaBox

      Un an après, voici le code du squelette doc.html (dans \medias\modeles) :
      -  ajout en début de squelette de
      <BOUCLE_quicontient(documents_liens documents){objet = article}{id_document}{0, 1}>#SET{associea,#ID_OBJET}</BOUCLE_quicontient>
      -  et dans la boucle _doc, ajout del’attribut ’rel’ :

      <dl class='spip_document_#ID_DOCUMENT spip_documents[ align(#ENV{align})][ (#ENV{class})] spip_lien_ok'>
      <dt>[<a href="(#GET{url})"[
              class="(#ENV{lien_class})"] [title="(#TITRE|texte_backend)"]

      rel=’article[(#GETassociea)]’

      [(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' />[(#GET{url}|?{</a>})]</dt>[
      <dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
      <dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
      </dl>
    • Le 16 septembre 2016 à 15:00, par Yohooo En réponse à : MediaBox

      hello,

      La modif du plugin ne marche plus dans la version actuelle :
      Après m’être mordu les doigts pendant 2h sur ce problème, j’ai préféré lancer les différentes galeries en javascript avec une boucle de ce type :

      1. <BOUCLE_srub(ARTICLES){id_rubrique}>
      2. <div class="colonne col-md-4">
      3. <BOUCLE_medias(DOCUMENTS){tout}{id_article}{!par date}>
      4. [(#COMPTEUR_BOUCLE|=={1}?{
      5. <a class="liengalerie#ID_ARTICLE" href="#URL_DOCUMENT" rel="article[(#_srub:ID_ARTICLE)]" [title="(#TITRE)"]>
      6. [(#LOGO_DOCUMENT|image_passe_partout{500}|image_recadre{500,300,center,000000}|inserer_attribut{alt, #TITRE}|inserer_attribut{class,img-thumbnail})]
      7. </a>,
      8. <a class="liengalerie#ID_ARTICLE invisible" href="#URL_DOCUMENT" rel="article[(#_srub:ID_ARTICLE)]" [title="(#TITRE)"]></a>
      9. })]
      10. </BOUCLE_medias>
      11.  
      12. [<h3 class="titliste"><a class="liengalerie#ID_ARTICLE">(#TITRE)</a></h3>]
      13. </div>
      14. <script type="text/javascript">$('.liengalerie#ID_ARTICLE').mediabox();</script>
      15. </BOUCLE_srub>

      Télécharger

    Répondre à ce message

  • Le 16 juillet 2016 à 17:08, par alienwaves En réponse à : MediaBox

    Bonjour,
    J’aimerais surcharger la boite (image agrandie donc) de la mediabox en y incluant un bouton en l’occurence celui du plugin « mes favoris ».
    J’ai essayé d’inclure la balise en m’aidant de documents.html du plugin « mediabox avec texte »,
    mais que nenni, rien ne s’affiche dans la boite...

    Le but est de mettre en favori les images du portfolio depuis la boite agrandie .

    Cordialement .

    • Le 18 juillet 2016 à 16:10, par alienwaves En réponse à : MediaBox

      bonjour,

      Apparemment d’après les nobles personnes qui aident sur le canal irc, ce n’est pas possible de faire cela en SPIP sans JavaScript...

      A suivre...

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Le Couteau Suisse

    4 mai 2007 – 1814 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 192 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

  • MathJax pour SPIP

    26 novembre 2010 – 46 commentaires

    La librairie MathJax est capable d’afficher des mathématiques (équations, fractions, ...) à la manière de Tex, mais sans image ! Tout en JavaScript ! Présentation de la librairie MathJax est une librairie très puissante permettant d’afficher des (...)

  • CKeditor 3.0

    4 octobre 2009 – 1226 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • spiPDF : générer des contenus sur mesure en PDF

    16 février 2011 – 224 commentaires

    Le plugin spiPDF génère des fichiers au format PDF d’article ou de tout autre élément SPIP, simplement à partir d’un squelette construit au format HTML 4 et facile à modifier. Avertissement de sécurité Ce plugin a fait l’objet d’une faille de (...)

Ça spipe par là