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

  • 5

    Bonjour et merci pour cet excellent plugin. Je l’utilise depuis peu sur des Gifs animés qui peuvent avoir un poids conséquent ( 1 à 2 Mo). Dans ce cas la Mediabox s’ouvre correctement, le chargement s’effectue bien mais l’utilisateur n’a pas d’élément lui permettant de savoir ce qui se passe, pendant la dizaine de secondes nécessaire au chargement.

    Est-il possible d’activer l’affichage de l’icône de « chargement en cours », comme visible sur la capture ci-jointe issue du site officiel de la librairie www.jacklmoore.com/colorbox/ ?
    Cette icône semble être activée par défaut dans Colorbox, comme visible sur les démos :
    http://www.jacklmoore.com/colorbox/example1/

    Il semble que la fonction dédiée soit proche de ceci :

    $(’#cboxLoadingGraphic’).show() ; 

    Je comprends la mécanique d’ensemble, mais je ne parviens pas à l’appliquer à Mediabox... Merci par avance de votre aide.

    • Bonjour,

      je me permets de répondre à ce post, non pour le résoudre, mais pour signaler que je rencontre le même « problème ». Je travaille actuellement sur un site de photos assez lourdes. Et je regrette également le manque d’une petite animation de chargement des photos.

      C’est dommage, et c’est vraiment LE SEUL (petit) défaut de ce plugin.

      Quelqu’un pourrait-il me pointer vers un début de solution, svp ?

      Merci d’avance.

    • La réponse vient de m’être donnée.

      Les CSS des différents modèles d’habillage des plugins (mediabox & mediaboxavectexte) ne mentionnent aucune hauteur pour l’élément #cboxLoadingGraphic.

      Pour qu’apparaisse l’animation de chargement, il suffit d’ajouter à sa feuille de style perso :

      1. #cboxLoadingGraphic { height: 100% }

      Un grand merci à Jacques de Pyrat.net & Bruno d’eliaz.fr pour avoir déniché et corrigé cet agaçant « problème »...

    • La réponse vient de m’être donnée.

      Les CSS des différents modèles d’habillage des plugins (mediabox & mediaboxavectexte) ne mentionnent aucune hauteur pour l’élément #cboxLoadingGraphic.

      Pour qu’apparaisse l’animation de chargement, il suffit d’ajouter à sa feuille de style perso :

      1. #cboxLoadingGraphic { height: 100% }

      Un grand merci à Jacques de Pyrat.net & Bruno d’eliaz.fr pour avoir déniché et corrigé cet agaçant « problème »...

    • Effectivement, ça fonctionne, merci beaucoup ! J’avais regardé côté Javascript, sans imaginer que c’était un simple problème de feuille de style... Encore merci.

    • Tout vient à point ..... :)

      Pour ma part, j’étais également persuadé qu’il s’agissait d’un problème d’appel javascript, et pas du tout de CSS...

    Répondre à ce message

  • 1

    Bonjour,

    Je suis en train de créer un site avec jquery fullpage. Voilà le rendu actuel : http://www.siel-lagune.org/ (le problème se situant au niveau du lien « voir le plan » du slide « coordonnées » où la fenêtre modale affichée n’est visible que si on remonte au premier slide).

    J’ai donc un souci avec mediabox et la propriété top qui se calcule en fonction de la fenêtre du navigateur. Autant mes appels de fenêtres modales fonctionnent bien au premier slide, autant, pour les slides suivants, les fenêtres modales s’affichent mais n’apparaissent pas, ce qui est logique (la propriété top restant toujours la même).

    Comment la propriété top peut être calculée en fonction bien sûr de la taille de l’écran mais en incrémentant à cette valeur la hauteur de chaque slide ?

    • En fait , j’ai écris trop vite : il y avait lignes à rajouter dans le JS Fullpage...
      Tout est OK !

    Répondre à ce message

  • Nicolas

    Bonjour,

    Je voudrais rajouter, dans la mediabox, à coté du titre, le crédits renseigné dans chaque image.

    Je ne trouve pas les fichier squelette à modifier.

    Merci d’avance

    Répondre à ce message

  • 6

    Bonjour,

    Lorsque j’étais en SPIP 2.1 j’utilisais le plugin thickbox V2 avec succès. En passant sous SPIP 3 je pensais bénéficier de Mediabox installé nativement dans les mêmes conditions.

    Cependant, même si le clique sur une image en vignette doc provoque bien l’apparition d’une boite avec l’image agrandie, on ne retrouve plus les attributs de navigation avec les flèches précédent, suivant, diaporama.

    Dans mon exemple, dans un même article j’ai mis plusieurs images dans le Portfolio, images que j’ai toutes mises dans l’article avec le modèle <docN|center>, images qui apparaissent donc ensuite côté public sous formes de vignettes. Je le répète donc, le clique sur une vignette provoque bien l’apparition de la boîte avec l’image agrandie, mais sans la possibilité de naviguer d’une image à l’autre. Ce qui oblige à toujours fermer la boîte et à cliquer sur une autre vignette.

    J’ai parcouru et la toile et les commentaires sur cette question qui semble-t-il en a préoccupé bien d’autres que moi, mais je n’ai trouvé aucun correctif ou aucune solution.

    Alors si vous avez une solution à mettre en oeuvre pour faire réapparaître la navigation dans la boîte je suis preneur, et je vous remercie par avance au nom des adorateurs de SPIP !

    • Bonjour,
      Je rencontrais le même problème que vous, j’ai fini pas trouver la réponse en relisant les centaines de messages. La réponse était donnée par Cédric. Pour obtenir ce que vous souhaitez il faut :
      -  Aller dans l’interface privé de spip
      -  Icône Squelettes
      -  Boite Multimédia
      Une fenêtre s’ouvre, au niveau du champ de Galerie vous avez :
      #documents_portfolio a[type=’image/jpeg’],#documents_portfolio a[type=’image/png’],#documents_portfolio a[type=’image/gif’]
      Il faut rajouter à la suite , .spip_documents a
      Vous aurez donc ceci dans votre champ :
      #documents_portfolio a[type=’image/jpeg’],#documents_portfolio a[type=’image/png’],#documents_portfolio a[type=’image/gif’], .spip_documents a

      -  Puis vous validez

      En fait le code , .spip_documents a permet de mettre tous les documents dans une même galerie si j’ai bien compris.

    • Bonjour,

      Problème résolu ! Merci infiniment !

      J’avais déjà essayé effectivement ce type de solution, en modifiant le code de cette ligne ou même en y rajoutant du code, mais sans succès.

      Votre code à rajouter fonctionne quant à lui ! Les flèches apparaissent à présent, et on peut faire défiler même avec les flèches du clavier, les images de l’article qui sont contenues dans le porfolio .

      Par contre, je précise éventuellement pour ceux qui seraient aussi impatients que moi : pensez à vider le cache de spip, sinon la modification ne sera pas prise en compte.

      Merci encore !

    • Marie-Claire

      J’ai ajouté le code indiqué et ai vidé le cache, mais le problème n’est pas résolu chez moi :-(
      y a t-il d’autres paramétrages importants ? Des plugins incompatibles avec mediabox ou autres ? Merci d’avance pour votre aide car cette fonctionnalité du diaporama est vraiment très important..

    • coquetier

      Bonjour,

      j’ai le même problème qui n’est pas résolu par la solution indiquée.

      Le site utilise SarkaSpip et est hebergé chez Free.

    • Marie-Claire

      Mon site utilise également Sarka Spip, et c’est donc peut-être bien la source de notre problème. Il y a peut-être un forum sur ce modèle de site sur lequel poser la question. On se tient au courant si on trouve une solution.

    • Bonjour,

      Pour savoir si un plugin est incompatible avec le plugin mediabox, il faut déjà tous les désactiver et vider le cache, et ensuite en activer un à la fois, regarder si mediabox fonctionne toujours, puis si mediabox fonctionne toujours, désactiver le plugin qui ne pose pas de problème, vider le cache, et recommencer l’opération avec un autre plugin, et ce afin de tous les tester et écarter ainsi éventuellement l’hypothèse d’une incompatibilité de plugin.

      Attention toutefois, vérifiez bien que mediabox fonctionne même sans aucun plugin. Pour faire défiler les photos dans les articles avec mediabox, il faut les afficher dans l’article avec le modèle <docN|"avec center ou left, ou right">, donc il faut qu’elles aient été mises dans le porfolio auparavant. De plus il faut bien appliquer l’heureux paramétrage proposé par CVD75013 un peu plus haut.

    Répondre à ce message

  • Bonjour,
    Des soucis pour afficher une vignette dans un article :
    -  Que l’image soit dans le porte-folio ou non, que j’utilise la balise img ou doc
    -  Quand je clique sur la vignette, l’image s’ouvre dans dans la même fenêtre

    Alors que ça fonctionne très bien avec le porte folio sans vignette dans l’article

    une idée ?

    Répondre à ce message

  • 1

    Bonjour,
    mediabox fonctionne bien avec les documents en porte folio ou inclus dans les articles. Par contre avec le plugin Album, mediabox affiche bien les images de l’album mais la fonction diaporama n’apparait pas.

    Je ne trouve pas d’où vient le problème.
    Merci par avance, si quelqu’un à une idée pour régler le problème.

    • J’ai eu la réponse par tcharlss,
      il faut rajouter dans la configuration de mediabox au niveau de Galerie le code suivant pour que la fonction diaporama fonctionne :
      ,.album a[type=’image/jpeg’],.album a[type=’image/png’],.album a[type=’image/gif’]

    Répondre à ce message

  • 1
    cactuszeus

    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.

    • cactuszeus

      -  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

  • 4

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

    • KOVAL Sébastien - dessign.fr

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

    • KOVAL Sébastien - dessign.fr

      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

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