Displaying both title *and* caption - modified jQuery script not working, am I missing something?

Apr 15, 2013 at 11:30 PM
Edited Apr 15, 2013 at 11:31 PM
I have been trying to modify the jquery.lightbox script so that it displays both the title and the description. I have modified ImageGallery.cshtml to make the <li> have a title and have the <a> contain the caption:
<li title="@image.Title" >
  <a href="@image.PublicUrl" title="@image.Caption" …
So far, so good - the <li> actually contains the title, and the anchor the caption.

Looking at the lightbox script, I see three obvious places for modification (the ellipses are places where I have removed untouched code for brevity):

First one:
function _start(objClicked,jQueryMatchedObj){
…
  if(jQueryMatchedObj.length==1){
    settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
  }else{
    for(var i=0;i<jQueryMatchedObj.length;i++){
      settings.imageArray.push(new Array(
        jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title'),
    jQueryMatchedObj[i].parent().getAttribute('title')
      ));
    }
  }
…
The only addition was populating the array, looking for the parent of the anchor (the list item) and grabbing its title. This should be set as settings.imageArray[2].

Second one:
function _set_interface(){$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+settings.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-title"></span><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+settings.imageBtnClose+'"></a></div></div></div></div>');
…
All I did was add another <span id="lightbox-image-details-title"> before the <span id="lightbox-image-details-caption">, in order to hold the title from the list item.

Third one:
function _show_image_data(){
  $('#lightbox-container-image-data-box').slideDown('fast');
  $('#lightbox-image-details-title').hide();
  $('#lightbox-image-details-caption').hide();
  if(settings.imageArray[settings.activeImage][2]){
    $('#lightbox-image-details-title').html(settings.imageArray[settings.activeImage][2]).show();
  }
  if(settings.imageArray[settings.activeImage][1]){
    $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
  }
…
Here I just added an if statement, identical as for the caption, to handle the title.

Problem is, this script is not working. While I do know Javascript and jQuery, I am hardly an expert and I’m stuck. I don’t know what is going wrong. Whenever I click on the image, the image itself comes up as a separate page load, the jQuery does NOT catch the click and handle it. If I revert the jQuery back to original (leaving in the list item’s title), it does work again, just without the title.
Apr 15, 2013 at 11:38 PM
I have narrowed down the problem to the initial modified array -- apparently looking for the .parent() is what is causing the script to break. Why?
Apr 16, 2013 at 12:28 AM
Turns out I don’t need to add a title to the list item -- the image itself contains the alt text which has the title I need. Now, how to gain access to that within the script… that is the question.
Apr 16, 2013 at 1:21 AM
Edited Apr 16, 2013 at 1:22 AM
Seem to have solved it. Replaced last line of array creation with:
    jQueryMatchedObj[i].firstChild.getAttribute('alt')
And the script now goes after the Caption in the Image.

I had to revert the anchor back to using the Title for the title attribute (the title="@image.Title" in ImageGallery.cshtml)., and I had to swap around the array numbers in the third referenced block (in the original post above) so that the title (array[1]) actually went into the span called title and the caption (array[2]) went into the span called caption. The css file in Content/Plugins/LightBox/Styles also had to be edited, line 91 had the caption bolded, whereas I wanted the title to be bolded.

I also had to edit ImageGallery.cshtml in order to put the anchor and image all on one line without any spaces -- not doing so produced strange artifacts after the images in Firefox. This is a known bug, AFAIK.
Apr 16, 2013 at 1:25 AM
Edited Apr 16, 2013 at 1:32 AM
If anyone cares to use it, here are the final modifications that I made to jquery.lightbox-0.5.min.js. You’ll have to re-minimize it; it’s expanded here for ease of legibility.
function _start(objClicked,jQueryMatchedObj){
  $('embed, object, select').css({'visibility':'hidden'});
  _set_interface();
  settings.imageArray.length=0;settings.activeImage=0;
  if(jQueryMatchedObj.length==1){
    settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
  }else{
    for(var i=0;i<jQueryMatchedObj.length;i++){
      settings.imageArray.push(new Array(
        jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title'),
    jQueryMatchedObj[i].firstChild.getAttribute('alt')
      ));
    }
  }
  while(settings.imageArray[settings.activeImage][0]!=objClicked.getAttribute('href')){settings.activeImage++;}
  _set_image_to_view();
}
function _set_interface(){
  $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+settings.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-title"></span>: <span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+settings.imageBtnClose+'"></a></div></div></div></div>');
  var arrPageSizes=___getPageSize();
  $('#jquery-overlay').css({backgroundColor:settings.overlayBgColor,opacity:settings.overlayOpacity,width:arrPageSizes[0],height:arrPageSizes[1]}).fadeIn();
  var arrPageScroll=___getPageScroll();
  $('#jquery-lightbox').css({top:arrPageScroll[1]+(arrPageSizes[3]/10),left:arrPageScroll[0]}).show();
  $('#jquery-overlay,#jquery-lightbox').click(function(){_finish();});
  $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function(){_finish();return false;});
  $(window).resize(
    function(){
      var arrPageSizes=___getPageSize();
      $('#jquery-overlay').css({width:arrPageSizes[0],height:arrPageSizes[1]});
      var arrPageScroll=___getPageScroll();
      $('#jquery-lightbox').css({top:arrPageScroll[1]+(arrPageSizes[3]/10),left:arrPageScroll[0]});
    }
  );
}
function _show_image_data(){
  $('#lightbox-container-image-data-box').slideDown('fast');
  $('#lightbox-image-details-title').hide();
  $('#lightbox-image-details-caption').hide();
  if(settings.imageArray[settings.activeImage][1]){
    $('#lightbox-image-details-title').html(settings.imageArray[settings.activeImage][1]).show();
  }
  if(settings.imageArray[settings.activeImage][2]){
    $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][2]).show();
  }
  if(settings.imageArray.length>1){
    $('#lightbox-image-details-currentNumber').html(settings.txtImage+' '+(settings.activeImage+1)+' '+settings.txtOf+' '+settings.imageArray.length).show();
  }
}
Apr 16, 2013 at 7:19 AM
Oh, great -- it works in web browsers that are standards-compliant, but it fails to work in any version of Internet Explorer. WTF?!

Please feel free to have a look at it: http://rene.kabis.org/Contents/Item/Display/259