De jolies couleurs

12 mai 2008 // 0 commentaire // Technos Web  // précédent  // suivant

Moi

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.

  1. Index: lightbox.js
  2. ===================================================================
  3. --- lightbox.js (revision 32)
  4. +++ lightbox.js (working copy)
  5. @@ -215,12 +215,12 @@
  6.  
  7.          if ((imageLink.rel == 'lightbox')){
  8.              // if image is NOT part of a set, add single image to imageArray
  9. -            this.imageArray.push([imageLink.href, imageLink.title]);        
  10. +            this.imageArray.push([imageLink.href, imageLink.title, imageLink.style.backgroundColor]);
  11.          } else {
  12.              // if image is part of a set..
  13.              this.imageArray =
  14.                  $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
  15. -                collect(function(anchor){ return [anchor.href, anchor.title]; }).
  16. +                collect(function(anchor){ return [anchor.href, anchor.title, anchor.style.backgroundColor]; }).
  17.                  uniq();
  18.              
  19.              while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
  20. @@ -261,6 +261,7 @@
  21.          imgPreloader.onload = (function(){
  22.              this.lightboxImage.src = this.imageArray[this.activeImage][0];
  23.              this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
  24. +            this.overlay.style.backgroundColor = this.imageArray[this.activeImage][2];
  25.          }).bind(this);
  26.          imgPreloader.src = this.imageArray[this.activeImage][0];
  27.      },
  28. @@ -494,4 +495,4 @@
  29.         }
  30.  }
Télécharger

Puis dans SPIP, il faut simplement créer des liens lightbox avec la bonne couleur comme style.

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.

Aucun commentaire pour le moment. [+]