12 May 2008
0 Comment
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.
- 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 @@
- }
- }
With SPIP, you only have to create lightbox links with the appropriate style as show above.
- <a href="[(#FICHIER|image_reduire{660,0}|extraire_attribut{src})]"
- rel='lightbox[portfolio]'
- style='background-color: #[(#LOGO_DOCUMENT||couleur_extraire|couleur_foncer)];'
- title="#TITRE">
Here, I use a darker computed color to get better display results.
No comment at the moment.
Leave a comment on this article (afficher)
