Le Lightbox dans votre PHPBoost V3

Révision infoking1 du 11/03/2013

Introduction

Pour placer et activer le Lightbox sur tout le site il y a peu de choses à modifier, mais tout de même ...

Vous allez commencer par faire une sauvegarde complète du site et de votre Base de données.

Cela aura eu au moins le mérite de vous faire faire une sauvegarde complète en cas de pépins .. Mais bon, j'ai testé moi même la procédure en local et je n'ai pas eu de soucis de mise en place. Il suffit de bien suivre les étapes

Ensuite attention si vos thèmes embarquent du Jquery, il se peut que le Lightbox ne fonctionne pas correctement, donc à éviter.

* Un grand merci tout de même à Saturnin pour la procédure.

1/ - Dans le kernel ...

1 - Commencez par télécharger cette archive : Lightbox.zip, dé-zippez la sur votre bureau et placez le dossier directement dans "../kernel/framework/js".

2 - Dans le "../kernel/framework/content/parser":

a - bbcode_parser.class.php

Vous allez éditer le "bbcode_parser.class.php", à la ligne 202 (environ) , trouvez cette ligne :

Code PHP :

'url4'=>'`(s+)(www.'.Url::get_wellformness_regex(REGEX_MULTIPLICITY_NOT_USED).')(s|<+)`isU'
);

Remplacez avec :

Code PHP :

'url4'=>'`(s+)(www.'.Url::get_wellformness_regex(REGEX_MULTIPLICITY_NOT_USED).')(s|<+)`isU',
'lightbox1'=>'`[lightbox]((?!javascript:)'.Url::get_wellformness_regex().')[/lightbox]`isU',
'lightbox2'=>'`[lightbox=((?!javascript:)'.Url::get_wellformness_regex().')]([^nrtf]+)[/lightbox]`isU',
'lightbox3'=>'`(s+)('.Url::get_wellformness_regex(REGEX_MULTIPLICITY_REQUIRED).')(s|<+)`isU',
'lightbox4'=>'`(s+)(www.'.Url::get_wellformness_regex(REGEX_MULTIPLICITY_NOT_USED).')(s|<+)`isU',
);

Ensuite à la ligne 240 environ , trouvez cette ligne :

Code PHP :

            'url4' => '$1<a href="$2">$2</a>$3'
);

Remplacez par :

Code PHP :

'url4'=>'$1<a href="$2">$2</a>$3',
'lightbox1'=>'<a href="$1" rel=lightbox[roadtrip]>$1</a>',
'lightbox2'=>'<a href="$1" rel=lightbox[roadtrip]>$2</a>',
'lightbox3'=>'$1<a href="$2" rel=lightbox[roadtrip]>$2</a>$3',
'lightbox4'=>'$1<a href="$2" rel=lightbox[roadtrip]>$2</a>$3'
);

Ensuite à la ligne 250 environ , trouvez cette ligne :

Code PHP :

