Javascript 如何向featherlight添加标题/竖起或竖起大拇指

我想在featherlight模态图像下面添加一个标题。我试着使用下面的代码来实现这一点，正如这里的许多其他帖子所建议的那样，但它不起作用

$.featherlightGallery.prototype.afterContent = function () {
            var caption = this.$currentTarget.find('img').attr('alt');
            this.$instance.find('.caption').remove();
            $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
    }

---

下面是我如何将图像插入我的页面。我的计划是在模态图像下方添加一个上下大拇指，我认为至少正确显示alt标记是一个很好的第一步。如果有人真的能帮忙插入一个链接/图片而不是alt标题，那就更好了！非常感谢您的帮助

JAVASCRIPT

function putImages(){

if (ajaxCall.readyState==4){

    if(ajaxCall.responseText){
        // to separate the file names, with semicolons
        var resp = ajaxCall.responseText;
        var files = resp.split(";");
        // check if string isn't empty and add a thumbnail
        for(var i = 0; i < files.length; i++){

            if(files[i] != ""){

                document.getElementById("gallery").innerHTML += '<img class="myImg" src="/img/'+files[i]+'" width="198" height="198" alt="test" data-featherlight="/img/'+files[i]+'" />';
                picCount++;

                }
            }
        }
    }
}

函数putImages（）{
if（ajaxCall.readyState==4）{
if（ajaxCall.responseText）{
//用分号分隔文件名的步骤
var resp=ajaxCall.responseText；
var files=resp.split（“；”）；
//检查字符串是否为空并添加缩略图
对于（var i=0；i

HTML

错误消息告诉您，

$.featherlightGallery

未定义。您没有正确加载featherlight gallery，或者仅使用featherlight，然后，这就是您应该更改的选项。

因此我将

$.featherlightGallery

更改为

$。featherlight

得到了类似的错误

未捕获类型错误：无法读取未定义的
和
featherlight的属性“prototype”：未找到内容筛选器（未指定目标）.
单击图像打开灯箱时。灯箱似乎工作正常，所以我真的不知道最后一个错误是关于什么的。我能真正看到的唯一问题是缺少标题。这可能是因为我没有使用
标记吗？
function putImages(){

if (ajaxCall.readyState==4){

    if(ajaxCall.responseText){
        // to separate the file names, with semicolons
        var resp = ajaxCall.responseText;
        var files = resp.split(";");
        // check if string isn't empty and add a thumbnail
        for(var i = 0; i < files.length; i++){

            if(files[i] != ""){

                document.getElementById("gallery").innerHTML += '<img class="myImg" src="/img/'+files[i]+'" width="198" height="198" alt="test" data-featherlight="/img/'+files[i]+'" />';
                picCount++;

                }
            }
        }
    }
}

    <div class="container">
      <!-- Image Gallery -->
      <div class="row">
        <div class="col-xs-12" id="gallery">

        </div>
      </div>
    </div>