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.

Footnotes

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

updated on 2 October 2019

Discussion

213 discussions

  • Bonjour,
    sur un site en spip 3.0.21 avec sarka 3.4.5, je suis confronté au problème suivant :
    -  si j’active la Mediabox les liens du type [<imgxxx>->url] ne fonctionnent pas
    -  si je désactive la Médiabox, ils fonctionnent.
    Y aurait-il un moyen d’avoir les deux, ou de désactiver la Mediabox ponctuellement sur une image donnée ou encore de donner la priorité au lien sur la Mediabox ?
    Pas sûr d’être très clair...
    Merci d’avance

    Reply to this message

  • Bonjour,

    Sur un site en pré-prod sous SPIP 3 + SarkaSPIP 4.5.2, Mailbox ne fonctionne plus (plus de diaporama, ni de flèches précédent/suivant) depuis la mise à jour SPIP 3.0.21.
    Sur le site en production avec SPIP 3.0.21 + SarkaSPIP 3.2.26 pas de problèmes ni sur un site local SPIP 3.0.20 + SarkaSPIP 4.5.2.

    Une piste pour régler ce problème ?

    Merci d’avance.

    Reply to this message

  • avec spip3, le cadre de l’image apparaît, mais il n’y a pas d’image dedans; (cadre blanc)
    syntaxe signe inferieur img3596|center|class=mediabox signe superieur
    ou
    signe inferieur img src=’IMG/jpg/IMG_9142_-_Copie.jpg’ class=“mediabox” width=“470” height=“628” alt=“” / signe superieur

    même problème

    merci

    Reply to this message

  • 4
    Alexandre

    Bonjour,
    Je souhaite mettre une watermark sur les photos quand elles sont dans la boite de consultation. Je cherche où mettre le filtre image_masque pour superposer mes images.
    Mais impossible de trouver dans quel fichier l’image est chargée.

    Pourriez vous m’aider ?

    • Bonjour bonjour,
      1) Alexandre, as-tu trouvé la solution ? Je cherche à faire de même.
      2) Je cherche également à re-calculer les images (que se passe-t-il quand on met 10 photos de 8Mo dans un article... ?) il faudrait pouvoir définir une taille max...

      — > Des avis, des pistes, des solutions pour “travailler” les documents à afficher dans la médiabox ?
      Merci d’avance

    • Bonjour,

      N’ayant pas trouvé de solution, j’ai composé quelque chose de purement vomitif mais qui fonctionne. Merci aux kadors de SPIP de nous offrir quelque chose de plus élégant, et de plus SPIPien :

      L’idée est d’utiliser le traitement par #FICHIER
      1) traitement graphique d’abord (on utilisera le plugin “fonctions d’images” pour le image_merge qui permet d’apposer un logo)
      2) ensuite, faire 2 règles pour nettoyer le fichier de ses contours de code
      3) de remplacer “#URL_DOCUMENT” par l’URL de la nouvelle image traitée.

      Attention, ce code est franchement pas beau. Ex pour une image retaillée en 1200x800

      On fabrique une règle de nettoyage :

      #SET{reg1, "(<img src=')"}
      #SET{reg2, "(' width='1200' height='800' />)"}

      On fabrique l’image :

      1. [(#SET{image_apres_traitement,[(#FICHIER|image_passe_partout{1200,800}|image_recadre{1200,800}||image_merge{#CHEMIN{css/images/logo_watermark.png}, left, top}|replace{#GET{reg1}}|replace{#GET{reg2}})]})]

      On remplace #URL_DOCUMENT par [(#GETfichier_set)]

      Et voilà ;-)

    • Petite erreur de fin :
      on remplace #URL_DOCUMENT par

      1. [(#GET{image_apres_traitement})]
    • Après discussion fructueuse avec Azerttyu, voici ce que l’on peut plus élégamment faire (sans passer par les 2 règles reg1 et reg2), et ce grâce à la fonction “extraire_attribut” affectée à SRC.

      Code remanié :

      1. [(#SET{image_apres_traitement,[(#FICHIER|image_passe_partout{1200,800}|image_recadre{1200,800}|image_merge{#CHEMIN{css/images/logo_watermark.png}, left, top}|extraire_attribut{src})]})]

      Permet 3 choses :
      1) l’affichage dans Mediabox d’un fichier plus petit que le fichier d’origine
      2) l’apposition d’un watermark ou d’un logo (utilisation ici du plugin fonctions d’images)
      3) le stockage en cache de ce nouveau fichier

    Reply to this message

  • Bonjour,

    sur une page rubrique je liste des articles qui ont leurs propres images. Comment faire pour dans la galerie ne s’affichent que les images des articles ? Dans mon cas toutes les images sont chargées dans la galerie... J’ai nommé un rel par article mais rien n’y fait.

    <BOUCLE_formules(ARTICLES){id_rubrique}>
     
    <B_documents_portfolio>
    <BOUCLE_documents_portfolio(DOCUMENTS) {id_produit} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{tout}>
     
    [<a href="(#URL_DOCUMENT)" type="#MIME_TYPE" class="galerie" onclick="location.href='[(#URL_ARTICLE
    		  |url_absolue
    			|parametre_url{id_document,#ID_DOCUMENT}
    			|ancre_url{documents_portfolio}
    			)]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"] rel="livret#ID_ARTICLE">Aperçu du livret</a>]
     
    		</BOUCLE_documents_portfolio>
    </B_documents_portfolio>
     
    </BOUCLE_formules>

    Merci pour vos retours.

    Reply to this message

  • 1

    Bonjour,

    Est-ce que quelqu’un pourrait m’aider à disposer mes images différemment sur mon site car là c’est pas très pratique. Que dois-je faire pour les disposer horizontalement plutôt que verticalement?
    Voici mon site : http://darangerard.com/spip/spip.php?article102
    et merci pour votre aide...

    Reply to this message

  • 3
    crazyspip

    Bonjour,

    Tout d’abord, merci pour cet excellent plugin !

    Petite question : pour les besoins spécifiques de mon site, le portfolio présente les vignettes avec une pagination. Le hic, c’est que lorsqu’on lance le diapo, la box du plugin propose la navigation entre les images de la “page” sur laquelle on se trouve, uniquement.

    En l’occurence, dans mon exemple, les 6 premières images. Si j’en ai 8 dans mon article, je dois fermer mediabox, aller à la page suivante, puis relancer la box qui navigue alors sur les deux dernières images.

    Y a-t-il un moyen pour remédier à cela ? Voici ma boucle :

    <B_doc>
    [(#ANCRE_PAGINATION)]
    #PAGINATION
    
    <div id="documents_portfolio" class="ma_classe">
    <BOUCLE_doc(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {doublons} {pagination 6}>
    
    [<a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href=
    '[(#URL_ARTICLE|parametre_url{id_document,#ID_DOCUMENT})]
    #documents_portfolio';return false;"[ class="(#EXPOSER)"]
    [ title="(#TITRE|attribut_html|couper{80})"]>
    
    [(#FICHIER|image_reduire{92,85}|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]
    
    </a>]
    
    </BOUCLE_doc>
    </B_doc>
    </div>
    • mettre qq part dans ta page

      <div  style="display:none">
      <BOUCLE_doc_caches(DOCUMENTS) {id_article}{doublons}{tout}>
      [<a href="(#URL_DOCUMENT)" type="#MIME_TYPE"></a>]
      </BOUCLE_doc_caches>
      </div>
    • crazyspip

      Bonjour Pi r,

      Je ne comprends pas bien quelle logique sous-tend ta solution (explication bienvenue) mais - à condition de la placer avant les autres boucles mais à l’intérieur de la DIV “documents_portfolio” - elle fonctionne -> Merci !!

      Seul “hic” : en reprenant mon exemple de 8 images paginées par 6, si je clique sur ma 1re vignette, la médiabox la présente comme image 3/8. Les images de la première “page” sont donc numérotées de 3 à 8 et ce sont les 2 images de la “page suivante” qui portent les numéros 1 & 2.

      C’est un moindre mal, ça fait juste un peu bizarre. Donc si quelqu’un y voit une solution, je suis preneuse...

    • ed_kaka

      Bonjour,

      je déterre un peu le sujet car je suis confronté aux mêmes symptômes que crazyspip: c’est à dire que j’arrive à lister l’ensemble des images cependant avec la pagination , la numérotation de Mediabox par en cacahuète ...

      en fixant la pagination à 50, j’obtiens
      page 1: images 1,2,3,4,5 sont numérotées 51,52,53,54,55
      page 2: images 51,51,53,54,55 sont numérotées 1,2,3,4,5

      Quelqu’un aurait-il déjà résolu cette énigme ??
      Par avance merci

    Reply to this message

  • 1

    Bonjour,
    La mediabox ne s’affiche pas dans l’espace public, dans l’espace privé si. #INSERT_HEAD et #INSERT_HEAD_CSS sont bien dans le squelette.
    Qu’est-ce qui peut bien bloquer ? Voici la page : http://bit.ly/1LyS5OY
    Merci d’avance !

    • jeromeD

      Bonsoir Plmousse,

      As-tu trouvé une solution a t-on problème car j’ai le m^me.

      Merci

      Jérôme

    Reply to this message

  • 6
    Jol.gloubi

    Salut tout le monde,

    J’ai un problème avec la mediabox : quand je met une image dans le portfolio (pour qu’elle s’ouvre avec la mediabox), eh bien ça marche dans l’espace privé, mais sur le site public les images ne s’ouvre pas dans la mediabox mais directement en lien dans une nouvelle page.

    Je ne comprends pas ce qu’il faut faire. Il est indiqué que ça marche dès qu’on met une image dans le portfolio, non ? J’ai créé mes squelettes moi même, est-ce que j’ai oublié d’y mettre quelque chose ?

    J’ai désactivé tous les plugins, et ça ne change rien. Mon spip est le dernier en date : 3.0.17.

    Merci !

    • si tu a créé tes squelettes toi même, peut-être a tu oublié de mettre la balise <code#INSERT_HEAD dans la partie <head>..</head>. http://www.spip.net/fr_article4629.html

    • Jol.gloubi

      Malheureusement ce n’est pas ça, j’ai bien mis la balise #INSERT_HEAD dans les pages.
      Vous pouvez aller voir ici : http://inegalites.ulb.ac.be/spip.php?article45 (la mediabox devrait s’ouvrir sur la première image, elle le fait bien dans l’espace privé, mais pas public).

    • Jol.gloubi

      Ok j’ai trouvé.
      Il suffisait d’insérer #INSERT_HEAD_CSS, que j’avais oublié.
      Et voilà :)

    • Bonjour,

      J’ai le même soucis. Pourtant je suis parti des squelettes de la dist que j’ai modifié dans mon dossier squelettes et la balise #INSERT_HEAD est bien dans mon /inclure/head

      Jol.gloubi, je vois que tu as rajouté #INSERT_HEAD_CSS mais où et pourquoi?

      Merci d’avance

      jérôme

    • Bonjour,

      J’ai vérifié la balise #INSERT_HEAD_CSS est bien présente également puisque j’utilise le fichier head de la dist.

      Mais lorsque je clique sur une image, elle ouvre la m^me page identique mais avec la photo en plus grand dessous et non dans une médiabox??
      Je suis en spip 3.0.17
      Je constate la même chose sur un autre site en spip 3.0.17??? Avez-vous une idée?
      Merci

    • jeromeD

      Bonsoir,

      J’avais le problème en février j’avais trouvé une solution mais sans la noter...est-ce que quelqu’un a trouvé la solution, s’il a rencontré ce problème?

      Merci

    Reply to this message

  • Avec la révision http://zone.spip.org/trac/spip-zone/changeset/90916 (Pour SPIP 3.1), il est possible pour la SplashBox dans la configuration d’indiquer comme URL un objet interne de SPIP (ex : art12).

    Cela rend le fonctionnement cohérent avec le reste de SPIP.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom