How can I add a description text on pics in Lightbox2 ?

[petri71]

1) Script Title: Lightbox v2.03.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

Hello,

I would like to add a description text to my pics in LB2. Not just the title but a text underneath and justified, maybe placed between the title and the number of pics in the album.

I could use an application like Graphic Converter or Adobe Bridge or Lightroom to insert the description data in the picture and then LB2 would have to extract it and write it under the title....

Am I dreaming to much or would this be possible ? :-)

[bugaluga]

Solution:

Create an additional attribute "captionText" in the anchor elements
e.g.

<a href="imange.jpg" rel="lightbox[roadtrip]" title="Monalisa" captionText="<b>Monalisa</b><br>smiles <font color=red>gracefully</font>"><img border=0 width=50 src="t_1.jpg"></a>


Modify lightbox.js:
1. Create a new captionText below the numberDisplay:

Lightbox.prototype = {
....
var objNumberDisplay = document.createElement("span");
objNumberDisplay.setAttribute('id','numberDisplay');
objImageDetails.appendChild(objNumberDisplay);

// new:
var objCaption2 = document.createElement("span");
objCaption2.setAttribute('id','captionText');
objImageDetails.appendChild(objCaption2);

2. Create a new captionText below the numberDisplay:
start: function(imageLink) {
....
// if image is NOT part of a set..
if((imageLink.getAttribute('rel') == 'lightbox')){
// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), imageLink.getAttribute('captionText')));
} else {
// if image is part of a set..

// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), anchor.getAttribute('captionText')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
}

3. Display the Caption texts:
showImage: function(){
...
// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);

}
// new

if(imageArray[activeImage][2]){
Element.show('captionText');
Element.setInnerHTML( 'captionText', imageArray[activeImage][2]);
}
else {
Element.hide('captionText');
}

[stefkouam]

Same issue with lightbox V2.04... How to do it?

[dark.tonin]

I know that this subject is old but it's exactly what I'm looking

Indeed, the code look to have changed in the new version 2,4 (but I'm not very good with java).

So anyone as a solution to add a description field in addition to the title field ?

THank you so much

[dark.tonin]

Hi everyboby,

Anyone has a solution for this topic ?

Thank you so much !

[SillyoldDuffer]

Ok I take no credit for this, I had the same issue "How to do this" so searched through my saved code snippets and found this..

Look to line 213 in the lightbox.js for this

this.imageArray = [];
var imageNum = 0;
if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();

Then modify to this

this.imageArray = [];
var imageNum = 0;
imageLink.rel = imageLink.getAttribute('rel');
if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.getAttribute('cap')]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.getAttribute('cap')]; }).
uniq();

You then need to change the HTML from title=" whatever" to cap"whatever" you can still use the title="" if you require to display some text when mouseover the image...

[dark.tonin]

Hi,

Thank you for the help !!!!

The thing is I would like to add the description text (so "cap" here) under the "title" field when clicking on the picture (and not in substitute).

Is that possible ?

Thank you so much