캡션/엄지 손가락을 깃털 조명에 추가하는 방법

Question

깃털 라이트 모달 이미지 아래에 캡션을 추가하고 싶습니다. 나는 다음과 같은 코드를 사용하여이 작업을 시도했지만 여기서는 다른 많은 게시물이 있지만 작동하지 않았습니다.

$.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')); 
    } 

대신, 콘솔에 다음과 같은 오류가 있어요 : 내 페이지에 이미지를 삽입하고 방법

다음

Uncaught TypeError: Cannot read property 'prototype' of undefined 
at main.js:62 

featherlight.min.js:8 Featherlight: no content filter found (no target specified) 

---

입니다. 내 계획은 모달 이미지 아래에 위아래로 엄지 손가락을 넣는 것이고, 올바르게 표시하려면 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++; 

       } 
      } 
     } 
    } 
} 

HTML

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

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

Answer 1

오류 메시지가 $.featherlightGallery가 undefined 있음을 말하고있다. 깃털 라이트 갤러리를 올바르게로드하지 않거나 단지 깃털 라이트 만 사용하는 경우 변경해야하는 옵션입니다.