Drupal 7 – Add extra text on the LightBox2 popup

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.
drupal7-add-text-to-lightbox2-1
 

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.
drupal7-add-text-to-lightbox2-2
 

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.
drupal7-add-text-to-lightbox2-3
 

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.
drupal7-add-text-to-lightbox2-4
 

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

Advertisements

4 thoughts on “Drupal 7 – Add extra text on the LightBox2 popup”

    1. There is no straight forward way to do that. your cck field is linked to the node but not the image. or your are using field collection?

      i guess you can try to alter the view template and construct an html which is capable of displaying the content in lightbox.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s