성공에서 한 걸음 ... javascript alt

Question

팬시 박스의 내 Facebook 공유자가 이미지의 alt를 잡고 링크 제목으로 지정하고 싶습니다.

아래 코드에서 "정의되지 않은"제목이 표시되고 나머지는 문제가 없습니다.

무엇이 문제입니까? 그러나 그들은 여전히 ​​Fancybox을 통해 탐색 할 수 있으며,

<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a> 


<div class="hidden"> 
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a> 
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a> 
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a> 
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a> 
</div> 

기본적으로 숨겨진 클래스는 상단에 하나를 제외한 모든 이미지를 숨기는 데 사용된다

$(".fancybox").fancybox({ 
    beforeShow : function() { 
     var alt = this.element.find('img').attr('alt'); 

     this.inner.find('img').attr('alt', alt); 

     this.title = alt; 
    } 
}); 

$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     beforeShow: function() { 
      if (this.title) { 
       // New line 
       this.title += '<br />'; 

       // Add tweet button 
       this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> '; 

       // Add FaceBook like button 
       this.title += '<a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + this.href + '&p[title]=' + this.alt + '&p[images][0]=' + this.href + '&p[summary]=My website summary">Facebook</a> ;' 
      } 
     }, 
     afterShow: function() { 
      // Render tweet button 
      twttr.widgets.load(); 
     }, 
     helpers : { 
      title : { 
       type: 'inside' 
      } 
     } 
    }); 

이

이미지에 대한 코드입니다.

---

ANOTHER 편집 : - 내가 경고를 떠날 경우, 적절한 제목으로 팝업

가 나는

어떻게됩니까

<div class="fancybox"><a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a></div> 

테스트하기 위해 첫 번째 이미지를 통해 사업부를 추가 한 . 그러나 이미지를 클릭하면 사진 만 소셜 버튼없이 표시됩니다.

Answer 1

이미지의 alt 속성은 Fancybox 내부에서 사용할 수 없으며 fancybox.js를 적용하지 않고 전달할 수 없습니다. 따라서 beforeShow()으로 두 번째 전화를 걸어 this.alt을 입력하면 undefined이 반환됩니다.

원하는 문자열을 Facebook 링크에 전달하려면 다른 방법을 사용해야합니다. - 그것은 거기에 대한 이유가

if (this.title) { 

      // pass original title to new variable 
      var originalTitle = this.title;   

      // New line 
      this.title += '<br />'; 

      // Add tweet button 
      this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> '; 

      // Add FaceBook like button ## using originalTitle 
      this.title += '<a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + this.href + '&p[title]=' + originalTitle + '&p[images][0]=' + this.href + '&p[summary]=My website summary">Facebook</a> ;' 
     } 

alt 속성은 앵커 태그에서 허용되지 않습니다 : 대체 텍스트가 어떻게 같은 일을하고 약, 제목 텍스트 같은 경우?

Answer 2

이것은 http://api.jquery.com/element-selector/의 오용 일 수 있습니다.

태그가 .fancybox 클래스가있는 요소의 하위 (n 번째 수준)이고 해당 태그의 'alt'특성을 얻으려는 경우 요소 명령을 생략 해보십시오. 여기

var alt = $(this).find('img').attr('alt'); 

은 예입니다

http://jsfiddle.net/benashby/avGk6/

주 : 이후 인 IMG가 fancybox의 DIV의 1 수준의 아이 인 경우, 그것은 http://api.jquery.com/children/를 사용하는 cliet에 쉬울 것 명령 또는 그것의 일부 파생.