1 - Placer les fichiers jquery.js, thickbox.js, thickbox.css et loadinganimation.gif dans le dossier /inc de GuppY
2 - Sauvegarder le fichier /inc/hpage.inc d'origine au cas où, puis modifier le hpage.inc en ligne de la manière suivante :
Insérer les trois lignes de code suivantes juste avant la balise </head> :
<script type="text/javascript" src="<? echo CHEMIN; ?>inc/jquery.js"></script>
<script type="text/javascript" src="<? echo CHEMIN; ?>inc/thickbox.js"></script>
<link rel="stylesheet" href="<? echo CHEMIN; ?>inc/thickbox.css" type="text/css" media="screen" />
Le script est normalement prêt a fonctionner.
Exemples de code html pour appeler le script par le biais d'un lien dans un menu, un article, une news, une boîte libre... :
Exemple de code pour une image (les images sont ici dans le dossier img de GuppY, à adapter selon les besoins) :
<a href="img/mon_image.jpg" title="Ajouter un commentaire ou laisser vide" class="thickbox"><img src="img/ma_miniature.jpg" alt="Simple Image"/></a>
Exemple de code pour une galerie d'images (les miniatures sont rangées dans un tableau centré par une <div>, à adapter selon les besoins) :
<div align="center"><table border="0"><tbody><tr><td><a href="url de l'image/image1.jpg" title="Ajouter un commentaire ou laisser vide" class="thickbox" rel="Le_nom_de_ma_galerie "><img src="url de l'image/miniature_image1.jpg" alt="image1" border="0"></a></td><td><a href="url de l'image/image2.jpg" title="Ajouter un commentaire ou laisser vide" class="thickbox" rel="Le_nom_de_ma_galerie "><img src="url de l'image/miniature_image2.jpg" alt="image1" border="0"></a> </td></tr><tr><td><a href="url de l'image/image3.jpg" title="Ajouter un commentaire ou laisser vide" class="thickbox" rel="Le_nom_de_ma_galerie "><img src="url de l'image/miniature_image3.jpg" alt="image3" border="0"></a></td><td><a href="url de l'image/image4.jpg" title="Ajouter un commentaire ou laisser vide" class="thickbox" rel="Le_nom_de_ma_galerie "><img src="url de l'image/miniature_image4.jpg" alt="image4" border="0"></a></td></tr></tbody></table></div>
Exemples de code pour une iframe, pour une page php :
Ici la page de tchat du Tchat Gazh :
<a href="plugins/tchat_ghaz/chat.php?keepThis=true&TB_iframe=true&height=450&width=450" title="Tchat Gazh" class="thickbox"><h1>Tchat Gazh</h1></a>
height et width à adapter selon les besoins
Et là la page centrale de tchat du plugin shoutpro :
<a href="plugins/shoutpro/centralbox2.php?keepThis=true&TB_iframe=true&height=450&width=450" title="Shout box" class="thickbox">SHOUT BOX</h1></a>
height et width à adapter selon les besoins
Voilà pour l'instant les insertions que j'ai testées. D'autres codes peuvent être consultés sur la page du programmeur ici, paragraphe "Examples", onglets "html" :
http://jquery.com/demo/thickbox/#examplesÀ noter :
L'appel à la css du script m'a fait perdre le centrage des pages d'admin, je n'ai pas encore trouvé la parade. Bon apparemment c'est seulement dans l'admin donc pas trop grave...
Il y a de possibles incompatibilités avec d'autres scripts ajoutés à GuppY.Bons tests et souvenez-vous :
on sauvegarde avant de faire des modifications.