MediaBox

Published : 10 May 2010 – updated on 12 January 2026 – by Cerdic – 605 commentaires

Español, français
1
2
3
4
5
121 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, ce qui est fortement déconseillé.

Aperçu

La MediaBox est une Boîte multimédia polyvalente et personnalisable. Le plugin est basé sur la librairie moderne lity enrichie et adaptée pour SPIP. [2]

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 :

Paramétrage des dimensions
Il est possible de préciser les dimensions de la boîte au cas par cas.

  • Dans les anciennes version de SPIP, il fallait ajouter une classe CSS au lien concerné, par exemple : boxWidth-200px pour fixer la largeur à 200px, boxHeight-300px pour fixer la hauteur à 300px.
    Remarquez que le nom de la classe intègre la valeur souhaitée, exprimée dans une unité CSS valide : px, em, pt... Cas particulier, les ’%’ sont notés pc (le caractère ’%’ n’étant pas autorisé pour les noms de classe).

Exemple :

<a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>
  • Depuis SPIP.4.1 il ne faut plus utiliser les pseudo-classes CSS décrites ci dessus, mais les attributs data-box-(max|min)-(width|height) et data-box-(width|height) sur les liens mediabox.

Exemple :

<a href="#URL_PAGE{plan}" class="mediabox boxIframe" data-box-width="700px" data-box-height="600px">Plan du site</a>

Autres attributs

