LightBox
Comment ajouter à mon site Npds un effet de lightBox, comme celui présent ici?
Nous allons voir ici comment intégrer un pluging Jquery dans notre Npds.
 1) Ce que nous voulons.
Avoir la possibilité de créer rapidement depuis notre interface admin un effet de zoom sur une image que nous aurions par exemple mis dans un article.
En parcourant le web, nous avons trouvé un script qui nous convient, en fait c'est ColonelWog qui nous l'a trouvé.
http://lokeshdhakar.com/projects/lightbox2/
2) Comment faire pour qu'il marche sous mon NPDS?
Où envoyer le script miracle et comment le lancer ?
Dois je modifier quelque chose avant de l'utiliser?
Première etape: on télécharge notre découverte sur notre PC: nous avons donc un Dossier: LIGHTBOX
On lance la page d'exemple pour voir comment cela fonctionne, sur votre ordi vous avez donc ceci
|
|
Si vous lancez la page index, vous avez les divers exemples et en éditant le code source, vous devriez comprendre rapidement le fonctionnement.
Je met une image dans une page et sur cette image je rajoute dans le code source un "REL "LIGHTBOX" juste à coté de mon lien html.
|
Le mode d'emploi est sommaire, je le résume:
L'auteur nous dit:
* mettez dans votre site le dossier ligthbox avec son contenu.
* Sur votre page html, copier entre les balises HEAD l'appel aux scripts ET à la CSS.
* Pour lancer l'effet, ajouter simplement: rel "lightbox" au lien texte ou à l'image sur lequel vous désirez avoir l'effet.
*Si vous désirez avoir plusieurs images, un effet Gallery, ajoutez simplement entre crochet le nom du groupe d'image, dans l'exemple ci dessous "roadtrip".
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Deuxième étape: l'intégrer dans non NPDS.
1) Nous allons envoyer le dossier LIGHTBOX dans Module / include ..... voir l'image 1
1.1 Mettre le contenu du fichier Images du script dans notre DOSSIER IMAGES à la racine de notre NPDS... he oui nous avons déja un dossier qui porte ce nom.
2) Il faut maintenant ecrire l'appel à ce script.
2.1 Allez dans votre panneau d'admin pour Editer les fichiers de configuration. voir l'image 2
2.2 Copier les appels aux scripts dans le fichier HEADER-HEAD INC qui correspond aux fameuses balises head de nos pages html. voir l'image 3
Attention: il faudra bien sur rectifier le chemin des appels au script, nous avons mis notre ligthbox dans le dossier Modules, sous dossier Include.
<link rel="stylesheet" href="modules/include/jquery-lightbox-0.3/css/jquery.lightbox-0.3.css" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="modules/include/jquery-lightbox-0.3/js/jquery.lightbox-0.3.js"> </script>
Dernière étape: utiliser le script
Faisons simple, vous ecrivez votre article comme à votre habitude, vous positionnez votre image en la téléchargeant, comme d'habitude depuis votre editeur, vous pouvez la redimentionner à la souris.
Positionnez vous sur votre image et créer un lien cliquable vide ( # ) fera l'affaire.
Une fois votre article écrit: éditez le code HTML avec l'icone "HTML" de l'éditeur et repérez le lien html et ajoutez dans le code source : rel= "lightbox"
Dernière étape remplacer votre # par l'adresse de votre image
C'est finit
source: http://bmag.phpnet.org
| 
