2014-11-25 3 views
0

colorbox를 사용하여 잘 작동하는 팝업 이미지 갤러리를 만듭니다. 이제 갤러리에 pinterest pinit 버튼을 추가하려고합니다.jQuery colorbox 갤러리에서 Pinterest 용 변수 설정

갤러리 사진에

https://developers.pinterest.com/on_hover_pin_it_buttons/

의 pinit 버튼 호버에 나타나지 않습니다, 그러나 그것은 핀 설명은 HTML 페이지의 메타를 사용하고 있습니다 : 여기에 설명 된대로 그것은, 대표자의 자바 스크립트입니다. 내가 pinterest 자바 스크립트 좀 살펴 봤는데 여기에 설명이 설정되어 있다고 생각합니다 :

encodeURIComponent (a.getAttribute ("데이터 핀 설명") || a.title || a.alt || ddtitle

데이터 핀 설명, 제목 및 대체 텍스트 (태그의 alt, 태그의 alt) 설정을 시도했지만 그 중 아무 것도 색상 상자에 채워지지 않았다고 생각합니다. 갤러리 나는 항상 메타 HTML 타이틀을 얻을 수 있기 때문에 여기에

은 내가 사용하고 자바 스크립트 colorbox이다.

<script type="text/javascript"> 
$(document).ready(function(){ 
var $gallery = $('a[rel=gallery]'); 
$gallery.colorbox(); 
$('a#openGallery').click(function(e){ 
$gallery.eq(0).click(); 
e.preventDefault(); 
}); 
<a href="/Images/3406_lg.jpg" rel="gallery" title="My link title"><img src="/Images/Thumbs/FC-3406_lg.jpg" border="0" alt="my large alt text" width="70" height="70" class="thumb" data-pin-description="my data pin description" /></a> 

내가 어떻게 든 때 colorbox 팝 - 업을 채울 가지고 자바 스크립트에서의 setAttribute를 사용해야합니까 :여기에는 HTML입니까? 시도했지만 작동하지 않았지만 구문이 잘못되어있을 수 있습니다.

감사합니다,

답변

0

나는 마침내 그것이 작동되도록하는 방법을 알아 냈하지만 직접 colorbox JS을 편집했다. photo.onload = null 다음에이 줄을 추가했습니다.

photo.alt = $ (요소) .attr ('data-description');

이렇게하면 HTML의 태그에 데이터 설명 속성을 사용하고 이미지가 고정 될 때 pinterest를 가져올 수있었습니다.