SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 83 visiteurs en ce moment

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

MediaBox

10 mai 2010 – par Cerdic – 541 commentaires

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

117 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 : https://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 1er novembre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 11 octobre à 17:42, par Philippe En réponse à : MediaBox

    Bonjour,

    Savez-vous dans quel répertoire du squelette il faut placer une feuille de style colorbox.css si l’on souhaite la personnaliser. Merci d ’avance.

    • Le 17 octobre à 18:09, par inaden En réponse à : MediaBox

      Bonjour
      La css est dans plugins-dits/mediabox/dossier_du_type_choisi

    • Le 18 octobre à 07:28, par Philippe En réponse à : MediaBox

      Oui certes, merci, mais la css modifiée, je la mets dans squelettes/css/, squelettes/mediabox/, ou autre dossier ?

    • Le 18 octobre à 07:40, par inaden En réponse à : MediaBox

      Non, vous la laissez au même endroit.

      Si vous utilisez Firefox (ou n’importe quel autre navigateur d’ailleurs), allez voir dans les outils de développement ou tout simplement afficher le code source. Vous saurez (verrez) alors dans quel dossier est stocké votre fichier colorbox.css et ce sera donc celui-ci qu’il faudra modifier et vous devrez le laisser à la place qu’il occupe et où il est appelé.

    Répondre à ce message

  • Le 17 octobre à 18:28, par inaden En réponse à : MediaBox

    Bonjour à tous

    J’ai monté deux sites en parallèle (spip 3.2.1). J’ai mis la même boucle :

    1. <B_documents_portfolio>
    2. <div class="bloc clearfix" id="documents_portfolio">
    3.         <h2><:medias:info_portfolio:></h2>
    4.                 <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>[
    5.                 <a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
    6.                   |url_absolue
    7.                         |parametre_url{id_document,#ID_DOCUMENT}
    8.                         |ancre_url{documents_portfolio}
    9.                         )]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>
    10.                          <figure class="snip0019">
    11.                         [(#FICHIER
    12.                         |image_passe_partout{300,300}
    13.                         |image_recadre{300,300}
    14.                         |inserer_attribut{class,spip_logos}
    15.                         |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]
    16.                         <figcaption>
    17.                 <div><h2>[(#TITRE|textebrut)]</h2></div>
    18.                 <div>#DESCRIPTIF</div>
    19.                                                 </figcaption>                  
    20. </figure>
    21.                 </a>
    22.                 ]</BOUCLE_documents_portfolio>
    23. </div>

    Télécharger

    J’ai paramètré mediabox de la même façon. J’ai le même fichier mes_option.
    J’ai vérifié dans la BDD (table meta, ligne mediabox) et les paramètres sont les mêmes.
    J’ai testé avec l’appel normal du portfolio l’affichage d’image attachée à un article sans être mise dans l’article lui-même.

    Sur un site, lorsque j’affiche l’agrandissement de l’image, j’ai le titre du document (pas le titre du fichier, celui attribué au document) mais pas sur l’autre !

    Ça fait 10 fois qu’il me semble tout vérifier, j’ai regardé la console JavaScript et même les logs apaches : pas d’erreur !

    Pourtant sur un site j’ai bien le titre dans le pop in et pas dans l’autre !

    Si quelqu’un a une idée. Je suis preneur. Il y a forcément un truc que j’oublie, mais quoi ???

    Merci d’avance.

    PS. Pour le moment, les sites sont bloqués par htacces, je ne peux donc donner d’url.

    Répondre à ce message

  • Le 4 octobre à 12:58, par serginio En réponse à : MediaBox

    En complément de mon dernier post je rajouterai que la mediabox apparait bien dans l’espace privé mais pas dans l’espace public.

    • Le 12 octobre à 17:49, par jfd En réponse à : MediaBox

      Bonjour,
      1) Je me suis aperçu que dans l’espace privé, mediabox ne tenait pas compte des réglages effectués. Il ne doit donc pas utiliser les mêmes fichiers (modèle ?)
      Cela peut expliquer la différence de fonctionnement.
      C’est une piste pour tenter de comparer le contenu des fichiers privé/public

      2) Par ailleurs, j’utilisais thickbox, le pluging s’est télescopé avec médiabox lors du passage en V3 avec les mêmes problèmes. n’y a-t-il pas un vieux pluging qui traîne ?

      3) Une installation manuelle de médiabox doublonnerait car elle ne peut remplacer la version verrouillée. Cela pourrait aussi mettre le foutoir.

    Répondre à ce message

  • Le 4 octobre à 12:52, par serginio En réponse à : MediaBox

    Bonjour.
    Mon site est sous spip 3.1.6 avec plugin mediabox 1.0.3. J’ai réalisé les modifications de la révision https://zone.spip.net/trac/spip-zone/changeset/104991/spip-zone.
    J’ai vidé les caches et j’ai toujours pas de medibox lorsque je clique sur une image insérée dans un article : j’ai l’image en plein écran avec impossibilité de revenir en arrière sauf à utiliser le bouton de navigation du navigateur.
    Pour l’instant j’aimerai juste régler ce problème sans faire de mise à jour spip.
    Je précise que j’avais réussi à régler le problème pour un autre site avec cette révision. Mais là, je coince.

    Quelqu’un pour m’aider SVP ?

    Répondre à ce message

  • Le 24 août à 10:29, par Willy D En réponse à : MediaBox

    Bonjour,

    les tests d’accessibilité indiquent une erreur pour chacun des boutons (précédent, suivant et diaporama) en raison d’une absence de « value » pour les éléments « button ». Cela pourrait être facilement réglé en ajoutant une valeur même vide à ces trois boutons :

    <button type="button" id="cboxPrevious">
    <button type="button" id="cboxNext">
    <button type="button" id="cboxSlideshow">

    Les test ont été réalisés avec WAVE Evaluation Tool 1.0.4 (https://addons.mozilla.org/fr/firefox/addon/wave-accessibility-tool/)

    Cordialement

    Répondre à ce message

  • Le 31 mai à 13:51, par JeanLuc En réponse à : MediaBox

    Bonjour Cerdic
    Depuis quelques semaines, j’essaie de régler un détail avec tcharlss, le créateur du plugin « Albums 3 » (voir la discussion sur le forum de ce plugin) :
    Quand on a un portfolio ou un album d’images volumineux, on va avoir tendance à le paginer.
    Or, les images en dehors de la pagination d’une page ne suivent pas dans le diaporama généré par la Mediabox. Seules les images de la page HTML sont reconnues et disponibles dans la Mediabox. Pour avoir les suivantes, il faut cliquer sur le lien de pagination pour les afficher dans la page, et là on peut visualiser les images présentes dans la nouvelle page...
    Y a t-il un moyen de passer en paramètre à la mediabox l’ensemble des images d’un portfolio ou d’un album même paginé ?
    Merci d’avance pour ta réponse...

    Répondre à ce message

  • Le 16 mai à 12:34, par Ben En réponse à : MediaBox

    Salut,
    un petit message pour dire qu’à la validation W3C css, plugins-dist/mediabox/colorbox/black-striped/colorbox.css, une petite erreur est retournée pour

    1. #cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}

    Il suffit de remplacer (opacity = 90) par (opacity=90)

    1. #cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity=90);}

    C’est pas grand chose, mais le « Congratulations ! No Error Found. » fait toujours plaisir quand on valide ;)

    Merci pour le boulot énorme fait par tous les contribut-rices-eurs !

    Répondre à ce message

  • Le 3 mai à 00:41, par Lucie En réponse à : MediaBox

    Bonjour à tous,
    Je viens vers vous aujourd’hui en ayant l’espoir de recevoir une réponse à un problème : impossible pour moi d’activer la galerie de Mediabox (Boite Multimedia) sur des documents (images vignettes appelées grâce au plugin Media) attachées et figurant dans un produit.
    En effet, ayant programmé une fiche produit pour une boutique en ligne, je voudrais faire défiler mes vignettes d’images avec une galerie en ayant la possibilité de faire défiler les images en grande taille, sur fond noir, grâce à des flèches (suivant / précédent). Pourtant cette fonctionnalité de Mediabox ne fonctionne pas du tout dans mon cas... Et je me demande pourquoi...
    J’ai essayé maintes fois d’activer d’autres plugins (Galleria, Photoswipe...) qui me permettraient de visualiser les images en galerie mais n’y parviens pas. Je précise à nouveau que mes images sont attachées à un produit (objet éditorial Spip). Merci d’avance pour vos lanternes...

    • Le 3 mai à 00:44, par Lucie En réponse à : MediaBox

      Ps : La galerie ne fonctionne pas non plus pour les images attachées aux articles.

      Problème de compatibilité avec d’autres plugin connu ?

    • Le 6 mai à 17:15, par DomH En réponse à : MediaBox

      Bonjour,

      Dans l’onglet de paramétrage de la boîte multimédia
      le champ en galerie est par défaut :
      #documents_portfolio a[type=’image/jpeg’],#documents_portfolio a[type=’image/png’],#documents_portfolio a[type=’image/jpg’],#documents_portfolio a[type=’image/gif’]
      dans ce cas les images du porte-folio sont agrandies une par une.

      si le champ en galerie à la valeur .mediabox
      alors il est possible de faire défiler les images manuellement ou en diaporama automatique

    • Le 6 mai à 20:25, par Lucie En réponse à : MediaBox

      Bonjour et merci pour cette réponse. Les réglages de la boite multimédia sont correctement indiqués. J’ai remplacé le champs par défaut de « en galerie » par .mediabox mais la navigation de la galerie image par image ne fonctionne toujours pas...
      je ne comprends pas où est le problème.
      Merci pour votre aide.

    Répondre à ce message

  • Le 18 avril à 09:12, par beno En réponse à : MediaBox

    Bonjour,

    Est-ce jouable de mettre « du plugin Crayons » dans le Mediabox ?
    L’idée, c’est à l’affichage du doc, un double-clic et on modifierait le fichier...
    je n’ai trouvé aucune discussion sur le sujet, et je ne vois pas où je pourrai insérer le #EDIT...

    Merci

    Répondre à ce message

  • Le 14 mars à 15:27, par Chris En réponse à : MediaBox

    Bonjour,
    j’essaye de faire apparaître un boite modale avec la dernière version de sip 3.2, mais pour le moment sans succès !
    Le code
    $.fn.mediabox(href :« my url ») ;
    ne fonctionne pas avec une url externe.
    J’ai essayé de rajouter iframe:true, mais ça ne change rien.
    J’ai besoin de l’appeler via du code javascript car je dois rediriger la page à la fermeture de la boite modale, mais rester dans la boite modale en cas d’erreur du formulaire.
    Merci de votre aide.

    • Le 14 mars à 16:22, par placido En réponse à : MediaBox

      Bonjour,

      Attention de bien suivre la syntaxe, d’autant qu’on a le choix entre 2 variantes.

      1) Ne pas oublier les accolades, car c’est un tableau d’options qui est ici attendu.

      1. $.fn.mediabox({href: 'http://....'});

      2) Autre possibilité, où cette fois on passe directement l’url comme premier argument :

      1. $.modalboxload('http://....');
    • Le 14 mars à 17:33, par Chris En réponse à : MediaBox

      Oui, j’ai bien mis les accolades, et j’ai aussi essayé avec modalboxload, la boite modale apparaît, mais affiche un cour instant après « This content failed to load. »

      $.fn.mediabox({href: 'http://www.clubic.com'});
      $.modalboxload('http://www.clubic.com/');

      Par contre si je met directement le lien avec le bouton, c’est bon, mais je ne peut pas contrôler la fermeture de la boite dans le formulaire :

    • Le 14 mars à 18:11, par placido En réponse à : MediaBox

      Hum, dans ce cas, il faut plus d’éléments :
      -  Quel navigateur ?
      -  Des messages d’erreur dans la console javascript ?
      -  Votre site est-il en https?
      -  Que renvoit les entêtes (headers) du site extérieur ?

    • Le 15 mars à 09:26, par Chris En réponse à : MediaBox

      Bonjour,
      J’ai esayé avec plusieurs sites : google, clubic, lemonde, site local, et aucun ne se charge.
      Peut-être un problème de syntaxe ou de mise à jour avec la dernière version !

    • Le 16 mars à 14:31, par Chris En réponse à : MediaBox

      J’ai essayé les différentes possibilités décrites sur cette page.
      Fonctionne :
      <a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>
      Ne fonctionne pas :

      <a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]"
              rel="nofollow" target="_blank"
              onclick="if (jQuery.modalbox) ...

      Dollar.fn.mediabox(options);
      Dollar.modalboxload(href,options);
      Je ne sais pas si le problème viens de la librairie ou de la documentation, mais une aide serait extrêmement bienvenue.
      Merci.

    Répondre à ce message

Répondre à cet article

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

  • SkelEditor 2.0

    1er mars 2010 – 79 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)

  • Albums 3

    8 août 2014 – 287 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • Menu animé déroulant

    16 août 2015 – 60 commentaires

    Barre de menu dynamique multi niveaux - adaptation aisée (?) des couleurs et dimensions - convient aussi aux petits écrans (mobiles).

  • Réservations multiples

    4 juillet – commentaires

    Permettre aux utilisateurs d’effectuer de réservations multiples (réserver pour plusieurs personnes à la fois ou réserver un événement plusieurs fois) Dépendances Saisies Réservation d’événements Introduction Il y a deux manières de multiplier les (...)

  • PHANTOM (HTML5UP)

    18 juillet – 32 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)