Installation de LightBox 2.05

xavier · juin 2011

Bonjour,

Je cherchais à améliorer l'affichage des images en plein écran et je suis tombé sur ce script plutôt sympa :
http://www.huddletogether.com/projects/lightbox2/

Je vous livre donc ma méthode pour intégrer ce script à pluxml :

1. Téléchargement du zip sur le site de lightbox

2. Création d'un répertoire plugin/lightbox à la racine de pluxml

3. Modification du header.php du theme pour ajouter le css et les js de lightbox
css :
<link rel="stylesheet" type="text/css" href="plugin/lightbox/css/lightbox.css" media="screen" />
js :
<script src="plugin/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="plugin/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript" ></script>
<script src="plugin/lightbox/js/lightbox.js" type="text/javascript"></script>

4. Dans les sources lightbox.js et lightboxweb.js, modification des chemins pour les images (boutons close, next, previous) : variables fileLoadingImage et fileBottomNavCloseImage

5.Modification du fichier pluxml fonction.js pour ajouter automatiquement l’appel du javascript lightbox et le centrage de l’image dans la page :
function insImg(where, src) {
if(src.substr(-3)=='.tb')
addText(where, '<p style="text-align:center"><a href="'+src.substr(0,src.length-3)+'" rel="lightbox"><img src="'+src+'" alt="" /></a></p>');
else
addText(where, '<p style="text-align:center"><img src="'+src+'" alt="" /></p>');

}

Voilà, j'espère avoir été assez clair.
C'est la méthode minimale, j'ai également retouché les images nextlabel.gif, prevlabel.gif, closelabel.gif de lightbox pour qu'ils soient en français et traduit la variable labelOf dans lightbox.js et lightboxweb.js.

A bientôt.

Xavier

bg62 · juin 2011

super intéressant !
c'est quasiment ce que j'attendais ... mais à partir des points 4 & 5 ... je suis largué

ne pourrais-tu soit en faire un plugin, soit mettre les sources (modifiées, surtout au niveau JS) en ligne qq part ?
@+

xavier · juin 2011

OK, je vais m'occuper de packager tout ça. Si j'ai bien compris, la norme est plutôt d'installer ce genre de modifications dans le répertoire addons. Je mettrai le package en ligne ce soir.

A bientôt

bg62 · juin 2011

xavier a écrit:

OK, je vais m'occuper de packager tout ça. Si j'ai bien compris, la norme est plutôt d'installer ce genre de modifications dans le répertoire addons. Je mettrai le package en ligne ce soir.

A bientôt

vérifie, mais avec la nouvelle version le dossier doit plutôt être " plugins " si je ne me trompe

et je teste dès que tu auras mis en ligne
@+

xavier · juin 2011

Bonsoir,

Bon, j'ai fait 2 versions : une qui utilise le répertoire addons et une autre le répertoire plugins.

Je les ai uploadés sur mon site :
http://nouvozorizons.free.fr/public/addon_lightbox2.05_pour_pluxml_5.02.zip
http://nouvozorizons.free.fr/public/plugin_lightbox2.05_pour_pluxml.zip

Dans chaque zip, il y a un fichier lisez.moi qui explique la procédure à suivre pour l'install.
Je le copie/colle ici pour discussion éventuelle

Version plugin :
1. Télécharger le fichier "plugin lightbox2.05 pour pluxml.zip" (si vous lisez ce texte, vous avez déjà le fichier...)

2. dans la section <head> du fichier header.php du thème utilisé, ajouter les lignes :
<link rel="stylesheet" type="text/css" href="plugins/image.lightbox/css/lightbox.css" media="screen" />
<script src="plugins/image.lightbox/js/prototype.js" type="text/javascript"></script>
<script src="plugins/image.lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript" ></script>
<script src="plugins/image.lightbox/js/lightbox.js" type="text/javascript"></script>

3. Lightbox fonctionne selon 2 modes : le mode simple (une seule image sur le billet) et le mode multi-images (plusieurs images dans le même billet).
Je décris ici les modifications pour utiliser le mode simple et le rendre éventuellement automatique. Le mode multi-images est décrit dans le §4.

