12 mai 2008
0 Commentaire
Dans mon nouveau monde, je trouve le temps de geeker un peu.
L’idée était là depuis longtemps. Améliorer un tout petit peu Lightbox 2 pour que celui-ci gère dynamiquement une couleur de fond et qu’en fonction de l’image affichée, le fond lightbox prenne la teinte moyenne de l’image.
La rustine ci-dessous récupère simplement la couleur de fond du lien et l’ajoute au tableau des images. La propriété qui nous concerne est ensuite stockée à l’indexe 2.
- Index: lightbox.js
- ===================================================================
- --- lightbox.js (revision 32)
- +++ lightbox.js (working copy)
- @@ -215,12 +215,12 @@
- if ((imageLink.rel == 'lightbox')){
- // if image is NOT part of a set, add single image to imageArray
- - this.imageArray.push([imageLink.href, imageLink.title]);
- + this.imageArray.push([imageLink.href, imageLink.title, imageLink.style.backgroundColor]);
- } else {
- // if image is part of a set..
- this.imageArray =
- $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
- - collect(function(anchor){ return [anchor.href, anchor.title]; }).
- + collect(function(anchor){ return [anchor.href, anchor.title, anchor.style.backgroundColor]; }).
- uniq();
- while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
- @@ -261,6 +261,7 @@
- imgPreloader.onload = (function(){
- this.lightboxImage.src = this.imageArray[this.activeImage][0];
- this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
- + this.overlay.style.backgroundColor = this.imageArray[this.activeImage][2];
- }).bind(this);
- imgPreloader.src = this.imageArray[this.activeImage][0];
- },
- @@ -494,4 +495,4 @@
- }
- }
Puis dans SPIP, il faut simplement créer des liens lightbox avec la bonne couleur comme style.
- <a href="[(#FICHIER|image_reduire{660,0}|extraire_attribut{src})]"
- rel='lightbox[portfolio]'
- style='background-color: #[(#LOGO_DOCUMENT||couleur_extraire|couleur_foncer)];'
- title="#TITRE">
Le changement de la teinte moyenne en une couleur plus foncée permet de mieux faire ressortir l’image à l’inverse d’un fond clair.
La technique SPIP pour la couleur moyenne d’une image est expliquée en détail ici par l’excellent Arno Martin.
