[(#LOGO_SITE_SPIP||image_reduire{300,100}) ]#NOM_SITE_SPIP #MENU_LANG
[ LICENSE ] [ | (#AUTORISER{configurer}) [ <:phpdoc:dev_docbook:> ] ]
[(#CHEMIN{images/thickbox.png}||image_reduire{150,100})] Thickbox v3
  <:phpdoc:plugin_spip:> - version [2.0.0;] |
by
Version 3 (stable) - (c) 2009 GNU GPL v3

Documentation du plugin Thickbox_v3

| Intégration à SPIP du plugin jQuery 'Thickbox 3.1' | by CODY LINDLEY

Installation

Le plugin Thickbox_v3 s'installe de la même manière que l'ensemble des plugins SPIP (article dédié sur 'spip.net').



Fonctionnement du plugin 'Thickbox' pour jQuery

Le plugin 'Thickbox', de la bibliothèque javascript 'jQuery', développé par Cody Lindley (site du plugin), offre la possibilité d'ouvrir une fenêtre javascript directement dans la page du navigateur, sans ouvrir de réelle nouvelle fenêtre.

Par exemple #THICKBOX{link,'',Fenêtre javascript,comme ceci,250,200,inline,plugin_tb}.

Cette fenêtre peut être utilisée pour présenter ce que vous voulez : un texte de la page en cours, un texte d'une page secondaire, une image, un formulaire etc.
La présentation de la thickbox se fait en utilisant les attributs du lien ouvrant, notamment :

  • attribut 'href' pour un lien ou 'alt' pour un bouton :
    l'adresse de la page qui sera chargée ainsi que les dimensions souhaitées pour la thickbox et ses options de présentation ;
  • attribut 'titre' :
    le titre apparaissant dans la thickbox ;
  • attribut 'class' :
    dès lors qu'il vaut 'thickbox', son url s'ouvrira dans une thickbox ...
  • attribut 'rel' :
    définit notamment le nom de la galerie d'images présentée dans la thickbox.



Exemples

  • Lien type :

#THICKBOX{link,#URL_SITE_SPIP/?page=texte_ajax,N'oubliez pas d'indiquer la taille de la fenetre ...,voir l'exemple,400,300}
<a 
	href="URL_VOULUE?page=page_voulue&height=300&width=400" 
	title="titre de la fenêtre" 
	class="thickbox"
>texte du lien</a>

  • Champ 'input' de formulaire (ou bouton) :

#THICKBOX{input,#URL_SITE_SPIP/?page=texte_ajax,N'oubliez pas d'indiquer la taille de la fenetre ...,ouvrir la page,400,300}
<input type="button" 
	alt="URL_VOULUE?page=page_voulue&height=300&width=400" 
	title="titre de la fenêtre" 
	class="thickbox"
	value="texte du bouton" />

  • Sur une image seule :

#THICKBOX{image,#CHEMIN{images/single.jpg},Test thickbox image,'',100,75}
<a 
	href="URL_DE_L_IMAGE" 
	title="Titre de l'image" 
	type="image/type_mime"
><img src="..." /></a>
Il n'est pas nécessaire ici de préciser la classe 'thickbox'. En effet, le plugin est programmé pour ouvrir tous les liens portant un 'type_mime' image dans une thickbox.


  • Pour une galerie d'images :

#THICKBOX{gallery,#CHEMIN{images/plant1.jpg},Test thickbox gallery} #THICKBOX{gallery,#CHEMIN{images/plant2.jpg},Test thickbox gallery} #THICKBOX{gallery,#CHEMIN{images/plant3.jpg},Test thickbox gallery}
<a 
	href="URL_DE_L_IMAGE" 
	title="Titre de l'image" 
	type="image/type_mime"
	rel="gallery-xx"
><img src="..." /></a>
Il suffit pour créer une galerie d'indiquer sur tous les liens images à intégrer dans celle-ci le même attribut 'rel'.



Quelques options

Plusieurs options sont disponibles directement via le plugin 'Thickbox' jQuery. Ces options s'utilisent en indiquant leur valeur en paramètre de l'url appelée.
Le présent plugin propose également des options, notamment la définition de valeurs par défaut pour l'ensemble des variables importantes du plugin. Ces valeurs sont éditables sur la page de configuration du plugin.

Options :

  • attribut modal=true :
    Exemple : #THICKBOX{link,#URL_SITE_SPIP/?page=texte_ajax,N'oubliez pas d'indiquer la taille de la fenetre ...,thickbox sans la barre de titre,400,300,modal}
    Dans ce cas, n'oubliez pas de mettre à disposition un bouton de fermeture de la fenêtre, le bouton par défaut n'étant pas présenté. Le bouton ajouté devra effectuer la fonction javascript : 'tb_remove()'.

  • contenu dans une frame (attributs KeepThis=true&TB_iframe=true) :
    Exemple : #THICKBOX{link,#URL_SITE_SPIP/?page=texte_frame,Contenu dans une frame : nouveau CSS,thickbox en frame,400,300,frame}
    Vous pouvez dès lors y charger une nouvelle mise en page, de nouvelles fonctions javascript etc. Cette option est cumulable avec le 'modal=true' ci-dessus.

  • update du contenu :
    Exemple : #THICKBOX{link,#URL_SITE_SPIP/?page=texte_ajax_2,N'oubliez pas d'indiquer la taille de la fenetre ...,thickbox avec rechargement en ajax,400,300}
    Il suffit pour cela d'écrire un lien thickbox dans la thickbox ...

  • ajout de l'attribut 'title' :
    Exemple : #THICKBOX{link,#URL_SITE_SPIP/?page=texte_ajax,'',lien thickbox sans 'titre=',400,300}
    Si vous n'indiquez pas d'attribut 'title' pour le lien thickbox, le titre par défaut du panel de configuration du plugin sera ajouté.

  • omission des attributs de dimension :
    Exemple : #THICKBOX{link,#URL_SITE_SPIP/?page=texte_ajax,Taille non contrôlée,lien sans dimensions}
    Si vous ne précisez pas les dimensions de la thickbox, elle s'ouvrira par défaut en adaptant sa taille au contenu. Il est conseillé, pour simplifier, d'utiliser la balise d'appel du plugin pour pallier à ce défaut.

  • attribut inlinId= :
    Exemple : #THICKBOX{link,'',Contenu du paragraphe 'test_ici',lien thickbox avec 'inlineId',400,300,inline,test_ici}
    Cette option charge dans la thickbox le contenu des paragraphes de la div de la page portant l'identifiant transmis.



Balise / Fonctions

Le plugin vous propose une nouvelle balise utilisable dans vos squelettes ou vos boucles SPIP :

la balise '# THICKBOX{...}'

Celle-ci va générer le code complet d'un lien, d'un bouton ou d'une image selon les paramètres que vous lui indiquez. Ces paramètres étant nombreux, prenez garde à les indiquer dans l'ordre préçis du code ci-dessous :
# THICKBOX{ type , url , titre , texte , width , height , option , id }
Pour indiquer une valeur vide, inscrivez simplement '' ; avec :
  • type : le type de lien thickbox souhaité ; si laissé vide, il s'agira du type 'link' :
    • link : création du code complet d'un lien ouvrant une thickbox,
    • image : création du lien et de la vignette d'une image,
    • input : création d'un bouton ouvrant sur une thickbox,
    • gallery : création du code d'une image intégrée à une galerie.

  • url : l'adresse url de l'objet à afficher dans la thickbox ; si vous n'indiquez pas une url absolue, une url renvoyant sur une page du site sera chargée (par exemple, si vous indiquez 'image.jpg', l'url renvoyée sera 'http://www.adresse_du_site.com/image.jpg') ; le point d'interrogation pour les pages SPIP est optionnel.
    NOTE : une url ouvrant une page d'un site distant devra obligatoirement être chargée dans une frame (restriction javascript).

  • titre : le texte du titre de la thickbox ; si laissé vide, le titre par défaut sera chargé ; n'oubliez pas d'indiquer des chaînes formatées javascript (asciitable.com).

  • texte : le texte sera appliqué :
    • au texte du lien lui-même pour les liens
    • au texte du bouton pour les boutons
    • au nom de la galerie pour les galeries d'images.

  • width et height : les dimensions respectives de la thickbox ou de la vignette dans le cas des images ; si laissées vides, les valeurs par défaut seront chargées.

  • option : les options à ajouter à l'url d'appel de la thickbox :
    • modal : pour une thickbox sans barre de titre
    • frame : pour un contenu de thickbox intégré dans une frame
    • inline : pour présenter le texte d'une div de la page dans une thickbox.

  • id : l'identifiant de la div dans le cas de l'option 'inline' ci-dessus.


lien ::
# THICKBOX{link,page=texte_frame,un titre,texte du lien,500,400,frame}
[(#THICKBOX{link,page=texte_frame,un titre,texte du lien,500,400,frame})]
input ::
# THICKBOX{input,page=texte_ajax,'',texte de l&#039;input,500,400,modal}
[(#THICKBOX{input,page=texte_ajax,'',texte de linput,500,400,modal})]
image ::
# THICKBOX{image,#CHEMIN{images/your-picture.gif},'','',120,120}
[(#THICKBOX{image,#CHEMIN{images/your-picture.gif},'','',120,120})]
galerie d'images ::
# THICKBOX{gallery,#CHEMIN{images/plant1.jpg}}
# THICKBOX{gallery,#CHEMIN{images/plant2.jpg}}
# THICKBOX{gallery,#CHEMIN{images/plant3.jpg}}
[(#THICKBOX{gallery,#CHEMIN{images/plant1.jpg}})] [(#THICKBOX{gallery,#CHEMIN{images/plant2.jpg}})] [(#THICKBOX{gallery,#CHEMIN{images/plant3.jpg}})]


Exemple d'une boucle documents de SPIP
<BOUCLE_doc(DOCUMENTS) {id_document=4}>
	[(# THICKBOX{image,# URL_DOCUMENT,# TITRE})]
</BOUCLE_doc>

Une nouvelle fonction vous est proposée pour ajouter la classe 'thickbox' à tous les liens du contenu de la thickbox, de façon à avoir un suivi d'actions dans la fenêtre. Pour appeler cette fonction, indiquez dans vos squelettes :

(# TEXTE|dialogbox_links)

Le plugin intègre un modèle de squelette type 'boîte de dialogue' (cf. fichier 'dialogbox.html'). Il s'agit d'une page de squelettes adaptée qui sera par défaut chargée dans une frame (vous pouvez cependant préciser l'option 'noframe' dans la balise). La barre de titre de la thickbox est également retirée par défaut (vous pouvez la remettre en indiquant 'nomodal' dans l'option de la balise).

Ce type de lien s'appelle en utilisant la balise '# DIALOGBOX' suivante (attention à l'ordre des arguments) :

# DIALOGBOX{ url , texte , option , titre , width , height }

dialogbox standard ::
# DIALOGBOX{id_article=1,mon texte}
#DIALOGBOX{id_article=1,mon texte}
dialogbox sans frame ::
# DIALOGBOX{id_article=1,mon texte,noframe}
#DIALOGBOX{id_article=1,mon texte,noframe}
dialogbox avec barre de titre ::
# DIALOGBOX{id_article=1,mon texte,nomodal,mon titre}
#DIALOGBOX{id_article=1,mon texte,nomodal,mon titre}
dialogbox avec taille personnelle ::
# DIALOGBOX{id_article=1,mon texte,'','',200,200}
#DIALOGBOX{id_article=1,mon texte,'','',200,200}



Configuration

Ce plugin est configurable dans la partie privée de SPIP grâce au plugin 'CFG' (plugin 'config' sur contrib.spip) à l'adresse : '/?exec=cfg&cfg=thickbox'.

#THICKBOX{image,#CHEMIN{images/screenshot_cfg.png},Panneau de configuration de la partie prive}



Crédits

Ce plugin est développé par CreaDesign.
Il est protégé sous licence GNU GENERAL PUBLIC LICENSE Version 3 (cf.fichier LICENSE) : (c) 2009 GNU GPL v3 ]

  [ web ]   [ contact ]

Le plugin 'Thickbox' pour la bibliothèque 'jQuery' est développé par Cody Lindley. Il est protégé sous licence MIT LICENSE/GNU LICENSE : MIT ]   [ GNU ]

  [ web ]   [ contact ]   [ web de Thickbox ]



Nunc in ipsum. Mauris id ante. Fusce lacinia. Nullam laoreet ligula in pede. Vestibulum nunc purus, venenatis quis, blandit eget, congue at, risus. Sed orci. Nulla facilisi. Vestibulum vitae sem. Integer dignissim tortor vitae sem. Donec quis sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nonummy semper felis.

Nunc non nibh. Suspendisse potenti. Mauris elementum interdum nunc. Donec sit amet tortor. Morbi vehicula mauris at odio. Maecenas commodo ultricies orci. Vivamus varius quam. Aenean auctor lorem sit amet magna. Fusce quis tellus. Vestibulum placerat vulputate lorem. Nulla elementum mattis nisi. Integer nunc mauris, fringilla id, semper eget, sollicitudin ac, sapien.


PhpDoc phpDocumentor 1.4.1
| <:phpdoc:date_generation:>
| Mon, 28 Feb 2011 12:54:16 +0100

CreaDesign Crea Design
 | PhpDocumentor plugin pour SPIP
 | version 1.0.09 (c) 08/2009

SPIP | <:squelette:>[ (#SESSION{id_auteur}|?{' '})| <:icone_deconnecter:> ][(#SESSION{id_auteur}|?{'',' '})| <:lien_connecter:>][ (#AUTORISER{ecrire})| <:espace_prive:>] | <:plan_site:> | <:icone_suivi_activite:> RSS 2.0