Pour utiliser lightbox : choisir une des 3 posibilités
3.1 Soit utiliser la méthode manuelle
- insérer une miniature dans le billet : le tag suivant est inséré :
<a href="data/images/2011-06-02_185515.jpg"><img src="data/images/2011-06-02_185515.jpg.tb" alt="" /></a>

- ajouter la commande rel="lightbox" dans tag comme suit :
<a href="data/images/2011-06-02_185515.jpg" rel="lightbox"><img src="data/images/2011-06-02_185515.jpg.tb" alt="" /></a>

3.2 Soit remplacer le fichier pluxml\core\lib\functions.js par le fichier functions.js présent dans ce zip

3.3 Soit modifier le fichier pluxml\core\lib\functions.js :
- Remplacer la fonction insImg
function insImg(where, src) {
if(src.substr(-3)=='.tb')
addText(where, '<a href="'+src.substr(0,src.length-3)+'"><img src="'+src+'" alt="" /></a>');
else
addText(where, '<p style="text-align:center"><img src="'+src+'" alt="" /></p>');
}

- Par la fonction insImg suivante
function insImg(where, src) {
if(src.substr(-3)=='.tb')
addText(where, '<p style="text-align:center"><a href="'+src.substr(0,src.length-3)+'" rel="lightbox"><img src="'+src+'" alt="" /></a></p>');
else
addText(where, '<p style="text-align:center"><img src="'+src+'" alt="" /></p>');
}

4. Mode multi-images
Pour utiliser le mode multi-images, il suffit de choisir le nom de la série d'images et de l'ajouter au tag d'affichage des images.
Avec un exemple, vous allez très vite comprendre. Imaginons que j'ai un billet avec 3 images. Lorsque j'insére la miniature de chaque image, le code suivant est ajouté :
<a href="data/images/image1.jpg" rel="lightbox"><img src="data/images/image1.jpg.tb" alt="" /></a>
<a href="data/images/image2.jpg" rel="lightbox"><img src="data/images/image2.jpg.tb" alt="" /></a>
<a href="data/images/image3.jpg" rel="lightbox"><img src="data/images/image3.jpg.tb" alt="" /></a>

Pour faire comprendre à lightbox que ces 3 images sont liées et que les boutons suivant/précédent s'affichent, je choisis un nom de série d'images, par exemple "tour_eiffel" et je modifie les tages comme suit :
<a href="data/images/image1.jpg" rel="lightbox[tour_eiffel]"><img src="data/images/image1.jpg.tb" alt="" /></a>
<a href="data/images/image2.jpg" rel="lightbox[tour_eiffel]"><img src="data/images/image2.jpg.tb" alt="" /></a>
<a href="data/images/image3.jpg" rel="lightbox[tour_eiffel]"><img src="data/images/image3.jpg.tb" alt="" /></a>

5. Raccourcis clavier :
Lightbox est paramétré avec des raccourcis clavier, que j'ai adapté pour le français :
Image suivante : S
Image précédente : P
Fermer lightbox : X, O ou F

6. Même si ce script est gratuit, n'oubliez pas d'ajouter le lien vers le site de l'auteur
Lightbox2 designed by <a href="http://lokeshdhakar.com/projects/lightbox2/">Lokesh Dhakar</a>

Dis-moi si ça fonctionne chez toi.
A+

Xavier

teddy1602 · juin 2011

bonjour et merci pour ce plugin.
Par contre, le lien pour la version plugin n'est pas valide.

edit : les deux liens ne marchent pas en fait

bg62 · juin 2011

"Dans chaque zip, il y a un fichier lisez.moi qui explique la procédure à suivre pour l'install.
Je le copie/colle ici pour discussion éventuelle"
ben je me retrouve bien chez free.fr sur ces liens, mais qui ne contiennent aucun fichier ... ???
>>> bon aujourd'hui c'est ok

xavier · juin 2011

Bizarre, le répertoire /public avait disparu... Censure de free ou fatigue de mon côté ?
J'ai ré-uploadé les 2 fichiers, j'espère que ça fonctionnera.

