MediaBox

Gepubliceerd op: 10 mei 2010 – Dernière modification le 21 december 2021 – door Cerdic – 600 commentaires

Español, français
1
2
3
4
5
121 stemmen

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.

Pipelines

Le pipeline mediabox_config permet d’agir sur la configuration de la mediabox.

Par exemple, pour qu’un plugin désactive la mediabox, il suffira de déclarer ce pipeline dans son fichier paquet.xml

<pipeline nom="mediabox_config" inclure="monplugin_pipelines.php" />

et de le définir ensuite, dans le fichier monplugin_pipelines.php :

/**
 * Désactiver la mediabox
 *
 * @pipeline mediabox_config
 * @return array       Données du pipeline
 */
function monplugin_mediabox_config($config) {
	$config['active'] = 'non';
	return $config;
}

Voetnoot

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

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

227 discussions

  • benolaos

    Bonjour,

    comment feriez-vous pour insérer un watermark lors de l’affichage ?
    En vous remerciant pour toute piste...

    Op dit bericht reageren

  • 5
    Raphaël

    Bonjour / Bonsoir,

    Posté sur la page dédiée à la médiathèque également : Pourriez-vous nous expliquer comment faire pour bénéficier de l’affichage des crédits entrés dans la médiathèque de SPIP sur l’affichage / diaporama de médiabox ?

    Spip 3.0.5

    Merci d’avance ++ / Cdt

    • Raphaël

      En reprenant le modèle squelettes-dist/inclure/documents.html, il suffit d’ajouter la balise #CREDITS au niveau dans le title du href... merci Mç ! :))

      <B_documents_portfolio>
