Results 1 to 7 of 7

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

  1. #1
    Join Date
    Sep 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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 ? :-)

  2. #2
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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');
    }

  3. #3
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default What to do with lightbox V2.04?

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

  4. #4
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi everyboby,

    Anyone has a solution for this topic ?

    Thank you so much !

  6. #6
    Join Date
    Feb 2011
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Post

    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...

  7. #7
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •