Отображение количества изображений и описания изображений во всплывающем слайдере лайтбокса

Question

Я ищу, чтобы отобразить количество изображений в карусели и какой номер изображения в данный момент активен, например, 3/5, и описание изображения при открытии лайтбокса.

Вот ссылка на пример кода, который я использую для всплывающего слайдера лайтбокса:

var lightbox = {
  
  config : {
    gallery              : '.gallery',          // class of gallery
    galleryImage         : '.image',            // class of image within gallery
    lightboxID           : '#lightbox',         // id of lighbox to be created
    lightboxEnabledClass : 'lightbox-enabled',  // class of body when lighbox is enabled
    buttonsExit          : true,                // include exit div?
    buttonsNavigation    : true,                // include navigation divs?
    containImgMargin     : 0                    // margin top and bottom to contain img
  },
  
  init : function(config) {
    
    // merge config defaults with init config
    $.extend(lightbox.config, config);
    
    // on click
    $(lightbox.config.gallery).find('a').on('click', function(event) {
      event.preventDefault();
      lightbox.createLightbox($(this));
    });
    
  },
  
  // create lightbox
  createLightbox : function($element) {
    
    // add body class
    $('body').addClass(lightbox.config.lightboxEnabledClass);

    // remove lightbox if exists
    if ($(lightbox.config.lightboxID).length) { 
      $(lightbox.config.lightboxID).remove(); 
    }

    // add new lightbox
    $('body').append('<div id="' + lightbox.config.lightboxID.substring(1) + '"><div class="slider"></div></div>');

    // add exit div if required
    if (lightbox.config.buttonsExit) {
      $(lightbox.config.lightboxID).append('<div class="exit"></div>');
    }

    // add navigation divs if required
    if (lightbox.config.buttonsNavigation) {
      $(lightbox.config.lightboxID).append('<div class="prev"></div><div class="next"></div>');
    }
    
    // now populate lightbox
    lightbox.populateLightbox($element);
    
  },
  
  // populate lightbox
  populateLightbox : function($element) {
      
    var thisgalleryImage = $element.closest(lightbox.config.galleryImage);
    var thisIndex = thisgalleryImage.index();

    // add slides
    $(lightbox.config.gallery).children(lightbox.config.galleryImage).each(function() {
      $('#lightbox .slider').append('<div class="slide"><div class="frame"><div class="valign"><img src="' + $(this).find('a').attr('href') + '"></div></div></div>');
    });
    
    // now initalise flickity
    lightbox.initFlickity(thisIndex);
    
  },
  
  // initalise flickity
  initFlickity : function(thisIndex) {
    
    $(lightbox.config.lightboxID).find('.slider').flickity({ // more options: https://flickity.metafizzy.co
      cellAlign: 'left',
      resize: true,
      wrapAround: true,
      prevNextButtons: false,
      pageDots: false,
      initialIndex: thisIndex
    });
    
    // make sure image isn't too tall
    lightbox.containImg();
    
    // on window resize make sure image isn't too tall
    $(window).on('resize', function() {
      lightbox.containImg();
    });
    
    // buttons
    var $slider = $(lightbox.config.lightboxID).find('.slider').flickity();
    
    $(lightbox.config.lightboxID).find('.exit').on('click', function() {
      $('body').removeClass('lightbox-enabled');
      setTimeout(function() {
        $slider.flickity('destroy');
        $(lightbox.config.lightboxID).remove();
      }, 0);
    });
    
    $(lightbox.config.lightboxID).find('.prev').on('click', function() {
      $slider.flickity('previous');
    });
    
    $(lightbox.config.lightboxID).find('.next').on('click', function() {
      $slider.flickity('next');
    });
    
    // keyboard
    $(document).keyup(function(event) {
      if ($('body').hasClass('lightbox-enabled')) {
        switch (event.keyCode) {
          case 27:
            $(lightbox.config.lightboxID).find('.exit').click();
            break;
          case 37:
            $(lightbox.config.lightboxID).find('.prev').click();
            break;
          case 39:
            $(lightbox.config.lightboxID).find('.next').click();
            break;
        }
      }
    });
    
  },
  
  // contain lightbox images
  containImg : function() {
    $(lightbox.config.lightboxID).find('img').css('maxHeight', ($(document).height() - lightbox.config.containImgMargin));
  }
  
};

// initalise lightbox
$(document).ready(function() { 
  lightbox.init({
    containImgMargin : 100
  }); 
});

// Demo styling

html {
  body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #333;
  }
}

.gallery {
  line-height: 0;
  font-size: 0;
  text-align: center;
  
  .image {
    display: inline;
  }
}

// Flickity requirements

.flickity-enabled {
 position: relative;
 
 &:focus { 
  outline: none;
 }
 
 &.flickity-enabled.is-draggable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
  
  .flickity-viewport {
   cursor: move;
   cursor: -webkit-grab;
   cursor: grab;
  }
  
  .flickity-viewport.is-pointer-down {
   cursor: -webkit-grabbing;
   cursor: grabbing;
  }
 }
 
 .flickity-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100% !important;
 }
 
 .flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
 }
}

// Lightbox requirements

#lightbox {
 background: rgba(255,255,255, 0.9);
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: hidden;
 z-index: 999;
 
 .slider {
  width: 100%;
  height: 100%;
  
  .slide {
   width: 100%;
   height: 100%;
 
   .frame {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
    
    .valign {
     width: 100%;
     height: 100%;
     display: table-cell;
     text-align: center;
     vertical-align: middle;
     line-height: 0;

          img {
            max-width: 100%;
            height: auto;
          }
    }
   }
  }
 }
  
  // styling for lightbox
 
 .exit {
  position: absolute;
  top: 0;
  right: 0;
    width: 44px;
    padding: 10px 0;
    text-align: center;
    background: #ddd;
  cursor: pointer;
    
    &::after {
      content: 'exit';
    }
 }
 
 .prev, .next {
  position: absolute;
  top: 50%;
    margin-top: -22px;
    width: 44px;
    padding: 10px 0;
    text-align: center;
    background: #ddd;
  cursor: pointer;
 }
 
 .prev {
  left: 0;
    
    &::after {
      content: 'prev';
    }
 }
 
 .next {
  right: 0;
    
    &::after {
      content: 'next';
    }
 }
}

<div class="gallery">
  <div class="image">
    <a href="http://placehold.it/900x600/ddd/333"><img src="http://placehold.it/300x200/ddd/333"></a>
  </div>
  <div class="image">
    <a href="http://placehold.it/900x600/ccc/333"><img src="http://placehold.it/300x200/ccc/333"></a>
  </div>
  <div class="image">
    <a href="http://placehold.it/900x600/bbb/333"><img src="http://placehold.it/300x200/bbb/333"></a>
  </div>
  <div class="image">
    <a href="http://placehold.it/900x600/aaa/333"><img src="http://placehold.it/300x200/aaa/333"></a>
  </div>
</div>

Ниже пример кода

https://codepen.io/jimahyland/pen/GZGrEa