teddy1602 · juin 2011

j'ai pas reussi a le faire fonctionner.
j'ai mis le dossier du zip dans plugins. et déplacé le fichier fonction.js dans core/lib
j'ai rajouté les lignes de code dans le head

ensuite si j'ai bien compris, je n'ai qu'a mettre une miniature et normalement ca fonctionne tout de suite?

en tout cas ca ne le fait pas je vais voir si j'ai zappé quelque chose.

quand je mets une miniature ca n'ecrit pas le code facon modifier. et si j'insere le code manuellement ca marche pas non plus.

xavier · juin 2011

Merci pour le beta-test :-)
J'avais testé l'install de mon côté, mais d'après ce que tu dis, j'ai loupé quelque chose.
Je suis au bureau, mais je vais essayer de t'aider.

j'ai mis le dossier du zip dans plugins.

Je peux me tromper, mais je comprends que tu as mis le dossier du zip dans un dossier /plugins à la racine de pluxml. Si c'est le cas, ce n'est pas correct, la structure de tes dossiers doit être :
/plugins/image.lightbox/
/plugins/[autres plugins]

et non
/plugins/plugins/image.lightbox.

Le dossier que tu trouves dans le zip doit être copié à la racine de pluxml.

et déplacé le fichier fonction.js dans core/lib

Ca, c'est bon, normalement, tu dois avoir la bonne version de la fonction insImg
function insImg(where, src) {
if(src.substr(-3)=='.tb')
addText(where, '<p style="text-align:center"><a href="'+src.substr(0,src.length-3)+'" rel="lightbox"><img src="'+src+'" alt="" /></a></p>');
else
addText(where, '<p style="text-align:center"><img src="'+src+'" alt="" /></p>');
}

j'ai rajouté les lignes de code dans le head

Oui, il faut ajouter les lignes pour le css et les scripts de lighbox dans la section <head> du fichier head.php.

ensuite si j'ai bien compris, je n'ai qu'a mettre une miniature et normalement ca fonctionne tout de suite?

Oui, après éventuellement avoir rafraichit ta page admin pour qu'elle prenne en compte les nouveaux scripts js.

Le nouveau code inséré pour l'utilisation de lightbox doit être comme celui-ci :
<a href="data/images/image2.jpg" rel="lightbox"><img src="data/images/image2.jpg.tb" alt="" /></a>

==> On voit ici l'appel à lightbox avec la partie {rel="lightbox"}

quand je mets une miniature ca n'ecrit pas le code facon modifier

Pour moi, cela signifie que le script modifié core/lib/fonction.js n'est pas utilisé. ==> As-tu rafraîchi la page ?

et si j'insere le code manuellement ca marche pas non plus.

La, cela signifie qu'il y a un problème lors de l'appel au javascript lightbox, pê dû au problème de dossier expliqué plus haut.

A+

Xavier

teddy1602 · juin 2011

merci a toi plutôt pour le moyen d'installer lightbox facilement

Alors pour le première remarque, j'avais bien noté le fait que dezipper dans /plugins donnait /plugins/plugins j'avais alors fait le nécessaire pour que l’arborescence soit /plugins/image.lightbox/

Mais je suis pas sûr d'avoir raffraichi l'admin je réessaie et je reviens.

en insérant une miniature j'ai eu :
<p style="text-align:center"><a href="data/images/electronique/tonidoplug3.jpg" rel="lightbox"><img src="data/images/electronique/tonidoplug3.jpg.tb" alt="" /></a></p>

en cliquant dessus ca m'affiche limage en plein ecran mais sans l'effet lightbox, juste en remplacant la page en court.

je vais reverifier le header et je reviens

la modif du code de mon fichier header, avec juste en dessous le code pour analytics :

....
<script src="plugins/image.lightbox/js/prototype.js" type="text/javascript"></script>
<script src="plugins/image.lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript" ></script>
<script src="plugins/image.lightbox/js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript" src="./plugins/jquery/jquery.min.js"></script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push();
_gaq.push();

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

Vous voyez quelques chose de louche?

bg62 · juin 2011

