MediaBox

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.

Notes

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

Dernière modification de cette page le 16 mars 2019

Discussion

213 discussions

  • 2

    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.

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

    • 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

  • 5

    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)

    • 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);
              });
    • 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.

    • 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='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.

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

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

    Répondre à ce message

  • 1
    alienwaves

    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 .

    • alienwaves

      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

  • Quelqu’un pourrait-il m’aider a intégrer Instafeed dans MediaBox ?

    Ma page ne se charge pas dans mon iframe avec la combinaison suivante. Voir l’objet « template » du script ci-dessous :

    // InstaFeed
    var userFeed = new Instafeed({
    	get: 'user',
    	userId: 'XXX',
    	clientId: 'XXX',
    	accessToken: 'XXX.XXX.XXX',
    	resolution: 'standard_resolution',
    	template: '<div class="swiper-slide" style="background-image:url({{image}});"><a href="{{link}}" class="mediabox boxIframe boxWidth-700px boxHeight-600px instafeed-inner"><div class="wrapper-center"><span class="likes">{{likes}}</span><span class="comments">{{comments}}</span></div></a></div>',
    	sortBy: 'most-recent',
    	limit: 20,
    	links: false,
    	after: function () {	
    	}
    });
    userFeed.run();

    Répondre à ce message

  • 1
    Renée Picard

    Médiabox tel qu’il est sur spip ne répond pas bien au test du RWD. En fouillant sur la liste j’ai trouvé ce script (merci Arnaud) qui le rend responsive

    <script>
           /* Colorbox resize function */
           var resizeTimer;
           function resizeColorBox(){
               if (resizeTimer) clearTimeout(resizeTimer);
               resizeTimer = setTimeout(function() {
                       if (jQuery('#cboxOverlay').is(':visible')) {
                               jQuery.colorbox.load(true);
                       }
               }, 300)
           }
     
           // Resize Colorbox when resizing window or changing mobile device orientation
           jQuery(window).resize(resizeColorBox);
           window.addEventListener("orientationchange", resizeColorBox, false);
           </script> 

    Personnellement j’ai mis ce code dans squelettes-dist/inclure/head. Y a-t-il une manière plus « propre » de procéder ?

    • Aymeric

      Bonjour,

      Ce javascript ne fonctionne plus chez moi avec toutes les dernières mises à jour SPIP + plugins : « jQuery.colorbox.load is not a function ».

      J’ai essayé d’autres bouts de javascript sans grand succès pour le moment...

      Le mieux que j’ai réussi à faire c’est adapter la fenêtre mais pas le contenu... avec ça :

      jQuery(document).ready(function(){
        jQuery("#cboxOverlay").colorbox({
          inline:true,
          maxWidth: "90%",
          maxHeight: "90%",
          onComplete : function() {
              jQuery(this).colorbox.resize();
          }
          });
       
          // resize colorbox on screen rotate in mobile devices and set to cover 90% of screen
          jQuery(window).resize(function() {
              jQuery.colorbox.resize({width:"90%", height:"90%"});
          });
      });

      Si quelqu’un a une meilleure piste...

    Répondre à ce message

  • 1
    Patrick

    Bonjour,
    Le plugin désormais de la version Spip3.1 fonctionne comme attendu sur un écran de bureau.
    Le ratio d’image n’est plus respecté sur ma tablette, pour ce qui est des lightbox flagrant en particulier lorsque la vignette est en format portrait comme ici :
    Le parc et ses bassins
    J’ai placé puis enlevé le plugin adaptive images car cela ne changeait rien.
    S’agit il d’un défaut de mon squelettes, de ma tablette (ipad) ou faut il faire un réglage particulier pour reprendre cette présentation ?
    Pour toute réponse merci
    Bonne journée.

    • Patrick

      Erreur corrigée dans ma feuille css qui déterminait une largeur d’image (img:100%) la ligne est supprimée et tout va bien.
      Merci pour le plugin.

    Répondre à ce message

  • 6

    Bonjour, j’ai la version spip 3.0.20 et la fonction mediabox ne semble pas fonctionner. J’ai vérifié je ne sais combien de paramètres en fonction de ce que je trouvais sur le net mais rien à faire. Alors que ça fonctionne très bien sur la version 3.0.14... une solution ?

    • Bonjour,

      je suis dans les mêmes conditions, mais comme je travaille avec Spip et Bootstrap, je pensais que ça venait de moi ???

      page exemple

      Des directions ?

      Je plante, merci encore de tout ce travail.
      Cordialement Alain

    • En ce qui me concerne ça venait de fichiers en doublons dans squelette et squelette-dist car j’avais réinstallé mon site mais oublié de les supprimer... du coup ça ouvrait l’image dans une autre fenêtre ; mais vous semblez avoir un problème différent. vous devriez mettre votre code en commentaire. pas que je saurai résoudre le problème mais peut être d’autres personnes

    • Merci de votre intérêt, mais le problème venait d’un conflit avec un fichier .js dans le dossier /squelettes/
      Merci BootStrap que je découvre, tout est revenu dans l’ordre.

      Pour info, j’ai fait le test en renommant tour à tour les dossiers dans /squelettes/ ce qui m’a permis d’isoler le problème (je sais c’est si simple, mais certains matin, ce n’est pas le cas)

      Cordialement, Alain

    • Brice Boulangeot

      Bonjour Alain,
      Je suis confronté au même problème que toi. Est ce que tu pourrais me donner une piste pour la résolution de ce problème (quel fichier est en conflit) ?
      Merci d’avance
      Cordialement

    • Bonjour,
      assez simple comme démarche :
      dans /squelettes/ j’ai
      /content
      /css
      /footer
      /header
      /...
      /...

      Je renomme un par un en vidant le cache et en recalculant à chaque fois :
      /content_old
      /css
      /footer
      /...

      Puis
      /content
      /css_old
      /...
      /...

      Et une fois le dossier trouvé, je fais pareil, fichier par fichier dans le dossier

      En espérant que cela en aide plus d’un !
      Cordialement, Alain

    • Bonjour à tous...

      Voilà, il m’est arrivé la même chose et j’ai tourné longtemps en rond..., en fait, lors du passage d’un SPIP à un autre (je ne sais plus de quelle version à quelle version – 2 à 3 je crois), les images s’étaient détachées du porte-folio. Du coup, quand on est dans un article, il m’a suffit d’attaché les images au portfolio pour que mediabox fonctionne de nouveau !

      Je sais, peut-être votre problème est plus technique, le mien était stupide, mais au cas ou...
      Bon courage à tous.

    Répondre à ce message

  • Bonjour,
    Sauriez vous me dire ce que vous utilisez comme solution responsive pour optimiser l’affichage des diaporama Mediabox en monde Smartphone.
    Actuellement il me semble que l’affichage que nous connaissons, surexposition avec un template cadre choisi à la configuration, ne colle pas vraiment pour les smartphones.
    Idéalement je verrais bien un affiche plein écran avec slide pour passer d’une image à l’autre.

    Je voulais donc savoir si certains d’entre vous avaient déjà avancé sur cette problématique ? S’il existait donc une solution Responsive permettant d’adapter Mediabox.

    merci

    Répondre à ce message

  • Bonjour
    Je souhaiterais insérer un diaporama
    Alors j’ai lu l’utilisation de mediabox mais j’avoue que je coince, je ne comprends pas tout

    Mis a par des vignettes claquage c’est tout ce que j’obtiens.

    Merci d’avance de votre aide
    Claire

    Répondre à ce message

  • Bonjour, j’aimerai savoir comment on peux faire pour créer ses propres habillages et ce le plus proprement possible ?

    Actuellement je choisis un habillage puis je surcharge le css... Mais je trouve cette solution un peu bricolé ; et ne permettant pas de toucher à la structure html de la box ; pour y intégrer ce qu’on à envie..

    Spip est d’habitude très souple ; mais l’intégration de mediabox en plugin dist, uniformise et rigidiefie un peu le graphisme des galeries photo. C’est dommage Il serait donc chouette pour compenser cela d’avoir un article tuto ; pour expliquer de façon précise comment créer ses propre habillage ; et intégrer son propre code JS pour ajouté des élements html à la box si le cœur nous ne dit.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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