Nice background colors with Lightbox 2

12 May 2008 // 0 comments // World Wide Web  // next

Me

In my new world, I find the time to geek a little bit.

The idea was there for awhile. Enhance a little bit Lightbox 2 to get a dynamic background color while displaying an image, instead of the black.

The patch below gets the background color for the current lightbox link and add the value to the image array. This value can be retrieved for each image at the index 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.  }
Download

With SPIP, you only have to create lightbox links with the appropriate style as show above.

Here, I use a darker computed color to get better display results.

No comments at the moment. [+]