xavier a écrit:

Bizarre, le répertoire /public avait disparu... Censure de free ou fatigue de mon côté ?
J'ai ré-uploadé les 2 fichiers, j'espère que ça fonctionnera.

c'est ok

+100

teddy1602 · juin 2011

bg62 a écrit:

xavier a écrit:

Bizarre, le répertoire /public avait disparu... Censure de free ou fatigue de mon côté ?
J'ai ré-uploadé les 2 fichiers, j'espère que ça fonctionnera.

c'est ok
+100

Qu'est ce qui est ok le download ou l'install de lightbox? Ben zut alors j'ai raté quoi???

bg62 · juin 2011

teddy1602 a écrit:

Qu'est ce qui est ok le download ou l'install de lightbox? Ben zut alors j'ai raté quoi???

le download

pour le reste pas pu encore tester
@+

xavier · juin 2011

teddy1602 a écrit:

en insérant une miniature j'ai eu :
<p style="text-align:center"><a href="data/images/electronique/tonidoplug3.jpg" rel="lightbox"><img src="data/images/electronique/tonidoplug3.jpg.tb" alt="" /></a></p>

Le code est correct

teddy1602 a écrit:

la modif du code de mon fichier header, avec juste en dessous le code pour analytics :

....
<script src="plugins/image.lightbox/js/prototype.js" type="text/javascript"></script>
<script src="plugins/image.lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript" ></script>
<script src="plugins/image.lightbox/js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript" src="./plugins/jquery/jquery.min.js"></script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push();
_gaq.push();

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

Vous voyez quelques chose de louche?

Pour moi, il manque l'appel du css de lightbox :
<link rel="stylesheet" type="text/css" href="plugins/image.lightbox/css/lightbox.css" media="screen" />

teddy1602 · juin 2011

mauvais copié collé en fait mon code modifié est bien :

<link rel="stylesheet" type="text/css" href="plugins/image.lightbox/css/lightbox.css" media="screen" />

<script src="plugins/image.lightbox/js/prototype.js" type="text/javascript"></script>

<script src="plugins/image.lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript" ></script>

<script src="plugins/image.lightbox/js/lightbox.js" type="text/javascript"></script>

<script type="text/javascript" src="./plugins/jquery/jquery.min.js"></script>

on est d'accord que je dois mettre ce code n'importe ou entre les balises <head>...</head>?
Est ce qu'il faut une configuration spécifique de Apache? je n'ai peu être pas activé un truc.

xavier · juin 2011

teddy1602 a écrit:

on est d'accord que je dois mettre ce code n'importe ou entre les balises <head>...</head>?

Ma connaissance du HTML est assez limitée, du coup, j'ai ajouté la ligne css juste après l'appel du css du thème et les références au javascript juste avant la balise </head>

Par contre, il faut faire attention à l'ordre d'appel des javascript de lightbox (cf le site de l'auteur)

teddy1602 · juin 2011

Ohhhh! J'ai trouvé pourquoi ca ne marchait pas!!!
Déjà ce n'est pas de ton coté

J'ai désactivé le plugin jQuery 1.4.4 - Version 1.0 et là ca fonctionne. Ca doit être l'histoire de l'ordre d'appel dans javascript?

En tout cas ca fonctionne bien. Merci beauuuucoup pour ton aide.

edit : pour confirmer, j'ai réactivé le plugin et ca ne marche plus. Donc pour mon cas le probleme est resolu.

Clyd · juin 2011

Personnellement j'ai installé le plugin "galerie" qui contiens déjà lightbox il vous suffit d'ajouter le rel="lightbox" aux lien d'images et cela fonctionne, pour ne pas avoir a ajouter ce rel="lightbox" a la main, faites la modif necessaire sur le fichier fonctions.js

xavier · juin 2011

J'ai fait une recherche pour trouver le plugin "galerie" mais sans succès. Est-ce que tu peux donner le lien ?
Sinon, j'ai un peu le sentiment d'avoir un train de retard, mais finalement, j'ai appris des choses, c'est le + important :-)

A+

Installation de LightBox 2.05

Réponses