Fancybox 캡션에 이미지 alt 사용

Question

이미지의 title 또는 'alt'속성을 사용하여 FancyBox로 제목을 표시하려고합니다. 관련 코드는 다음과 같습니다.

$("a[rel=fancybox]").fancybox({ 
     'transitionIn'  : 'fade', 
     'transitionOut'  : 'elastic', 
     'titlePosition'  : 'inside', 
     'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) { 
      return '<span id="fancybox-title-over">Look ' + 
          (currentIndex + 1) + '/' + currentArray.length + 
          (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
     }, 
     'autoScale':false, 
     'mouseWheelNavigation': false, 
     'onComplete' : function() {$("#fancybox-wrap").unbind('mousewheel.fb');} , 
    }); 
}); 

Answer 1

fancybox v1.3.4를 사용하고있는 것으로 보입니다. 그렇지 않습니까?.

fancybox의 제목이 해당 버전 check this post에서 어떻게 작동하는지 알아보십시오.

미리보기 이미지의 alt 속성에서 팬시 박스 제목을 설정하려면 API 옵션 titleFromAlt을 사용하십시오. 당신은 (버전 : 1.3.4)과 같이 this post

Answer 2

내가 만든 무언가에서 그것을 사용하는 방법을 배울 수 있습니다 // fancybox (a)의 내부 IMG 고도를 얻을

$("#modal_informations a[rel='fancy']").fancybox({ 
     'titleFormat': function(title, currentArray, currentIndex, currentOpts) { 

      if ($(currentArray[currentIndex]).find('img').length > 0) 
      { 
       return '<span id="fancybox-title-inside">' + (currentIndex + 1) + '/' + currentArray.length + ' ' + $(currentArray[currentIndex]).find('img').attr('alt') + '</span>'; 
      } 

      return '<span id="fancybox-title-inside">' + (currentIndex + 1) + '/' + currentArray.length + '</span>'; 
     } 
    }); 

Answer 3

jQuery("a.fancybox").fancybox({ 
    'titlePosition':'inside', 
    'titleFormat': fancyTitle 
}); 

하고 A를 덮어 img alt 내부에있는 제목 (dom은 동일하게 유지되며 fancybox의 보이는 텍스트 만 변경됨)

function fancyTitle(title, currentArray, currentIndex, currentOpts){ 
     // get current href of a (target image) 
     var currHref = jQuery(currentArray[currentIndex]).attr('href'); 
     // select a by target img url 
     return jQuery('a[href="'+currHref+'"]').find('img').attr('alt'); 
    }