À ces attributs de dimensionnement s’ajoutent quelques autres attributs :

  • data-box-caption-state, valant min ou expanded pour indiquer si une légende longue est affichée en résumé ou en intégralité.
  • data-box-sidebar : valant end, start, top ou bottom pour que la box s’affiche en tant que “sidebar”
  • data-box-class : décrivant la classe associée à la box
  • data-box-ajaxreload-on-close : (depuis SPIP 4.4.6 avec mediabox 4.0.0) liste des blocs ajax qui doivent être rechargés à la fermeture de la modale. Cette liste comprend soit des identifants d’inclusion ajax, soit des sélecteurs CSS, séparés par des virgules.
    Exemple :
    <a href="xxx" class="popin" data-box-ajaxreload-on-close="navigation,.liste-objets.articles">
  • data-box-type : indique de quelle manière la box est ouverte et quel type de contenu elle présente. Les valeurs possibles sont ’iframe’ (par défaut), ’ajax’, ’inline’, ’image’ ou ’html’.
    Exemples :
    -  <a href="#URL_DOCUMENT{1}" data-box-type="ajax">hop</a> ou <a href="#URL_PAGE{pop}" data-box-type="ajax">hop</a> ouvre une box ajax contenant le document 1 seul, ou la page pop.
    -  <a href="#URL_ARTICLE{1}" data-box-type="iframe">hoho</a> ouvre la box contenant la page entière avec ses tags <html>, <head> et <body> etc, et définissant donc les styles et scripts nécessaires à son bon affichage.
    -  <a href="#inlinebox" data-box-type="inline">héhé</a> (Suite à #4890) ouvre une box contenant le composant HTML dont l’id est inlinebox. Ce composant doit déjà figurer dans le HTML de la page courante et porter la classe .mediabox-hide (qui, avant le clic, lui confére le style display: none).
  • data-var_zajax : pour transmettre var_zajax et ne charger qu’un morceau de la page.
    Par exemple (cas le plus courant) : data-var_zajax="content" (cf Zpip, blocs de page et Ajax)

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
  • className : (chaîne) classe CSS appliquée à la fenêtre modale
  • 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
  • ajaxReloadOnClose : (chaîne) (depuis SPIP 4.4.6 avec mediabox 4.0.0) Blocs ajax à recharger à la fermeture, identifiants d’inclusion ou sélecteurs CSS séparés par des virgules.
  • sideBar : (chaîne) position de la fenêtre modale à l’écran, chaîne valant end, start, top ou bottom

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

$.modalbox(href,options);

À la place de modalbox, on peut aussi utiliser son alias modalboxload : ces 2 fonctions sont absolument équivalentes.

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

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

Footnotes

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

[2] Dans les versions précédentes de la mediabox, c’était la librairie ColorBox qui était utilisée.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

230 discussions

  • 1
    Karen

    Bonjour,

    Sur un SPIP 4.0.5 brut et sans aucun plugin activé, je cherche à utiliser la mediabox pour afficher un article précis en modal à partir de sommaire.html, sur le modèle suivant expliqué dans cette documentation :

    <a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>

    en l’adaptant ainsi :

    <BOUCLE_modal(ARTICLES) {id_rubrique=1} {!par date}>
	<a href="#URL_ARTICLE" class="mediabox boxIframe boxWidth-300px boxHeight-900px">Ouvrir la popin</a>
</BOUCLE_modal>

    Ça fonctionne, mais la taille n’est pas prise en compte, ni sur l’exemple suivi à la lettre, ni sur mon adaptation, et je ne comprends pas pourquoi.

    En réalité, j’ai mis des valeurs caricaturales mais idéalement, le cherche plutôt du 90pc (%) en hauteur et largeur, voire, le moyen de l’adapter en responsive. Mais avec ou sans taille demandée, rien ne change, la hauteur déborde en bas en mode grand écran, et sinon, reste très horizontale, même sur un format aux proportions mobile.

    Est-ce que quelqu’un peut m’aider à adapter la taille attendue pour l’affichage d’un article, sans toucher aux galeries d’images ?

    Cordialement,

    • Karen

      En fait j’ai également tenté d’insérer le JS en exemple dans cette documentation :

      <BOUCLE_modale(ARTICLES) {id_rubrique=1} {!par date}>
<a href="[(#URL_ARTICLE|parametre_url{url,#SELF})]"
        rel="nofollow" 
        onclick="if (jQuery.modalbox) {jQuery.modalbox('[(#URL_ARTICLE|parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]');return false;}" >Test de modale</a>
</BOUCLE_modale>

      Cette fois c’est top, car j’ai une taille plus adaptée (même si je ne saurais pas comment la modifier !)
      Mais le problème c’est que ça ne s’ouvre qu’une fois dans la boite modale, et si on clique à nouveau sur le lien, ça charge la page en entier, pas dans la modale. Or j’aimerais que ça s’ouvre toujours dans la modale (dès lors qu’on dispose de javascript bien sûr).

      Je ne sais pas comment faire, je ne pratique que le html / css et pas le js ni php.
      D’avance merci aux tuyaux que vous pourrez me donner pour y arriver.
      Cordialement

    Reply to this message

  • 5
    mossad

    Bonjour,

    J’ai des contenues en images et en vidéo. Mais pour afficher les vidéos, cela semble impossible ? Ou est-ce qu’il y a des options supplémentaires ?

    Merci

    • Manu

      Cette question m’intéresse également. Avez-vous pu résoudre cette difficulté ?

    • mossad

      J’ai finalement utilisé le plugin colorbox qui est déjà utilisé par Mediabox. Pas besoin d’inclure le javascript.
      Par exemple

      $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409, width:'80%', height:'80%'});

    • Manu

      Merci de la réponse.
      Aïe, ouille, il me manque un bout de compréhension... Quel est le code du squelette contenant l’appel/l’intégration de la vidéo ?

    • mossad

      Je ne sais pas s’il y a d’autres solutions. Mais, j’ai utilisé seulement du javascript. En partant de ces exemples https://github.com/jackmoore/colorbox

    • Manu

      Ah, parfait ! Merci beaucoup

    Reply to this message

  • 5
    Christophe Noisette

    Bonjour,
    j’ai un site qui utilise le modèle splickrbox...
    Voici le code

    [(#REM) Parametres du modele:
            - align : alignement
            - colonne : nombre de colonnes de la box, defaut 3
            - taille : nombre de vignettes de la box (un multiple de colonne, degaut 12)
            - masque : fichier .png definissant le masque de la grande vignette, defaut carre-100.png (2x la taille des petites vignettes). Ce parametre permet de jouer sur la taille de la box
            - tri : critere de classement comme date, hasard..., defaut date
            - senstri : 0 ou 1 pour inverser le sens de classement, defaut inverse
]
#SET{reduire, #ENV{reduire, 100}}
#SET{masque, #ENV{masque, (#CHEMIN{masque.png}|appliquer_filtre{image_smush_debrayer,force=true}|image_passe_partout{#GET{reduire},#GET{reduire}}|image_recadre{#GET{reduire},#GET{reduire},center}|image_aplatir{png}|appliquer_filtre{image_smush_embrayer,force=true}|extraire_attribut{src})}}
<B_flickr>
    <div style="position:relative;" class="splickrbox [splickrbox_(#ENV{align})]">
        <table cellpadding="0" cellspacing="0" ><tr>
<BOUCLE_flickr(DOCUMENTS){par rang_lien, num titre}{inverse #ENV{senstri, 0}}{extension==jpg|png|gif}{0,#ENV{taille,12}}{id_article?}{id_rubrique?}>
            <td><a href="[(#FICHIER)]" class='mediabox'  [title="(#TITRE|supprimer_tags|attribut_html)"]> 
[(#FICHIER|copie_locale|appliquer_filtre{image_smush_debrayer,force=true}|image_masque{#GET{masque}}|appliquer_filtre{image_smush_embrayer,force=true}|image_aplatir{jpg}|inserer_attribut{alt,[(#TITRE|supprimer_tags|attribut_html)]})]</a></td>
            [(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,3},</tr><tr>})] 
</BOUCLE_flickr>
            <td></td>
	</tr></table>
    </div>
</B_flickr>

    J’ai ajouté la class “mediabox” sur l’ouverture des photos pour avoir les flèches avant et après... Mais ca ne marche pas. J’ai bien une image qui s’ouvre quand je clique sur la vignette carrée mais elle apparaît sans les flèches.
    Voici un exemple : https://lairederien.net/887-leonard-salle-et-ses-projections-analogiques

    Je pense qu’il doit y avoir un conflit entre différentes class mais je ne vois pas où.

    En fait je ne suis pas bloqué sur mediabox. S’il existe une autre façon d’avoir les flèches avant et après en cliquant sur une vignette, je suis preneur.

    bonne journée
    Christophe

    • Christophe Noisette

      Bonjour
      je viens de voir que

      /*]]>*/</script><script type="text/javascript">/* <![CDATA[ */
var box_settings = {tt_img:true,sel_g:"#documents_portfolio a[type='image/jpeg'],#documents_portfolio a[type='image/png'],#documents_portfolio a[type='image/gif']",sel_c:".mediabox",trans:"fade",speed:"200",ssSpeed:"2500",maxW:"90%",maxH:"90%",minW:"400px",minH:"",opa:"0.9",str_ssStart:"Diaporama",str_ssStop:"Arrêter",str_cur:"{current}/{total}",str_prev:"Précédent",str_next:"Suivant",str_close:"Fermer",splash_url:""};
var box_settings_splash_width = "600px";
var box_settings_splash_height = "90%";
var box_settings_iframe = true;
/* ]]> */</script>

      Ce qui signifie si je comprends bien que les éléments du plugin mediabox ne sont pas pris en compte dans la page... ce qui expliquerait que l’affichage avec la class mediabox ne donne rien...
      Une idée?
      Merci encore et bonne journée
      Christophe

    • Christophe Noisette

      Je n’ai toujours pas réussi à résoudre ce problème et je désespère.. en espérant que l’un.e d’entre vous aura une solution pour ce souci. Belle journée. C.

    • Frank

      Bonjour,

      Pour activer la navigation avec les flèches avant et après, il me semble qu’il faut que tu constitues une galerie en associant les liens entre eux grâce à l’ajout d’un attribut rel commun, par exemple rel=“magalerie”

      donc dans ton exemple :

      [(#REM) Parametres du modele:
            - align : alignement
            - colonne : nombre de colonnes de la box, defaut 3
            - taille : nombre de vignettes de la box (un multiple de colonne, degaut 12)
            - masque : fichier .png definissant le masque de la grande vignette, defaut carre-100.png (2x la taille des petites vignettes). Ce parametre permet de jouer sur la taille de la box
            - tri : critere de classement comme date, hasard..., defaut date
            - senstri : 0 ou 1 pour inverser le sens de classement, defaut inverse
]
#SET{reduire, #ENV{reduire, 100}}
#SET{masque, #ENV{masque, (#CHEMIN{masque.png}|appliquer_filtre{image_smush_debrayer,force=true}|image_passe_partout{#GET{reduire},#GET{reduire}}|image_recadre{#GET{reduire},#GET{reduire},center}|image_aplatir{png}|appliquer_filtre{image_smush_embrayer,force=true}|extraire_attribut{src})}}
<B_flickr>
    <div style="position:relative;" class="splickrbox [splickrbox_(#ENV{align})]">
        <table cellpadding="0" cellspacing="0" ><tr>
<BOUCLE_flickr(DOCUMENTS){par rang_lien, num titre}{inverse #ENV{senstri, 0}}{extension==jpg|png|gif}{0,#ENV{taille,12}}{id_article?}{id_rubrique?}>
            <td><a href="[(#FICHIER)]" class='mediabox'  [title="(#TITRE|supprimer_tags|attribut_html)"] rel="magalerie"> 
[(#FICHIER|copie_locale|appliquer_filtre{image_smush_debrayer,force=true}|image_masque{#GET{masque}}|appliquer_filtre{image_smush_embrayer,force=true}|image_aplatir{jpg}|inserer_attribut{alt,[(#TITRE|supprimer_tags|attribut_html)]})]</a></td>
            [(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,3},</tr><tr>})] 
</BOUCLE_flickr>
            <td></td>
	</tr></table>
    </div>
</B_flickr>
    • Christophe Noisette

      Bonjour, j’ai donc ajouté ce petit bout de code mais cela n’a rien changé...
      Je crois que la class .mediabox est annulée par autre chose, genre un plugin...
      Je continue de chercher mais ca me désespère...
      Christophe

    • Christophe Noisette

      Désolé j’avais mis rel=magalerie à une mauvaise place et donc en corrigeant cela, les flèches sont apparues. Un grand et immense merci.
      Christophe

    Reply to this message

  • 1
    beno

    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

    • Rp

      Avez vous trouver une solution pour ajouter le crayon à mediabox. J’ai besoin de cela moi aussi et je ne trouve pas d’infos.merci

    Reply to this message

  • robomatix

    Bonjour,

    J’ai essayé ces deux liens :

    <a href="http://www.youtube.com/embed/7g02s7EKybE" class="mediabox "><img src="https://img.youtube.com/vi/7g02s7EKybE/sddefault.jpg"></a>
<a href="https://www.youtube.com/watch?v=7g02s7EKybE" class="mediabox "><img src="https://img.youtube.com/vi/7g02s7EKybE/sddefault.jpg"></a>

    J’obtiens : Mediabox : Access to XMLHttpRequest at ’https://xxxx’ has been blocked by CORS policy: No ’Access-Control-Allow-Origin’ header is present on the requested resource.
    Est ce que quelqu’un sait pourquoi et comment y remédier ?

    Merci.

    Gilles L.

    Reply to this message

  • Phil

    Bonjour,
    J’ai un problème avec les #bouton_action dans la mediabox et les messages de confirmation

    J’ai une page dans l’espace publique que j’appelle dans une modalbox par ce script:

    function ouvrir_modal(adresse) {
$.fn.mediabox({ href:adresse, minHeight:'75%', });
}

    à l’intérieur de cette page, j’ai des #boutons_action associés à différentes occurrences d’un objet.

    #BOUTON_ACTION{MonAction, #URL_ACTION_AUTEUR{mon_action,#ID_TRUC,#SELF}, ajax, &#234;tes-vous s&#251;r ?}

    Le message de confirmation n’apparaît pas dans la modalbox
    ... mais il est présent si la page est appelée directement.

    Je sèche sur ce problème. Auriez-vous une idée?
    Merci

    Reply to this message

  • 4
    Christophe B

    Bonjour,
    Je cherche comment afficher directement la mediabox du portfolio au chargement d’un article.
    Et éventuellement que la mediabox pointe directement une image précise.
    Pouvez-vous m’aider à lancer cela en javascript, je ne vois pas comment passer les paramètres.
    $(“a.mediabox”).mediabox(options);
    ou $.fn.mediabox(options);
    Merci d’avance de votre aide,
    ChB.

    • Christophe B

      Dans le fichier jquery.colorbox.js, dans le dossier plugins-dist/mediabox/javascript, il y a un paramètre ’open’ à ’false’ (vers la ligne 47), en le passant à ’true’, la galerie s’ouvre automatiquement au chargement de la page.

      Maintenant si qqun peut me dire la commande pour changer proprement cette propriété d’un squelette à l’autre à partir du squelette, ce serait sympa ;-)

      Merci, ;-)

      Comme dit plus haut, n’hésitez pas à visiter la page de l’auteur de colorbox ça aide.

      (y) Cool ce plugin bravo !

    • placido

      Bonjour,

      Si les images du portfolio correspondent bien à la sélection du mode galerie (cf: la page de configuration du plugin), alors la mediabox y est déjà assignée ; il suffit alors de simuler un clic pour la lancer.

      En rajoutant cette ligne dans le <head/> de l’article en question.

      <script type="text/javascript">
$(function(){jQuery('.hasbox').first().trigger('click');})
</script>
    • Christophe B

      Merci beaucoup Placido. (y)
      En regardant le script, j’avais bien compris la technique à mettre en place, mais je n’arrivais pas à trouver la bonne syntaxe pour passer ce clic.

      Ma dernière question serait de savoir comment passer en paramètre la vignette souhaitée ;-)

    • Christophe B

      Bon trop simple :
      Pour ouvrir la 3ème image, il suffit de remplacer .first() par .eq(2)

      <script type="text/javascript">
$(function(){jQuery('.hasbox').eq(2).trigger('click');})
</script>

      Merci encore Placido (y)

    Reply to this message

  • 2
    Jean Christophe Villeneuve

    Bonjour

    Avec spip 3.2.5
    Dans mes articles, j’affiche mes images avec

    [<div class="#EDIT{texte}">
                (#TEXTE|image_reduire{400})
</div>]

    J’ai bien coché “oui” pour “Insérer une boîte sur toutes les images ?” dans la config de la mediabox mais rien ne se passe au clic sur l’image.

    Comment obtenir une image dans la mediabox ?

    Reply to this message

  • 3
    Fennec72

    Bonsoir,

    Sur certains sites, le formulaire de recherche est réduit à une simple icône (loupe) et apparait quand on survol l’icône ou qu’on clique dessus.

    C’est particulièrement utile quand on manque de place, particulièrement sur mobile.

    Est-il possible d’utiliser Mediabox pour cela et, si oui, comment?

    Merci d’avance,

    Cordialement,

    Hervé

    • baloo

      Bonjour,
      même pb
      1- Pour ouvrir une page recherche dans une mediabox ...avec formulaire et résultats dans la page :

       <a   href ="#URL_PAGE{rechercher}"  class='mediabox ' title="Rechercher"> > 
	<i class="fa fa-search ms_fa msearch-toggle cl" aria-hidden="true"   ></i>	--> pour la loupe	</a>

      la page est bien dans la box, les resultats aussi mais ... cela ne fonctionne pas ... les liens vers les articles trouvés envois l’article dans la box et non en pleine page ...
      2- ouvrir le formulaire dans la box directement ... même pb

      Je ne trouve pas la solution ..

    • baloo

      En fait si je résume ce que l’on cherche c’est écrire , dans une fenêtre mediabox, des liens vers des articles qui lorsqu’on clique sur le lien ... ferme la mediabox et ouvre l’article dans une page du site ...

    • baloo

      J’ai trouvé ..

      <li><span   class="searchlien"  style="color:#000000;" onclick="parent.location.assign('#URL_ARTICLE')">#TITRE</span></li>

      avec parent.location.assign ... on va sur la page #URL_ARTICLE et non dans la mediabox
      sans oublier le style .searchlien:hover{cursor:pointer} pour avoir le curseur

    Reply to this message

  • 1
    JeanLuc

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

    • JeanLuc

      Bonjour Cerdic
      Je me permets un petit “up” pour le pb évoqué ci dessus :

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

    Reply to this message

Add a comment

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.

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