Fancybox 2에서 열린 이미지에 html 데이터 속성을 어떻게 추가합니까?

Question

열린 이미지에 data-pin="true" 속성이 있어야합니다.

다음

<img data-pin="true" class="fancybox-image" src="/uploads/gallery_item/image/426/full_ExShow2013_3156.jpg#lightbox0" alt="" > 

내가 작동하지 않는 것을 가지고있는 JS입니다 : 여기

내가 의 HTML 모습을 이미지를 열어 원하는 것입니다

$('.fancybox').fancybox({ 
    beforeLoad: function(){ 
     $(this.element).data("pin", "true") 
    } 
}); 

편집을

미리보기 이미지의 HTML :

<a class="fancybox" href="/uploads/gallery_item/image/426/full_example.jpg" rel="gallery"> 
      <img alt="" data-src="/uploads/gallery_item/image/426/example.jpg" src="/uploads/gallery_item/image/426/example.jpg" style="width: 301px; height: 301px;"></div> 
</a> 

Answer 1

당신은 오히려 같은 열린 이미지의 선택을 대상으로한다 fancybox를 트리거 한 링크를 나타내지 만 열린 요소 자체는 참조하지 않습니다.

Answer 2

img에 XML 속성이 없기 때문에 데이터가 없다는 것을 의미하지는 않습니다.

보통

$(something).data("key", value); 

당신의 XML 요소에 실제 data-key 속성을 추가하지 않습니다,하지만이 DOM 요소 자체에 저장됩니다.

명시 적으로 태그 속성을 추가하려면 $.attr을 통해이를 수행해야합니다. JSFIDDLE

참고를 참조

$(".fancybox").fancybox({ 
    beforeShow: function() { 
     $(".fancybox-image").attr("data-pin", true) 
    } 
}); 

: 곰을 마음에 당신이 $(this.element) 사용할 때, 당신은 실제로 것을

$(something).attr("data-key", value);