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').
])
[(#CHEMIN{images/thickbox.png}||image_reduire{150,100})] | Thickbox v3 | ![]() by
Version 3 (stable) - (c) 2009 GNU GPL v3 |
| Intégration à SPIP du plugin jQuery 'Thickbox 3.1' | by CODY LINDLEY
Le plugin Thickbox_v3 s'installe de la même manière que l'ensemble des plugins SPIP (article dédié sur 'spip.net').
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 :
#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> |
#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" /> |
#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> |
#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> |
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 :
Le plugin vous propose une nouvelle balise utilisable dans vos squelettes ou vos boucles SPIP :
# THICKBOX{ type , url , titre , texte , width , height , option , id }Pour indiquer une valeur vide, inscrivez simplement '' ; avec :
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'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}})] |
<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} |
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'.
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 ]
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.
|
|