Update @ 2014-01-24: Instead of hacking into LightBox2 module, you can use the hook_js_alter() as suggested by Sunny Gambino. Thanks Sunng. =D

 

LightBox2 will show the image title as caption in the popup.

 

But apart from the title, i would like to add extra text to the popup. Unfortunately there is no proper way to do it. So i have to hack into the lightbox.js.

In this post, i would make use of the image alt to store the extra text which i want to insert to the popup.

 

Ok, let’s start modifying the lightbox.js located @ sites/all/modules/lightbox2/js. Make sure you backup the original file before hacking.

1. Add the altTitle placeholder.

var hoverNav = '<div id="hoverNav"><a id="prevLink" href="#"></a><a id="nextLink" href="#"></a></div>';
var frameNav = '<div id="frameHoverNav"><a id="framePrevLink" href="#"></a><a id="frameNextLink" href="#"></a></div>';
var hoverNav = '<div id="hoverNav"><a id="prevLink" title="' + Drupal.t('Previous') + '" href="#"></a><a id="nextLink" title="' + Drupal.t('Next') + '" href="#"></a></div>';
var frameNav = '<div id="frameHoverNav"><a id="framePrevLink" title="' + Drupal.t('Previous') + '" href="#"></a><a id="frameNextLink" title="' + Drupal.t('Next') + '" href="#"></a></div>';
// **************** //
//  HACK 1 - START
// **************** //
var altTitle = '<span id="altTitle"></span>';
// **************** //
//  HACK 1 - END
// **************** //
var caption = '<span id="caption"></span>';
var numberDisplay = '<span id="numberDisplay"></span>';
var close = '<a id="bottomNavClose" title="' + Drupal.t('Close') + '" href="#"></a>';

 

2. Append the altTitle before the caption.

$("body").append(output);
$('#outerImageContainer').append(modal + frame + imageContainer + loading);
if (!s.use_alt_layout) {
  $('#imageContainer').append(image + hoverNav);
  $('#imageData').append(details + bottomNav);
  // **************** //
  //  HACK 2 - START
  // **************** //
  //$('#imageDetails').append(caption + numberDisplay);
  $('#imageDetails').append(altTitle + caption + numberDisplay);
  // **************** //
  //  HACK 2 - END
  // **************** //
  $('#bottomNav').append(frameNav + close + zoom + zoomOut + pause + play);
}
else {
  $('#outerImageContainer').append(bottomNav);
  $('#imageContainer').append(image);
  $('#bottomNav').append(close + zoom + zoomOut);
  $('#imageData').append(hoverNav + details);
  // **************** //
  //  HACK 3 - START
  // **************** //
  //$('#imageDetails').append(aption + numberDisplay + pause + play);
  $('#imageDetails').append(altTitle + caption + numberDisplay + pause + play);
  // **************** //
  //  HACK 3 - END
  // **************** //
}

 

3. LightBox2 will use the title attribute of the <a> anchor as the alt value. Let’s set it to empty so the image alt will be added to the Lightbox.imageArray as highlighted in line 30 below.

// Loop through anchors and add them to imageArray.
for (i = 0; i < anchors.length; i++) {
  anchor = anchors[i];
  if (anchor.href && typeof(anchor.href) == "string" && $(anchor).attr('rel')) {
    var rel_data = Lightbox.parseRel(anchor);
    var anchor_title = (rel_data["title"] ? rel_data["title"] : anchor.title);
    
    // **************** //
    //  HACK 4 - START
    // **************** //
    //img_alt = anchor.title;
    img_alt = "";
    // **************** //
    //  HACK 4 - END
    // **************** //
    if (!img_alt) {
      var anchor_img = $(anchor).find("img");
      if (anchor_img && $(anchor_img).attr("alt")) {
        img_alt = $(anchor_img).attr("alt");
      }
      else {
        img_alt = title;
      }
    }
    if (rel_data["rel"] == rel) {
      if (rel_data["group"] == rel_group) {
        if (Lightbox.isLightframe || Lightbox.isModal || Lightbox.isVideo) {
          rel_style = rel_data["style"];
        }
        Lightbox.imageArray.push([anchor.href, anchor_title, img_alt, rel_style]);
      }
    }
  }
}

 

5. In the last hack, we insert the value of the altTitle.

// updateDetails()
// Display caption, image number, and bottom nav.
updateDetails: function() {

  $("#imageDataContainer").hide();

  var s = Drupal.settings.lightbox2;

  if (s.show_caption) {
    var caption = Lightbox.filterXSS(Lightbox.imageArray[Lightbox.activeImage][1]);
    if (!caption) caption = '';
    $('#caption').html(caption).css({'zIndex': '10500'}).show();
    
    // **************** //
    //  HACK 5 - START
    // **************** //
    var altTitle = Lightbox.filterXSS(Lightbox.imageArray[Lightbox.activeImage][2]);
    $('#altTitle').html(altTitle).css({'zIndex': '10500'}).show();
    // **************** //
    //  HACK 5 - END
    // **************** //
  }

 

6 See what you get know.

 

7. The last thing you would like to is add some CSS styles to the new HTML element.

/* LIGHTBOX */
#imageData #imageDetails {
  float: none;
  width: 100%;
}

#imageData #altTitle {
  display: block;
  font-weight: bold;
}

#imageData #caption {
  font-weight: normal;
}

 

8. That’s just what i need.

 

Since you have hacked into the LightBox2 module, you have to pay attention during module update.

Hope this example is good enough for you to start with if you want to add more information to the LightBox2 popup.

Done =)

Reference: LightBox2