fancybox 에 제목 달기

fancybox 에 제목 달기

 

본문에 추가된 이미지에는 아래와 같이 대체텍스트를 지정할 수 있습니다.

이번에는 간단한 설정으로 fancybox 에 타이틀을 추가하려고 합니다.

 

 

 

일전에 HTML 에 추가했던 자바스크립트를 수정해야 합니다. 일전에 수정했던 부분을 찾아서 아래 부분을 수정해 줍니다.

<script>
$(document).ready(function(){
 $(".imageblock").each( function(){
  var img = $(this).find('img');
  $(img).wrap("<a rel='gallery' class='fancybox' href='#'/>").closest("a")
  .on("click", function( event){
      event.stopPropagation();

      event.preventDefault(); 
   $.fancybox.open( $(this).html(), {
    title : img.attr('alt')
   });
  });
 });
});
</script>

 

간단하죠? 다시 테스트 해보시면 이미지 하단에 타이틀이 추가된 것을 확인할 수 있습니다.