| Intégration Lightscript lightbox pour Dotclear 2 |
|
Un script très utile, joli et ultra connu... qui permet de beaux effets pour l'ouverture de vos photos et images, comme vous pourrez le constater. Mais tout dotclearien n'étant pas maître informaticien, je déplore l'absence de quelque tutoriel simple pour blogueur passioné et néanmoins néophyte des codages de toutes sortes.
A ce que j'ai pu en voir, peu d'explications correctes (subjectivement, s'entend) et exhaustives sont disponibles. Qu'à cela ne tienne, je m'y colle, et j'espère que cela vous sera utile ;) InstallationDans un premier temps, il s'agit de visiter le site du bienfaiteur Lokesh Dhakar afin d'y récupérer les js bénites. Il en est à la version 2.02 au moment de l'écriture de ce billet. vérifiez les mises à jour régulièrement ;) Dans un second temps, coller les trois dossiers de cette archive dans un dossier "lightbox" que vous pourrez insérer dans votre dossier de plugins (généralement, celui-ci se trouve dans le répertoire dotclear --> dossier plugins) ou directement dans votre répertoire de templates en cours (ce qui pourra vous éviter des modification d'accès sur votre serveur). Une partie un peu plus corsée... il s'agit désormais de trouver le fichier de templates contenant les métas, liens css, etc... normalement, vous trouvez ça dans le dossier dotclear/themes --> le dossier du thème que vous utilisez. Il faut maintenant trouver le bon fichier, celui dans lequel se trouve les liens css, les meta éventuellement. il s'agit généralement d'un fichier portant l'inscription post.html, ou header.html, quelque chose qui s'en approche, quoi ;) dans ce fichier entre les balise <head> et </head> vous devez copier le code suivant : <link rel="stylesheet" href="rep_app/plugins/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="rep_app/plugins/lightbox/js/prototype.js"></script> <script type="text/javascript" src="rep_app/plugins/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="rep_app/plugins/lightbox/js/lightbox.js"></script> Pour ceux qui n'y connaissent rien, sachez que dès que vous voyez dans un fichier la balise </head> le code a copier peut s'insérer juste avant celle-ci Très important!!!le nom rep_app n'est bien entendu pas à insérer tel quel dans votre fichier : il représente le chemin d'accès à votre répertoire "plugins". Soit vous y indiquez l'url relative, en vous servant d'une des variables utilisées par dotclear (exemple : remplacer rep_app/plugins par {{tpl:BlogURL}}/plugins soit en identifiant une URL relative à partir du fichier que vous voulez changer, pour atteindre le répertoire lightbox (dans la majorité des cas, remplacez rep-app/plugins par ../plugins) Soit vous indiquez une URL absolue, ce qui est déconseillé, mais en dernier recours, cette méthode est relativement plus aisée, tant que vous ne changez pas de serveur ou que vous ne bougez pas vos répertoires de place. remplcez alor rep_app/plugins par http://le-nom-de-votre-blog/dotclear/plugins, ou http://le-nom-de-votre-blog/plugins si le répertoire de plugins se trouve directement à la racine de votre blog. Utilisation de LightboxC'est en définitive la partie la plus interessante. vous devez écrire vos billet en mode "xhtml", et non en "visuel", mais en "source". à partir de là, récupérer l'adresse de vos images et des miniatures.thumbnails associés. dans vos billet, copiez le code suivant : <a href="/public/titre-image.jpg" rel="lightbox[categorie]" alt="bulle-image" title="nom-image"><img src="/public/titre-image_t.jpg" alt="bulle miniature" /></a> "titre-image" est le nom de votre fichier d'image (photo-novembre.jpg, par exemple) "catégorie" et la catégorie de votre image : si plusieurs images d'un même fichier sont de la même catégorie, lightbox permettra de voir les image en plein écran les unes à la suite des autres, c'est l'un des interêt principaux, que vos images soit regroupées en catégories ;) "bulle-image" est la légende de l'image. "titre-imag_t" est le nom de la miniature (normalement, le même que image-titre suivi de _t) enfin, "bulle-miniature" est le texte qui s'affiche lorsque vous passez au dessus de la miniature avec la souris. premiers essais : le code suivant, vu en mode xhtml-visuel : <a href="/*******/.cloupy_m.jpg" rel="lightbox[photos]" alt="cloupy" title="cloupy"><img src="/*******.cloupy_t.jpg" alt="cloupy.jpg" /></a> enregistré en mode source, donne l'effet attendu! Plus d'infos sur le site officiel de Lokesh Dhakar : http://www.huddletogether.com ;) |
| < Précédent |
|---|