MediaBox

cible des éléments qui déclencheront la boîte

<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>
<a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>
<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>
$("a.mediabox").mediabox(options);
$.fn.mediabox(options);
$("a[rel='example']").mediabox({title: function(){
    var url = $(this).attr('href');
    return '<a href="'+url+'" target="_blank">Ouvrir dans une nouvelle fenêtre</a>';
}});
$.modalboxload(href,options);
<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>
$.modalboxclose();
<pipeline nom="mediabox_config" inclure="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;
}
<a href="IMG/jpg/capture_d_ecran_2022-05-10_a_22.08_54.jpg" class="spip_doc_lien mediabox" type="image/jpeg">
		<img src="IMG/jpg/capture_d_ecran_2022-05-10_a_22.08_54.jpg" width="994" height="764" alt=""></a>
<a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>
<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>
<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>
[(#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>
/*]]>*/</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>
[(#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>
<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>
function ouvrir_modal(adresse) {
$.fn.mediabox({ href:adresse, minHeight:'75%', });
} 
#BOUTON_ACTION{MonAction, #URL_ACTION_AUTEUR{mon_action,#ID_TRUC,#SELF}, ajax, &#234;tes-vous s&#251;r ?}
<script type="text/javascript">
$(function(){jQuery('.hasbox').first().trigger('click');})
</script>
<script type="text/javascript">
$(function(){jQuery('.hasbox').eq(2).trigger('click');})
</script>
[<div class="#EDIT{texte}">
                (#TEXTE|image_reduire{400})
</div>]
 <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>
<B_documents_portfolio>
<div class="bloc clearfix" id="documents_portfolio">
	<h2><:medias:info_portfolio:></h2>
		<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>[
		<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})"]>
			 <figure class="snip0019">
			[(#FICHIER
			|image_passe_partout{300,300}
			|image_recadre{300,300}
			|inserer_attribut{class,spip_logos}
			|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]
			<figcaption>
		<div><h2>[(#TITRE|textebrut)]</h2></div>
		<div>#DESCRIPTIF</div>
						</figcaption>			
</figure>
		</a>
		]</BOUCLE_documents_portfolio>
</div>
<button type="button" id="cboxPrevious">
<button type="button" id="cboxNext">
<button type="button" id="cboxSlideshow">
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity=90);}
$.fn.mediabox({href: 'http://....'});
$.modalboxload('http://....');
$.fn.mediabox({href: 'http://www.clubic.com'});
$.modalboxload('http://www.clubic.com/');
curl -i  url_distante
<a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]"
	rel="nofollow" target="_blank"
	onclick="if (jQuery.modalbox) ...
<BOUCLE_docs(DOCUMENTS){id_article}{vu=non}{par titre}>
[<a href="(#FICHIER)" class='mediabox' rel='galerie'>document</a><br />]
</BOUCLE_docs>   
if (settings.rel !== 'nofollow') {
	$related = $('.' + boxElement).filter(function () {
		return (this.rel === element.rel);
	});
if (settings.rel !== 'nofollow') {
	$related = $('.' + boxElement).filter(function () {
		var data = $.data(this, colorbox), relRelated;
					if (data) {
						relRelated =  $(this).data('rel') || data.rel ||this.rel;
					}
					return (relRelated === settings.rel);
		});
if (settings.rel !== 'nofollow') {
     $related = $('.' + boxElement).filter(function () {
		return (this.rel === element.rel);
      });
<dl class='spip_document_5245 spip_documents spip_documents_left'style='float:left;'>
	<dt><a href="IMG/jpg/mon_jpeg.jpg"

		title='titre'
		rel='article765'
		type="image/jpeg"
	     >
	     <img src='local/cache-vignettes/L200xH200/mon_jpeg-adc08.jpg' width='200' height='200' alt='JPEG - 106.8&#160;ko' />
	     </a>
	</dt>
<dl class='spip_document_#ID_DOCUMENT spip_documents[ align(#ENV{align})][ (#ENV{class})] spip_lien_ok'>
<dt>[<a href="(#GET{url})"[
	class="(#ENV{lien_class})"] [title="(#TITRE|texte_backend)"]
[(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' />[(#GET{url}|?{</a>})]</dt>[
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
</dl>
<BOUCLE_srub(ARTICLES){id_rubrique}>
<div class="colonne col-md-4">
<BOUCLE_medias(DOCUMENTS){tout}{id_article}{!par date}>
[(#COMPTEUR_BOUCLE|=={1}?{
<a class="liengalerie#ID_ARTICLE" href="#URL_DOCUMENT" rel="article[(#_srub:ID_ARTICLE)]" [title="(#TITRE)"]>
[(#LOGO_DOCUMENT|image_passe_partout{500}|image_recadre{500,300,center,000000}|inserer_attribut{alt, #TITRE}|inserer_attribut{class,img-thumbnail})]
</a>,
<a class="liengalerie#ID_ARTICLE invisible" href="#URL_DOCUMENT" rel="article[(#_srub:ID_ARTICLE)]" [title="(#TITRE)"]></a>
})]
</BOUCLE_medias>

[<h3 class="titliste"><a class="liengalerie#ID_ARTICLE">(#TITRE)</a></h3>]
</div>
<script type="text/javascript">$('.liengalerie#ID_ARTICLE').mediabox();</script>
</BOUCLE_srub>
// InstaFeed
var userFeed = new Instafeed({
	get: 'user',
	userId: 'XXX',
	clientId: 'XXX',
	accessToken: 'XXX.XXX.XXX',
	resolution: 'standard_resolution',
	template: '<div class="swiper-slide" style="background-image:url({{image}});"><a href="{{link}}" class="mediabox boxIframe boxWidth-700px boxHeight-600px instafeed-inner"><div class="wrapper-center"><span class="likes">{{likes}}</span><span class="comments">{{comments}}</span></div></a></div>',
	sortBy: 'most-recent',
	limit: 20,
	links: false,
	after: function () {	
	}
});
userFeed.run();
<script>
       /* Colorbox resize function */
       var resizeTimer;
       function resizeColorBox(){
           if (resizeTimer) clearTimeout(resizeTimer);
           resizeTimer = setTimeout(function() {
                   if (jQuery('#cboxOverlay').is(':visible')) {
                           jQuery.colorbox.load(true);
                   }
           }, 300)
       }

       // Resize Colorbox when resizing window or changing mobile device orientation
       jQuery(window).resize(resizeColorBox);
       window.addEventListener("orientationchange", resizeColorBox, false);
       </script> 
jQuery(document).ready(function(){
  jQuery("#cboxOverlay").colorbox({
    inline:true,
    maxWidth: "90%",
    maxHeight: "90%",
    onComplete : function() {
        jQuery(this).colorbox.resize();
    }
    });

    // resize colorbox on screen rotate in mobile devices and set to cover 90% of screen
    jQuery(window).resize(function() {
        jQuery.colorbox.resize({width:"90%", height:"90%"});
    });
});
#SET{reg1, "(<img src=')"}
#SET{reg2, "(' width='1200' height='800' />)"}
[(#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}})]})]
[(#GET{image_apres_traitement})]
[(#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})]})]
<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>
<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>
<div  style="display:none">
<BOUCLE_doc_caches(DOCUMENTS) {id_article}{doublons}{tout}>
[<a href="(#URL_DOCUMENT)" type="#MIME_TYPE"></a>]
</BOUCLE_doc_caches>
</div>
$('#cboxLoadingGraphic').show(); 
#cboxLoadingGraphic { height: 100% } 
#cboxLoadingGraphic { height: 100% } 
<docN|center>
<docN|"avec center ou left, ou right">
    La désactivation du plugin « MediaBox » (version : 0.8.5) ne s’est pas correctement déroulée
    L’activation du plugin « MediaBox » (version : 0.8.11) s’est correctement déroulée
MediaBox
0.8.5 - stable
version obsolète
Impossible de désactiver ou de désinstaller ce plugin. 
<B_documents_portfolio>
<div class="liste documents documents_portfolio">
	<h2 class="h2"><:medias:info_portfolio:></h2>
	<BOUCLE_documents_portfolio(DOCUMENTS) {id_article?}{id_rubrique?}{objet?}{id_objet?} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{vu=non}{doublons}>[
	<a class="mediabox" href="(#URL_DOCUMENT)"
		 type="#MIME_TYPE"
		 rel="documents_portfolio[-a(#ID_ARTICLE)][-r(#ID_RUBRIQUE)]"
	[ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
		|image_reduire{240,240}
		|inserer_attribut{class,spip_logos}
		|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a>
	]</BOUCLE_documents_portfolio>
</div>
</B_documents_portfolio>
<body class="pas_surlignable page_sommaire" 
onload="if (jQuery.modalbox) 
{jQuery.modalbox('[(#URL_PAGE{popup}
|parametre_url{url,#SELF}
|parametre_url{var_zajax,contenu})]',{iframe:true,width:'600px',height:'600px',trans:'elastic',speed:'200'});
return  false;}">
function liens_parent($texte) {
   return preg_replace(array("<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O2EoLispJmd0OzwvY29kZT4="></span>siU","<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+KGNsYXNzPVwnc3BpcF9vdXRcJyk8L2NvZGU+"></span>siU"), array("<a $1 target='_top' onclick='parent.$.fn.colorbox.close();'>", ""),$texte);
}
// poser le cookie au callback de la box chargee
   var set_cookie = function() {
      $.cookie("modalsplash", box_settings.splash_url, { expires: 7 });
      }
<a href="#TB_inline?height=300&width=300&inlineId=monContenu" title="Description" class="mediabox">Description</a>

     $.fn.mediabox({href:"squelettes/demo.html", open:true});

</script>
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>
...
</BOUCLE_documents_portfolio>
#documents_portfolio a[type='image/jpeg'],#documents_portfolio a[type='image/png'],#documents_portfolio a[type='image/gif']
#colorbox, #colorbox * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#colorbox img { height: inherit; }

#colorbox {overflow: visible;}
<a href="http://mondomaine.com" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Ouvrir</a>
<dl>

  <dd class="logo">

    <!-- le 1er lien vers la 1ere image -->
    <a href="IMG/jpg/-1-2.jpg" 
      class="mediabox" 
      rel="galerie_924"><img src="IMG/jpg/-1-2.jpg"></a>

    <!-- les 3 liens vers les 3 autres images du diaporama -->
    <div><a href="IMG/jpg/-2.jpg" 
      class="mediabox" 
      rel="galerie_924"></a></div>
    <div><a href="IMG/jpg/-3.jpg" 
      class="mediabox" 
      rel="galerie_924"></a></div>
    <div><a href="IMG/jpg/-4.jpg" 
      class="mediabox" 
      rel="galerie_924"></a></div>

  </dd>

  <dd class="texte">
    <dl>

      <!-- le lien vers le diaporama sur le titre -->
      <dd class="gauche titre"><a href="IMG/jpg/-1-2.jpg" 
        class="mediabox" 
        rel="galerie_924">Desgrandchamps</a></dd>
      <dd class="droite">Annecy</dd>

    </dl>

    <!-- le lien vares le diaporama sur les auteurs -->
    <a href="IMG/jpg/-1-2.jpg" 
      class="mediabox" 
      rel="galerie_924">Par Park Eunju, Artpress</a>

  </dd>

</dl>
...
              <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})][(#DESCRIPTIF|attribut_html)]">[(#FICHIER
                        |image_passe_partout{90,90}
                        |image_recadre{90,90}
                        |inserer_attribut{class,spip_logos}
                        |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})][ (#DESCRIPTIF|attribut_html)]})]        
   ... 
[(#REM) Documents lies au mot-cle ]
<B_img>
<div class="menu menu_articles">
<h2>Documents</h2>
   <ul class="planche">
   <BOUCLE_img(DOCUMENTS spip_mots_liens){id_mot}{objet=document}{par date}>	
       <li>										
       [<a href="#URL_DOCUMENT" title="#TITRE" alt="#DESCRIPTIF" class="mediabox">
       (#FICHIER
       |image_reduire{150,150}
       |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})][(#DESCRIPTIF|attribut_html)]})</a>]
       </li>
   </BOUCLE_img>
   </ul>
 </div>
</B_img>

<abbr title="<:info_document:> #TYPE_DOCUMENT" class="ext">

<abbr title="#TITRE" class="ext">
* {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
#colorbox, #colorbox div {
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  box-sizing:content-box;
}
<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>
$("#documents_portfolio a").colorbox({title: function(){
return "<h1>"+$(this).attr('title')+"</h1>"+$(this).attr('alt');
}});
$("#documents_portfolio a").colorbox({title: function(){
return "<h1>"+$(this).attr('title')+"</h1>"+$(this).attr('alt');
}});
[<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>]
function ModifierLargeur(largeur,duration){
  $("#colorbox, #cboxWrapper, #cboxTopCenter, #cboxContent, #cboxLoadedContent, #cboxBottomCenter").each(function (){
    if($(this).attr("id")=="colorbox"){
      $(this).animate({
        width:"+="+largeur+"px",
        left:"-="+(largeur/2)+"px"
      },duration);
    }else{
      $(this).animate({
        width:"+="+largeur+"px"
      },duration);
    }
  });
}
<BOUCLE_doc(DOCUMENTS){id_article}><a href="#URL_ARTICLE" class='mediabox boxIframe' rel="mesimages">[(#LOGO_DOCUMENT|#URL_DOCUMENT)]</a></BOUCLE_doc>
<BOUCLE_doc(DOCUMENTS){id_article}>
<a href="#URL_DOCUMENT" class='mediabox' 'boxIframe' rel="mesimages">[(#LOGO_DOCUMENT)]</a>
</BOUCLE_doc>
<BOUCLE_doc(DOCUMENTS){id_article} {id_document!=3} >
<a href="#URL_DOCUMENT" class='mediabox' 'boxIframe' rel="mesimages">[(#LOGO_DOCUMENT)]</a>
<a href="#URL_DOCUMENT" class='droite' rel='droite' [ title="(#DESCRIPTIF|couper{120})"]><:lire_la_suite:></a>
<BOUCLE_doc(DOCUMENTS) {id_article}  {doublons} >
<a data-groupid="#ID_ARTICLE" class="galerie#ID_ARTICLE" rel="galerie#ID_ARTICLE" href="#URL_DOCUMENT" title="[(#DESCRIPTIF|couper{120})]">Voir les photos</a>
</BOUCLE_doc>
$('.droite_content a').each(function(){
  var group_id = $(this).data('groupid');
  var group_class = '.galerie' + group_id;
  $(group_class + ":gt(0)").hide(); 

	$(group_class).mediabox({
	rel:group_class,
	transition:"elastic",
	opacity:"0.75",
	slideshow:true,
	preloading:true,
	speed: 1000
});
});
<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) mediabox"][ title="(#TITRE|attribut_html|couper{80})"]>
<a class="mediabox" href="???">[(#LOGO_ARTICLE)]</a>
<a href="#" rel="nofollow" target="_blank" onclick='if (jQuery.colorbox) { jQuery.colorbox({html:"<p>Voila du texte<p>"});return false;}' >Un lien</a>
<a href="#" rel="nofollow" target="_blank" onclick='if (jQuery.colorbox) { jQuery.colorbox({html:$("#mabox").html()});return false;}' >Un lien</a>

<div id="mabox" style="display:none">
  <p>Voila du texte<p>
</div>
<a href="IMG/imag_asso/grand/voyage_venise1.jpg" class="mediabox" rel="venise" title="Venise : un canal"><img src="IMG/imag_asso/voyage/voyage_venise1.jpg" width="150" height="200" /> </a>
<a href="IMG/jpg/tigre.jpg" class="mediabox" rel="exemple" title="Tigresse et son petit">  <img38|right> </a>
   <BOUCLE_portfolio(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=image}>	
				<li>

                	<div class="slideimage"><a href='#URL_DOCUMENT' rel="mediabox"  class="mediabox">[(#FICHIER|image_reduire{1000,0})]</a></div> 
<BOUCLE_liste_documents(DOCUMENTS){tout}{doublons}>
<a href="#URL_DOCUMENT" class="mediabox" rel="allimage" type="image/jpeg" title="#TITRE">[(#FICHIER|image_reduire{XX}||image_recadre{YY,ZZ,center})]</a>
</BOUCLE_liste_documents>
[(#SESSION{id_auteur}|non) | 
				<a class="couleur_bas" 
				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> ]
				<!-- class='login_modal'><:lien_connecter:></a>] -->
				[(#AUTORISER{ecrire})| 
				<a class="couleur_bas" href="#EVAL{_DIR_RESTREINT_ABS}"><:espace_prive:></a>]
[(#SESSION{id_auteur}|oui) | 
				<a class="couleur_bas" href="#URL_LOGOUT" rel="nofollow"><:icone_deconnecter:></a>] | 
	 <a href="[(#URL_PAGE{login}|parametre_url{var_zajax,contenu})];return false;" title="[(#NOM|attribut_html)]" rel="nofollow" class="mediabox boxIframe boxWidth-480px boxHeight-600px"><img src="#CHEMIN{help.png}" alt="[(#NOM|attribut_html)]"  /></a>	
<a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})];return false;" rel="nofollow" class="mediabox boxIframe boxWidth-480px boxHeight-600px"><:lien_connecter:></a>
<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>
<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,content})]');return false;}" ><:lien_connecter:></a>
<a href="#URL_PAGE{plan}" class='mediabox boxIframe'>Plan du site</a>
<a href="#URL_PAGE{plan}" class='mediabox boxIframe boxWidth-700px boxHeight-600px'>Plan du site</a>
<a href="????" class="mediabox">Ouvrir</a>
<div id="mediaboxcontent" style="display:none;"> mon code html </div>
.colorbox(jQuery.extend({}, options, {rel:'galerieauto',slideshow:true,slideshowAuto:false}))
.colorbox(jQuery.extend({}, options, {rel:'',slideshow:true,slideshowAuto:false}))
<a class="small_plus" 
href="spip.php?page=evenement&amp;id_evenement=#ID_EVENEMENT" 
rel="nofollow" target="_blank" 
onclick="if (jQuery.modalbox) {jQuery.modalbox('spip.php?page=inc-evenement&amp;id_evenement=#ID_EVENEMENT');return false;}" 
title="#TITRE">#TITRE</a>
<div class="ajax">
[(#FORMULAIRE_LOGIN{#ENV{url}|sinon{#URL_ECRIRE{accueil}}})]
</div>
<BOUCLE_video_vignette(DOCUMENTS){id_article}{doublons}{extension IN swf,flash,flv,mov,avi,rar}{par date}>
	<a href="[(#URL_DOCUMENT)]" type="#MIME_TYPE" class="mediabox">[(#LOGO_DOCUMENT||image_reduire{160,0}|image_recadre{140,82})]</a>              
 </BOUCLE_video_vignette>
<a href="#URL_PAGE{video}" class="mediabox>
<a href="IMG/IMG_4230.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 1</a>
<a href="IMG/IMG_4237.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 2</a>
<a href="IMG/IMG_4253.jpg" class='mediabox' rel="mesimages">Voir la belle image N° 3</a>
[<imgXX|left>->imgXX]
<p>
<span class="spip_document_4 spip_documents spip_documents_left" style="float: left; width: 566px;">
<a class="spip_in" href="IMG/gif/xyz.gif">
<img width="566" height="480" title="mon titre" alt="descritptif" src="IMG/gif/xyz.gif"/>
</a>
</span>
</p>
jQuery('document').ready(function() {
ici code pour lancer la mediabox
});
<script type="text/javascript">
	$(document).ready(function() {
		$.fn.colorbox({href:"thankyou.html", open:true});
	});
</script>
<a href="spip.php?articleXX" class="mediabox boxIframe"> Lien </a>
<a href="spip.php?articleXX" class="boxIframe"> Lien </a>
<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>
title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'
[ title="(#TITRE|texte_backend)"]
<a href="#URL_PAGE{contact}" class='mediabox boxIframe'>Contact</a>
<a href="http://www.google.fr" class='mediabox boxIframe'>Google</a>
<a href="http://www.google.fr" class='mediabox boxIframe boxWidth-800px boxHeight-600px'>Google</a>
boxWidth-#ENV{largeur,800}px boxHeight-#ENV{hauteur,600}px
<docXX|center>
<imgXX|center|mediabox>
spip_documents a
#documents_portfolio a[type='image/jpeg'],#documents_portfolio a[type='image/png'],#documents_portfolio a[type='image/gif'],.spip_documents a
<imgXXX|center>
title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' et 
alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'
<a href='.../monpdf.pdf' class='mediabox boxIframe boxWidth-1000px boxHeight-600px'>Ouvrir dans une mediabox</a>
<a href='IMG/pdf/NOM_DU_PDF.pdf'
class='mediabox boxIframe boxWidth-1000px boxHeight-650px'>Ouvrir un pdf dans une
mediabox</a>

MediaBox

Sommaire

Avertissement

Aperçu

Configuration

Utilisation simple

Utilisation avancée en javascript

API modalbox

Pipelines

Discussion

Discussions par date d’activité

Ajouter un commentaire