<div class="bloc clearfix" id="documents_portfolio">
	<h2><:medias:info_portfolio:></h2>
	<ul>
		<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>[
		<li><a href="(#URL_DOCUMENT)" type="#MIME_TYPE" 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})][ - <small>&copy; (#CREDITS|attribut_html)</small>]">[(#FICHIER
			|image_passe_partout{90,90}
			|image_recadre{90,90}
			|inserer_attribut{class,spip_logos}
			|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})][ - &copy; (#CREDITS|attribut_html)]})]
                 </BOUCLE_documents_portfolio>
	</ul>
</div><!--#documents_portfolio-->
</B_documents_portfolio>

      :)) ... La réponse était si simple... :((

    • Martin

      Bonjour,

      je souhaiterais afficher les crédits sous le document dans le #TEXTE, avez vous une idée?

      d’avance merci

      Martin

    • Raphael

      Directement dans la balise #TEXTE, non ce n’est pas possible, mais ajouter une boucle documents pour afficher les crédits dans le div qui affiche ton texte, oui.

      Pourquoi n’affiches-tu pas les crédits sur ou en dessous de tes photos / documents ?

    • Martin

      Merci pour ta réponse,

      Je pensais utiliser le champ „credits” des documents dans SPIP3 pour faire les choses carrées.

      Dans la version actuelle du site (SPIP2), dans pas mal d’articles, je me retrouve avec 2 ou 3 auteurs de photos différents par articles, nous avons pris l’habitude de mettre les crédit en dessous de chaque photo.

      exemple : http://www.aerobuzz.fr/spip.php?article3322

    • Raphael

      Tu peux ajouter des mots clefs sur les documents qui correspondraient aux auteurs : pour simplifier l’administration.

      Si tu bascules sous Spip 3, n’oublies pas de modifier le fichier de la dist qui ne prend pas en compte les crédits par défaut, même dans la 3.0.8 qui vient de sortir...

    Op dit bericht reageren

  • 2
    Teddy Payet

    Bonjour,

    Juste un petit message pour dire qu’en SPIP 2.1.19, dans l’interface ?exec=charger_plugin, dépôt http://plugins.spip.net/rss-+-selection-2-1-+, on télécharge le zip de la version pour SPIP 3… Et non celle de SPIP 2.1.

    Il en va de même pour jQuery UI… En fait, le zip de la zone est pour l’un comme pour l’autre la version compatible SPIP 3 (certainement l’archive est produite de la branche _core_)
    cf. :
    http://zone.spip.org/trac/spip-zone/browser/archivelist.txt#L512 vs http://zone.spip.org/trac/spip-zone/browser/archivelist_core.txt#L50
    http://zone.spip.org/trac/spip-zone/browser/archivelist.txt#L559 vs http://zone.spip.org/trac/spip-zone/browser/archivelist_core.txt#L51

    • Nathalie

      Bonjour,

      Je viens de rencontrer le même problème.
      Impossible de l’installer en 2.1

    • EricW

      Bonjour,

      Même chose pour moi en spip 2.1. L’installation semble se passer correctement, mais il n’apparaît pas dans la liste.

      Chose curieuse : tout est mis dans /lib, et rien dans /plugin/auto ...

      E.

    Op dit bericht reageren

  • 8
    Michel BOURLIER

    Bonjour,
    Passage à Spip 3.0.5 en local avec Sarka-spip 3.2.24. J’essaye en vain d’utiliser Mediabox. Elle fonctionne sans problème dans l’interface privée (voir doc), mais pas dans l’interface publique (voir doc). J’ai les mots_clés „mediabox” et „galerie” activés et la config suivante pour mediabox (voir doc). Je ne comprends pas du tout ce qui est incorrect !
    Une âme charitable peut-elle m’aiguiller ?
    Cordialement
    M. BOURLIER

    • Guytarr

      Mets seulement .mediabox pour la partie „En général” de la config et .galerie pour la partie „En galerie”, ça devrait mieux fonctionner ;)

    • Michel BOURLIER

      Bonjour,
      J’ai modifié selon tes conseils, mais aucun changement notable.
      Je m’arrache mes derniers cheveux ! !

      Cordialement

    • alex5

      Je passe un site de spip 2 vers spip 3 et j’ai exactement le même problème... et pour le moment encore aucune solution trouvée!
      à suivre...

    • Olivier

      Bonjour,
      J’ai rencontré le même problème sur un Spip 3.0.5 avec Sarka 3.2.24 car j’avais pris l’habitude de mettre .galerie .mediabox dans la config de la médiabox avec Sarka et Spip 3.0.2
      En réinitialisant la config de la médiabox et en choisissant „Configurer le plugin avec les valeurs nécessaires à Sarka-SPIP” dans le menu plugins de la config Sarka, ça semble bon.
      Cordialement

    • mbourlier

      Bonjour Olivier,
      Merci pour cette réponse. J’ai appliqué votre méthode, vidé le cache, mais rien n’y fait ! Aucun changement : diaporamas actifs en interface privée, mais une seule image en interface publique.
      J’avoue ne pas comprendre.

      Cordialement
      MB

    • alex5

      J’ai pu trouver une solution pour que cela fonctionne sur les pages publiques.
      Jusqu’à présent j’activais la balise #INSERT_HEAD via le couteau suisse, et en désactivant cette option et en ajoutant la balise manuellement dans le html des pages, ça fonctionne.
      J’espère que cela fonctionnera pour toi...

      Cordialement

    • mbourlier

      Euh, comment fais-tu pour mettre la balise directement dans le html des pages ?
      Quels fichiers ? A quel endroit ?

      Merci de ta réponse
      Cordialement
      MB

    • alex5

      Il y a bien un problème avec la balise #INSERT_HEAD sur sarka-spip, regarde là ils en parlent dans l’actualité: http://www.sarka-spip.net/spip.php?article524.
      Apparemment en attendant la correction il faut désactiver la compression des JS.

      Sinon la balise se place entre les balises

      et

      des squelettes. Comme je n’utilise pas sarka-spip je ne sais pas où sont les squelettes. Comme c’est un plugin, j’imagine dans le répertoire plugin/sarka-spip...

      Alex

    Op dit bericht reageren

  • Bruno

    Bonjour,
    est-il possible d’ajouter un picto cliquable „cliquez pour agrandir”

    Par avance merci
    Bruno

    Op dit bericht reageren

  • AlainF

    Bonjour,
    sous Spip 3.0.7,

    Quand je vais sur un article contenant des photos, après clic sur la première vignette, je n’ai pas les flèches pour passer d’une photo à une autre, je suis obligé de fermer et de recliquer sur une autre vignette.

    Une piste?, Cordialement, Alain.

    Op dit bericht reageren

  • 2
    enki

    Bonjour,

    Voudrais que sur un lien textuel mediabox s’ouvre avec le contenu d’une brève ou d’un article mais avec la présentation suivante : à gauche (50% de l’espace) le texte, à droite le logo (image)

    est ce possible?

    • enki

      Je l’ai fait ainsi et ça fonctionne à moitié :

      <a href="spip.php?page=popup&id_article=#ID_ARTICLE" class='mediabox boxIframe boxWidth-790px boxHeight-410px'>[(#TITRE|supprimer_numero)]</a>

      Le lien appelle un squelette popup avec l’article qui s’ouvre bien.
      Seul problème, bien que dans le css la largeur est bien spécifiée à 790px et la div interne à 750px mediabox s’obstine à me créer la boite à 730px :( A aucun endroit je retrouve ceci....

      Comment faire en sorte que ma mediabox s’ouvre à la largeur que je lui ai demandé? (spip 3.0.6)

    • enki

      j’ai agrandi cette valeur de la différence de pixels pour avoir le cadre que je voulais....mais trouve pas trop logique...

    Op dit bericht reageren

  • 2
    christianD.

    J’utilisais Mediabox en 2.1.12 et aucun souci. Maintenant que je suis en 3.0.5, le plugin ne se lance pas. Le paramétrage ’image/jpeg apparait pourtant bien dans les pages publiques.

    Il n’y a que la class(e)=’mediabox’ que je ne vois pas.

    Qu’est-ce qui manque ? Ici, une page pour exemple.

    • ChristianD.

      Je viens de m’apercevoir qu’en arrivant dans l’interface privée, Spip me sort un message

      Erreur dans les plugins : /Applications/MAMP/htdocs/spip3.05/asf305/plugins/auto/mediabox/mediabox_pipelines.php

      J’ai donc été voir ce fichier, mais comme ça, je ne vois pas ce qui cloche. Des pistes pour résoudre ce souci?

    • ChristianD.

      Tous mes problèmes ont été résolus avec la nouvelle version. Ca remarche, comme avant.

      Super !

    Op dit bericht reageren

  • 6
    RealET

    Bonjour,

    En plus du titre d’une image, je souhaiterais pouvoir en afficher le descriptif (qui peut être riche : paragraphes, listes à puces...).

    J’ai lu la doc, mais je n’ai pas trouvé comment faire.

    Peut-être que le onOpen/onShow pourrait aller chercher le descriptif dans un champ longdesc de la vignette ?
    Mais je ne sais pas faire...

    Quelques pistes :

    • RealET

      Comme quoi, poser la question, ça aide.

      $("#documents_portfolio a").colorbox({title: function(){
return "<h1>"+$(this).attr('title')+"</h1>"+$(this).attr('alt');
}});

      Mais par contre, ça se superpose aux contrôle de la mediabox, ou à l’image.

      Donc, en l’état des styles de la mediabox, c’est difficilement exploitable.

      Idéalement, il faudrait pouvoir afficher le descriptif en dessous de la box, en agrandissant le cadre de cette dernière.

    • Arnaud R.

      Salut RealET,

      Je suis fortement intéressé par ton astuce : dans quel fichier et à quelle ligne doit-on mettre ton code ?

      $("#documents_portfolio a").colorbox({title: function(){
return "<h1>"+$(this).attr('title')+"</h1>"+$(this).attr('alt');
}});

      D’autre part, quelqu’un sait-il comment ne pas couper les titres trop longs ?
      J’ai épluché les fichiers .js mais je ne trouve rien qui semble faire cela.

    • Yannick

      ah oui tiens, moi aussi ça m’intéresserait !
      merci !

    • Yannick

      Finalement, j’ai mis le script directement dans la page et aussi et surtout, mis la description de l’image dans le alt du . je ne sais pas si c’est la bonne méthode, mais ça a l’air de fonctionner.

      Merci RealET pour cette info qui m’a beaucoup aidé !
      Yannick

    • Paulbe

      Hey,
      J’ai pas bien pigé ou l’on devait intervenir pour afficher le descriptif ?

      Merci d’avance

    • Mç

      D’autres se sont posé la question là
      Je viens de passer la journée à fouiller les fichiers fournis avec le plugin (je suis en 2.1.9) et je trouve pas non-plus où on peut rajouter ce qu’indique RealET. Par contre avec la méthode indiquée plus loin dans le forum on peut a minima récupérer de quoi afficher le descriptif.

      Dans le inc-documents je modifie le “title” du lien :

      [<a href="(#URL_DOCUMENT)" 
	type="#MIME_TYPE" 
			onclick=""
	[ class="(#EXPOSER) mediabox"]
	 title="[(#TITRE|attribut_html|couper{80})][(#DESCRIPTIF)]">
		[(#FICHIER|image_passe_partout{130,126}
		|image_recadre{130,126,center}
		|inserer_attribut{class,spip_logos}
		|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]
</a>]


      Je m’en tire ensuite en aménageant le style du calque qui le contient : il fait la hauteur d’une ligne pour afficher [(#TITRE)] et la hauteur nécéssaire pour [(#TITRE)] et [(#DESCRIPTIF)]au survol :
      #cboxTitle:hover {height: auto;})

      Ça me va pour l’instant, soyez sympas de me faire remarquer si c’est du code dégeulasse que je peux pas laisser en l’état ;)

    Op dit bericht reageren

  • Julien VILLALARD

    Bonjour,

    Est-ce possible, dans une iframe mediabox, d’avoir un simple lien avec un onclick en JS qui ferme cette médiabox ? (médiabox elle même ouverte via un HREF avec class = „mediabox boxframe”

    Merci de votre aide

    Julien

    Op dit bericht reageren

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Wie ben je?
[Aanmelden]

Om je gebruikersafbeelding bij je bericht te tonen moet je je eerst registreren opgravatar.com (gratuit et indolore). Vergeet niet om hier je e-mailadres te vermelden.

Vul hier je commentaar in

In dit formulier kun je de SPIP-codes {{gras}} {italique} -*liste [texte->url] <quote> <code> en HTML codes <q> <del> <ins> gebruiken. Om een nieuwe paragraaf te maken laat je gewoon een paar regels leeg.

Een document toevoegen

Commentaren opvolgen: RSS 2.0 | Atom