Effet Thickbox dans WordPress sans plugin !
Valentin Brandt a écrit un article concernant la fonctionnalité Thickbox de WordPress, vous pouvez lire cet article ici. Ce qu’il faut retenir c’est qu’il faut appeler le script de la thickbox dans votre thème pour cela il suffit de mettre le code suivant entre les balises head de votre thème :
<?php wp_enqueue_style('thickbox'); ?> // appel le css de la thickbox
<?php wp_enqueue_script('jquery'); ?> // insère l'appel au script de jquery
<?php wp_enqueue_script('thickbox'); ?> // insère l'appel au script de la thickbox
Je le remercie pour cette astuce cependant je pense que l’article n’est pas assez poussé, j’ai eu le même problème que ce commentateur :
la thickbox est toute petite, pas du tout de la même taille que celle qui s’affiche dans le panneau d’administration…
La réponse à sa question est simple il faut au minimum connaitre comment fonctionne l’effet thickbox. Le code suivant nous montre comment l’intégrer à une simple image. Pour cela il suffit de rajouter la balise class=thickbox au lien :
<a class="thickbox" href="image-full.jpg"> <img title="Titre" src="image-mini.jpg" alt="Titre 2" width="150" height="150" /></a>
L’effet thickbox prend en compte plusieurs paramètres que nous pouvons placer dans l’url de nos liens. Par exemple pour spécifier une largeur et une hauteur pour la thickbox il suffit de placer à la suite de notre lien ?height=500&width=500
<a href="http://www.saugrin-sonia.fr/?page_id=39?height=500&width=500" title="A propos" class="thickbox" >A propos</a>
Pour une démonstration cliquez sur A propos dans le menu.
Nous pouvons aussi afficher une page externe du site, la page sera afficher sous forme d’iframe dans l’effet thickbox. Pour cela il suffit de rajouter ?KeepThis=true&TB_iframe=true
<a href="http://www.doyoubuzz.com/sonia-marie-laurence-saugrin/?KeepThis=true&TB_iframe=true&height=800&width=980" title="CV" class="thickbox">CV</a>
Pour une démonstration cliquez sur CV dans le menu.
Il est aussi possible de modifier l’apparence de la thickbox, sans pour autant modifier le css original de WordPress qui sera obligatoirement écraser lors d’une mise à jour. Dans un premier temps NE rajoutez PAS cette ligne à votre thème
<?php wp_enqueue_style('thickbox'); ?>
Ensuite télécharger le css par défaut qui se trouve ici et modifier le à votre guise. N’oubliez pas d’appeler le css dans le header de votre thème.
Vous trouverez d’autres explications et d’autres exemples à propos de la thickbox ici.






Réagissez : il y à Aucune réaction - Laisser un commentaire