Add short description to header?

[mrbrimm]

For our requirements we'd like to have a description under the header. I've done so with data-description and appending to the header as I do not want to customize the script. The first item shows the right description but when using onNavigate the description seems to be one item behind and I lose sync. Using onShown doesn't resolve the problem either.

Suggestions?

Here's the code:
<a href="" data-description="short description here">name</a>
return $(this).ekkoLightbox({
showArrows: true,
onShow: function() {
description = this.$element.attr('data-description');
console.log(description + '-Show');
count = this.$galleryItems.length;
item = this.galleryIndex + 1;
header = this.$modalHeader;
header.find('.modal-title').after('

' + description + '

Image ' + item + ' of ' + count + '

');

          },
          
          onShown: function() {
              
          },
          onNavigate: function(direction, itemIndex) {
            $('.img-desc, .img-count').empty();
            description = this._$element.attr('data-description');
            console.log(description + '-Nav');
            count = this._$galleryItems.length;
            item = this._galleryIndex + 1;
            header = this._$modalHeader;
            header.find('.modal-title').after('<div class="img-desc">' + description + '</div><div class="img-count">Image ' + item + ' of ' + count + '</div>');
          }
      });``

[Ashley White]

onNavigate fires before the next content load, try using onContentLoaded instead

[mrbrimm]

Awesome! Thank you that did the trick.