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.

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

Notes

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

Discussion

227 discussions

  • 2

    Bonjour,

    j’ai installé Mediabox sur mon site (Spip 2.1 + Aveline). Ca marche nickel pour les photos, mais impossible de faire ouvrir une « popup » contenant un article ou la page contact. Le popup s’ouvre, mais il n’y a rien dedans...

    Voila ce que je met dans l’article avec le lien :

    <a href="spip.php?articleXX" class="mediabox boxIframe"> Lien </a>

    J’ai essayé

    <a href="spip.php?articleXX" class="boxIframe"> Lien </a>

    sans résultat non plus...

    • Même constat chez moi (Spip 2.1.2 [16017] en local et Mediabox 0.6.8 [42423])

    • Bon, en lisant les précédents commentaires, j’ai vu que celà arrivait quand on ne passait pas de parametre de hauteur et de largeur. Du coup, je ne sais pas comment faire car j’essaye de lancer des vidéos youtube qui ont pourtant une largeur et une hauteur indiquées dans SPIP...

      De plus, utilisant ZSpip et Aveline, je ne vois pas comment faire différencier les liens de documents images portfolio / doc à telecharger / videos à lancer.

      Enfin, je n’arrive pas à faire une box pour le formulaire de contact. Plus exactement, j’arrive à faire afficher la page=contact dans une box, mais soit elle reprend l’intégralité de la page du site, soit je n’ai plus aucun formatage si je passe le parametre « contenu ».

    Répondre à ce message

  • Une bizarrerie ? à moins que l’incompatibilité soit annoncée quelque part ? sur 3 sites en spip 2.12 avec plugins à jour, la mediathèque empêche apparemment tous les scripts d’effets box de fonctionner que ce soit fancy, thickbox ou cette boite mediabox.

    Répondre à ce message

  • 3

    Bonjour,

    Première fois que j’essaie ce plugin, ici pour afficher un contenu HTML.

    Dès que j’essaie de donner une dimension à ma mediabox (avec dans la classe ceci : « boxWidth-800px boxHeight-600px »), le lien est suivi plutôt que s’afficher dans la mediabox.

    Je constate au passage grâce à la console Firebug que j’ai une erreur « data is not defined » ligne 300 de jquery.colobox.js, alors que je n’ai pas cette erreur si je retire juste les dimensions de la classe.

    Je suis sur SPIP 2.1.2 et MediaBox 0.6.8

    Répondre à ce message

  • Bonjour

    j’ai un petit problème avec ma mediabox...
    Est-ce que quelqu’un pourrait m’aider svp ?

    Ma mediabox refuse de se déclencher.
    Pourtant j’ai bien inséré une class=« mediabox » et une id=« documents_portfolio » comme demandé
    et je n’ai pas toucher l’appel CSS par défaut du plugin.

    Voilà un apercu de mon code :

    <div class="presentation_equipe" id="documents_portfolio">
    								
    	<B_img-equipe>
    		<BOUCLE_img-equipe(ARTICLES){id_article IN #ENV{idarticle}}{par num titre}{par date}{inverse}{0,1}>
    		<h2>#TITRE</h2>
    			<BOUCLE_vignette(DOCUMENTS){id_article}{extension==jpg|png|gif}>
    			<a href="#FICHIER" class="mediabox" type="image/jpeg">[(#FICHIER|image_reduire{100,0}|image_recadre{100,70})]</a> 
    			</BOUCLE_vignette>
    		</BOUCLE_img-equipe>
    	</B_img-equipe>
    
    </div>

    Je vous remercie d’avance. ^^

    Répondre à ce message

  • 1

    Bonjour,

    Pour information, j’ai remarqué que les titres des images insérées par le raccourci typographique <docXXX> n’était pas affichées dans la pop-in. C’était le type et le poids de l’image qui était affichés à la place.

    Cela est dû au fait que la librairie Colorbox (sur laquelle se base le plugin) se sert de la propriété title de la balise <a> qui entoure l’image. Et que par défaut, le modèle doc.html prévoit d’afficher le type et le poids de l’image dans cette propriété.

    Pour afficher le titre de l’image dans la pop-in, il faut donc surcharger le modèle /prive/modeles/doc.html en remplaçant ligne 27 :

    title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'

    par :

    [ title="(#TITRE|texte_backend)"]
    • Stéphane.

      Grand merci pour cette information que j’avais tentée de retrouver pour faire cette petite modification.

      On trouve toujours de très bonnes informations dans les forum qui entourent le projet de SPIP, bonne continuation à tous.

    Répondre à ce message

  • Hello

    Est-il possible de rajouter une petite phrase dans le paragraphe « Utilisation avancée en javascript » disant que toutes les options de la colorbox peuvent être utilisées ? J’ai mis pas mal de temps avant de le comprendre. Je m’en suis servir pour une page « Revue de Presse » sur laquelle je ne voulais pas de redimensionnement de la MediaBox

    Merci

    Répondre à ce message

  • 2
    Sylvain

    Hello,

    juste un petit mot pour dire que dans Spip 2.1.1, sur IE 7 (et sûrement IE6), la mediabox est incompatible avec IE8.js (des outils de Compatibilité Microsoft Internet Explorer dans Fonctions avancées), à moins que ce ne soit l’inverse ;-)

    Cela marche avec IE7.js

    Peut-être IE8.js est buggé...

    • Tous ces scripts js de pseudo-compatibilité sont des nids à problèmes qui ne font que déplacer les soucis. Donc oui, c’est surement IE8.js qui pose ce soucis. Je déconseille vivement son utilisation, comme celle des autres libs js homologues. Mediabox marche parfaitement dans IE7 et 8 sans ces librairies.

    • Sylvain

      En effet, il a fallu que je les désactive pour avoir un site acceptable sur IE6 et même IE7...

      Je ne sais pas si cela a déjà été discuté mais pourquoi les avoir intégré dans les extensions de bases de spip alors que ces scripts génèrent plus de problème qu’ils n’en résolvent ?
      Et garder simplement iFixPng, qui fait bien son boulot, dans la distribution de spip ?

      A discuter sur spip-dev ?

    Répondre à ce message

  • J’essaie d’utiliser Mediabox pour créer des diaporama simple dans un iframe. Je créé un article, y télécharge les images, les déplace dans le portfolio mais ensuite les image s’ouvrent dans le navigateur (FF3.6.8) sans diapo, sans iframe, comme avant...
    Où est ce que je place les codes : <a href= etc ?

    Merci

    Répondre à ce message

  • Philippe G.

    Juste une question connexe : pourquoi ce plugin (qui marche très bien) n’est-il pas disponible dans les mises à jour automatiques du couteau suisse ?

    Répondre à ce message

  • 1

    Bonjour,

    Je n’arrive pas non plus à faire fonctionner le diaporama (le bouton diaporama n’apparait pas sur la fenêtre popup) ; Je n’ai pas changé l’appel CSS par défaut du plugin.

    Mes diaporamas sont stylés avec :
    .documents documents_portfolio
    a .cboxElement hasbox

    si quelqu’un a une idée..merci
    dd

    • Il me semble que la valeur par défaut de « En galerie » est #documents_portfolio (donc cible un conteneur ayant pour id « documents_portfolio » et non .documents_portfolio (cible un conteneur ayant une classe « documents_portfolio »).

      A changer dans la config de mediabox donc, ou ajouter un id=« documents_portfolio » dans ton squelette diapo

    Répondre à ce message

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.

Qui êtes-vous ?
[Se connecter]

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