Using Fotorama api for custom thumbnails and captions

Question

I am building a site using the Fotorama (www.fotorama.io) Jquery plugin. I have been using this code to generate custom thumbnails (jsfiddle):

 $('.thumbs').each(function () {
  $('a', this).each(function () {
    var $a = $(this);
    // set ids, will use them later
    $a.attr({id: $a.attr('href').replace(/[\/\.-]/g, '')});
  });

  var $thumbs = $(this),
      $fotorama = $thumbs.clone();

  $fotorama
      .on('fotorama:show', function (e, fotorama) {
        // pick the active thumb by id
        $('#' + fotorama.activeFrame.id)
            .addClass('active')
            .siblings()
            .removeClass('active');
      })
      .addClass('fotorama')
      .removeClass('thumbs')
      .insertAfter(this)
      .fotorama({nav: false, width: '100%', maxHeight: 400, ratio: 3/2});

  // get access to the API
  var fotorama = $fotorama.data('fotorama');

  $thumbs.on('click', 'a', function (e) {
    e.preventDefault();
    // show frame by id
    fotorama.show(this.id);
  });
});

This code works very well but I also need custom captions. I found the following code (jsfiddle) but I am struggling with putting the two bits of code together. I'm just learning Javascript and JQuery and could do with a hand combining the script to work as one. Everything I have tried so far has failed.

$('.fotorama')
  .on('fotorama:show', function (e, fotorama) {    
    fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
    var activeFrame = fotorama.activeFrame;
    fotorama.$caption.html(
      '<strong>' + activeFrame.title + '</strong><br>'
      + activeFrame.author
    );
  })
  .fotorama();

Answer 1

Solved with the help of isherwood. Please find solution here http://jsfiddle.net/vCUC2/97/

$('.thumbs').each(function () {
    $('a', this).each(function () {
        var $a = $(this);
        // set ids, will use them later
        $a.attr({
            id: $a.attr('href').replace(/[\/\.-]/g, '')
        });
    });

    var $thumbs = $(this),
        $fotorama = $thumbs.clone();

    $fotorama.on('fotorama:show', function (e, fotorama) {
        // pick the active thumb by id
        $('#' + fotorama.activeFrame.id)
            .addClass('active')
            .siblings()
            .removeClass('active');

        var activeFrame = fotorama.activeFrame;
        fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
        fotorama.$caption.html(
            'Title: <strong>' + activeFrame.title + '</strong><br>Caption: ' + activeFrame.author);
    })
        .addClass('fotorama')
        .removeClass('thumbs')
        .insertAfter(this)
        .fotorama({
        nav: false,
        width: '100%',
        maxHeight: 400,
        ratio: 3 / 2
    });

    // get access to the API
    var fotorama = $fotorama.data('fotorama');

    $thumbs.on('click', 'a', function (e) {
        e.preventDefault();
        // show frame by id
        fotorama.show(this.id);
    });
});