[V4] Intégration de la balise Lighbox dans la barre de BBCode

benflovideo Membre non connecté

Equipe Modération Equipe Communication Modérateur

Le 15/02/2013 à 14h15

Hello,

Petite balise bien utile, l'effet lightbox permet de créer un lien vers une image qui s'affichera d'une manière assez sympa. Exemple:

Actuellement non disponible dans la barre BBCode, j'ai cherché à intégrer cette balise et j'y suis finalement arrivé, rien de bien compliqué en réalité. Voici la marche à suivre. Pensez à sauvegarder les fichiers que nous allons éditer avant toutes modifications

Tout d'abord, ouvrir le fichier: /BBCode/templates/js/bbcode.js . Copiez le code suivant tout à la fin:

Code JAVASCRIPT :

function bbcode_ligthbox(field, prompt_text)
{
    var url = prompt(prompt_text);
    if( url != null && url != '' )
        insertbbcode('[lightbox=' + url + ']', '[/lightbox]', field);
    else
        insertbbcode('[lightbox=]', '[/lightbox]', field);
}

Enregistrez cette image et placez là dans: /templates/{THEME}/images/form/ .

Ouvrez le fichier: /phpboostv4/BBCode/templates/bbcode_editor.tpl . Plusieurs cas d'intégration dans votre barre BBCodes sont possibles:

Vous souhaitez remplacer la balise image par défaut par la balise lightbox

Remplacez la ligne 130:

Code TPL :

<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/image.png" class="bbcode_hover" {AUTH_IMG} onclick="{DISABLED_IMG}insertbbcode('[img]', '[/img]', '{FIELD}');" alt="{L_BB_IMG}" title="{L_BB_IMG}" />

par le code suivant:

Code TPL :

<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/lightbox.png" class="bbcode_hover" {AUTH_URL} onclick="{DISABLED_URL}bbcode_ligthbox('{FIELD}', '{L_URL_PROMPT}');" alt="Insérer une image en utilisant l'effet Lightbox" title="Insérer une image en utilisant l'effet Lightbox" />

Vous souhaitez l'ajouter à la balise image par défaut

Placez le code suivant ou bon vous semble dans la barre BBCodes:

Code TPL :

<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/lightbox.png" class="bbcode_hover" {AUTH_URL} onclick="{DISABLED_URL}bbcode_ligthbox('{FIELD}', '{L_URL_PROMPT}');" alt="Insérer une image en utilisant l'effet Lightbox" title="Insérer une image en utilisant l'effet Lightbox" />

Pour adapter la largeur de la barre BBCodes (puisqu'il y aura une balise de plus) ouvrez le fichier: /phpboostv4/BBCode/templates/bbcode.css . A la ligne 11, remplacez la valeur 491 par 530.

Voilà

A noter qu'il faut un texte entre les deux balises (du style "cliquez ic") pour que la balise soit prise en compte

Bon c'est du bidouillage, je ne suis pas un expert, mais ça fonctionne