if(!empty($this->forbidden_tags))
{

En dessous placez :

Code PHP :

if(in_array('lightbox',$this->forbidden_tags))
{
$this->forbidden_tags[]='lightbox1';
$this->forbidden_tags[]='lightbox2';
$this->forbidden_tags[]='lightbox3';
$this->forbidden_tags[]='lightbox4';
}

Enregistrez et fermez.

b - bbcode_unparser.class.php

Éditez maintenant le "bbcode_unparser.class.php", à la ligne 113 -114 , trouvez ces lignes :

Code PHP :

 
'`<a href="mailto:(.*)">(.*)</a>`isU',
'`<a href="([^"]+)">(.*)</a>`isU',

En dessous placez :

Code PHP :

'`<a href="([^"]+)" rel=lightbox[roadtrip]>(.*)</a>`isU',

Ensuite à la ligne 145 - 146 , trouvez ces lignes :

Code PHP :

 
"[mail=$1]$2[/mail]",
"[url=$1]$2[/url]",

En dessous placez :

Code PHP :

"[lightbox=$1]$2[/lightbox]",

Enregistrez et fermez.

2/ Le module gallery

Si vous n'avez pas le module gallery d'activé sur votre site, passez cette étape !! Sinon procédez aux modifications suivantes :

1 - Ensuite dans le module "../gallery/templates", ouvrez le fichier "gallery.tpl" il faut commenter ou supprimer la ligne suivante:

Code TPL :

 
<script type="text/javascript" src="{MODULE_DATA_PATH}/images/js/lightbox.js">

2 - Dans le dossier "../gallery/templates/images", supprimez aussi les images suivantes:

- loading.gif
- nextlabel.gif
- prevlbel.gif
- et closelabel.gif

3 - Dans le même temps, dans le dossier "../gallery/templates/images/js" supprimez le "lightbox.js".

*Cela évitera les conflits et surtout les doublons de codes et d'images.

<span class="note"> Chose rare, mais pas impossible :

Attention de ne pas avoir ce fichier de ce module dans vos thèmes pour la galerie.
Si vous en avez il vous faudra modifier votre thème. Le fichier devrait être alors dans "../templates/VOTRE_THEME/modules/gallery".

</span>

3/ Dans votre thème ...

1 - Rendez vous dans votre thème "../templates/VOTRE_THEME/", et éditez le "header.tpl" repérez les balises suivantes :

Code TPL :

</head>
<body>

Et remplacez par :

Code TPL :

 
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/framework/js/lightbox/lightbox.css" type="text/css" media="screen, print, handheld" />
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/lightbox/lightbox.js"></script>
</head>
<body>

2 - Il nous faut aussi rajouter l’icône qui s'affichera dans la barre de l'éditeur BBcode dans le dossier "../templates/VOTRE_THEME/images/form":

* Faites un clique droit et enregistrez l'image sous ... et renommez l'image en "lightbox.png"

4/ Dans le thème Default ...

Il ne vous reste plus qu'à modifier la barre de l'éditeur BBcode pour ajouter la petite icône du Lightbox ..

1 - Dans /templates/default/framework/content, remplacez le fichier "editor.tpl", par celui qui est dans cette archive : editor.zip.

2 -Pour utiliser la balise lightbox ensuite, c'est très simple, vous pouvez l'utiliser de 2 manières différentes :

Lightbox + une image combinée :

Code BBCODE :

[lightbox=/upload/mon-image.png][img]/upload/mon_image.png[/img][/lightbox]

Lightbox + textes combinés :

Code BBCODE :

[lightbox=/upload/mon-image.png]Preview[/lightbox]

5/ Retour dans le Kernel ..

1 - Mise en variable des formatages

Cela vous permettra par la suite de pouvoir gérer si vous autorisez ou pas la balise dans vos différents modules par l'administration :

Par exemple sur CsN, dans la Configuration du livre d'or, nous avons configuré les Types de formatage interdits Et la balise Lightbox en fait partie puisque nous n'autorisons pas non plus la balise Images. Mais pour ce faire il faut pouvoir lire le nom de la balise pour le sélectionner.

a) Donc dans le dossier "../kernel/framework/content/parser", éditez le "content_parser.class.php" vers la ligne 309 vous trouverez :

Code PHP :

var $tag=array('b','i','u','s','title','stitle','style','url',
'img','quote','hide','list','color','bgcolor','font','size','align','float','sup',
'sub','indent','pre','table','swf','movie', 'sound','code','math','anchor','acronym');

Remplacez par :

Code PHP :

var $tag=array('b','i','u','s','title','stitle','style','url','lightbox',
'img','quote','hide','list','color','bgcolor','font','size','align','float','sup',
'sub','indent','pre','table','swf','movie', 'sound','code','math','anchor','acronym');

b) Ensuite dans le dossier "../kernel/framework/content/parser", éditez le "content_formatting_factory.class.php" à la ligne 214 vous avez :

Code PHP :

        'url' => $LANG['format_url'],

Juste en dessous rajoutez :

Code PHP :

 
        'lightbox' => $LANG['format_lightbox'],

2 - Mise en variable $lang

N'ayez pas peur, c'est un grand mot pour pas grand chose à vrai dire

Cela vous permettra par la suite d'avoir au survol de l’icône de la balise dans la barre de l'éditeur BBcode, l'explication de celle-ci.

Dans le dossier "../kernel/framework/content/editor", éditez le "bbcode_editor.class.php" à la ligne 78 vous avez :

Code PHP :

 
'L_BB_IMG'=>$LANG['bb_picture'],

Juste en dessous rajoutez :

Code PHP :

// Ajout lightbox
'L_BB_LIGHTBOX'=>$LANG['bb_lightbox'],

6/ Le fichier lang

Et voici le fameux appel de l'explication que vous aurez une fois que vous survolerez l’icône de la balise dans la barre de l'éditeur BBcode

Rendez-vous dans le dossier "../lang/french/", éditez le "main.php" à la ligne 118 vous avez :

Code PHP :

 
$LANG['bb_picture'] = 'Ajouter une image : [img]url image[/img]';

Juste en dessous rajoutez :

Code PHP :

 
 $LANG['bb_lightbox'] = 'Effet lightbox sur l'image : [lightbox=/upload/image.png]Preview[/img]';

A la ligne 173 vous avez :

Code PHP :

 
$LANG['format_img'] = 'Image';

Juste en dessous rajoutez :

Code PHP :

 
$LANG['format_lightbox'] = 'Lightbox';

Conclusion

La procédure vous semble longue, mais ensuite une fois faite, si vous avez plusieurs thèmes sur votre site, il vous faudra juste répéter l'étape 3/ Dans votre thème ..., pour activer le lightbox dans vos thèmes

Et n'oubliez pas de régénérer vos caches : celui de l'administration de votre site et s'il le faut aussi celui de votre navigateur.

Si vous avez des questions ou alors que vous souhaitez de plus amples informations, le forum est à votre disposition